一步步学习SPD2010--第十章节--SP网站品牌化(6)--创建样式
来源:互联网 发布:修改手机短信的软件 编辑:程序博客网 时间:2024/05/04 20:07
一步步学习SPD2010--第十章节--SP网站品牌化(6)--创建样式
在之前的部分我向你展示了如何使用CSS样式规则和声明辨识内容。为了给样式规则和声明做些改变,你可以使用SPD提供的视觉工具,或者直接编辑样式。两个方法产生同样的结果。如果你还不了解CSS,学习如何处理样式表是个新手,就使用PSD的工具并检查代码视图来看SPD产生的CSS。这将帮助你学习样式声明。从简单页面开始,并随着你理解的加深,你可以转向更加复杂的页面。
小贴士:记得使用预览功能,时刻在不同浏览器、不同大小屏幕检查你的设计。如果不满意可以按CTRL+Z取消操作。
一些CSS设计者按照样式位于网页的位置分组样式表的样式;另外一些按照创建的顺序。如果你要创建一个样式表,以后供其他用户维护,你可能需要遵循他们的标准。微软在SharePoint使用的样式有自己的命名标准。例如,大多数SharePoint类以.ms-开头,如果样式应用到与Web部件有关的元素时,要在名称中包含WP。
小贴士:使用相同声明的选择器可以分组到一个速记的格式。这减少了样式表大小,以及给每个选择器添加声明的需要。
本练习中,你将创建两个紧挨的折叠区域。
准备:使用SPD打开MyPage.aspx,进入拆分视图。
1. 点击样式选项卡中的创建新样式。
2. 选择器中删除.newStyle1,输入#page_content。定义位置选择现有样式表。
3. 浏览找到MyStyle.css文件。点击打开。
故障分析:如果MyStyle.css没有出现在对话框中,点击左上角的SPD,导航到样式表。
4. 在类别下点击“方框”。清除margin右边的复选框,right中输入200。
5. 点击确定。
6. 同样新建样式。
7. 选择器输入#right_col。
8. 选中现有样式表,URL选择MyStyle.css。
9. 类别中选择定位。点击absolute。width输入200,top输入0,right输入0.
10. 点击确定。
11. 同样创建新样式#container,定位relative,width为100%。
这样div#container包含了div#page_content和div#right_col,在一行紧挨着。代码视图中,没有什么变化。
12. 点击MyStyle.css,CSS声明已经被创建了。
- 一步步学习SPD2010--第十章节--SP网站品牌化(6)--创建样式
- 一步步学习SPD2010--第十章节--SP网站品牌化(2)--在CSS中识别样式
- 一步步学习SPD2010--第十章节--SP网站品牌化(7)--修改和删除样式
- 一步步学习SPD2010--第十章节--SP网站品牌化(8)--使用样式应用程序组命令
- 一步步学习SPD2010--第十章节--SP网站品牌化(4)--创建并关联CSS文件
- 一步步学习SPD2010--第十章节--SP网站品牌化
- 一步步学习SPD2010--第十章节--SP网站品牌化(9)--理解SP的CSS继承
- 一步步学习SPD2010--第十章节--SP网站品牌化(3)--在内容页中识别样式
- 一步步学习SPD2010--第十章节--SP网站品牌化(5)--创建具有功能的HTML页面
- 一步步学习SPD2010--第十章节--SP网站品牌化(11)--使用CSS报表
- 一步步学习SPD2010--第十章节--SP网站品牌化(12)--关键点
- 一步步学习SPD2010--第十章节--SP网站品牌化(1)--设置CSS和颜色编码页面编辑器选项
- 一步步学习SPD2010--第十章节--SP网站品牌化(10)--使用智能提示来增加CSS
- 一步步学习SPD2010--第二章节--处理SP网站(6)---- 探索SP网站
- 一步步学习SPD2010--第二章节--处理SP网站(3)--创建网站层次架构
- 一步步学习SPD2010--第二章节--处理SP网站(4)--删除SP网站
- 一步步学习SPD2010--第十三章节--管理SP Server环境的Web内容(1)--创建一个发布网站
- 一步步学习SPD2010--第二章节--处理SP网站(2)--管理网站用户和权限
- linux下两台主机通过ssh实现无密码登录
- 用jQuery imagesLoaded plugin实现页面加载效果
- ZendFramework-Zend_Acl-权限管理简单实现权限管理
- awk个人总结
- 微信公众账号能做什么怎么用,有哪些API供开发总结
- 一步步学习SPD2010--第十章节--SP网站品牌化(6)--创建样式
- 【首发】上亿用户QQ号码泄露,腾讯WEB产品漏洞
- iptables使用总结
- DQACP is missing Press Ctrl+Alt+Del to Restart(图)
- getElementsByClassName兼容问题
- Javascript中this、prototype、constructor的理解
- 深入理解JavaScript系列(5):强大的原型和原型链
- android开机自动启动
- Jquery全屏图片自动切换插件,支持窗口变化图片大小等比例变化