排版前的准备工作
- 分析并画出大概草图模块
- 网页的背景色、背景图
- 网站主页的宽度
- 将当前网页图片放到当前网页的images文件夹中
- 创建CSS文件,并将该CSS文件引入到当前的HTML文件中
- CSS文件:
- 1、全局CSS样式设置
- 一般是去内外填充,如:body,ul,li,h4,a{margin:0px;padding:0px;}
- 去黑点,如:ul,li,ol{list-style:none;}
- 链接设置,如:a:link,a:visited{color:#444;text-decoration:none;} a:hover{color:red;}
- img去边框,如:img{border:0px}
- 整体文本设置,如:body{font-size:12px;font-family:宋体;color:#444;background:#ccc url(../images/xx.png) repeat-x}
- 最大盒子设置,如:.box{width:1000px;height:500px;border:1px solid red;margin:0px auto}
- 2、具体CSS样式设置
- 技巧:
- 设置边框{border:1px solid blue}
- line-height设置与height相等,就有居中效果
- 设置填充时,一般加多少,width就减多少(背景平铺情况下)
- 行内元素设置宽高没效果,可以使用display属性,将行内元素改为块元素
- div(块元素)和span(行内元素)使用最频繁
- 一个class属性,可以写多个类名,类名之间用空格隔开,方便设置不同样式
浏览器兼容性简介
一个网页在不同的浏览器下,显示的效果可能不一致,就是所谓的“不兼容”。
兼容性调试,主要调试IE8、IE7、IE6、Firefox,版本越高兼容越好
IE浏览器的调试工具:IETester
兼容性一般从三个方面考虑
- 全局CSS设置(同上CSS)
- 清除所有的标记的内外边距
- 去除项目符号或编号前面的符号
- 全局链接效果
- 网页中所有文字大小颜色,一般给body设置,会被子元素继承
- 去除图片的链接边框线
- 全局的类样式,.clear{clear:both;}
- 常用兼容性技巧
- 实现所有浏览器主页居中
- Firefox下主页居中代码:.box{margin:0px auto;}
- IE5.5下主页居中代码:body{text-align:center;}
- 合并代码书写:body{text-align:center;}/*会改变文本对齐方式*/ .box{margin:0px auto;text-align:left;}/*恢复被修改的对齐*/
- 单行文本上下居中,设置line-height和height相等
- 左右margin会加倍(IE6下),应该是IE6下的一个bug
- 解决方案:使用display:inline。将其转为行内元素
- 排版时,能使用padding解决的,坚决不用margin。如果必须的用,就使用其中一边。
- 实现所有浏览器主页居中
- CSS HACK
- 针对不同的浏览器,书写不同的我CSS代码的过程,称为“CSS hack”。
- 也就是说:写一个CSS代码,让IE6识别,其他浏览器不识别。
- 针对不同浏览器,有几个符号,这些符号是在CSS属性的前面加的,用于分辨不同的浏览器版本
- “ * ”IE6和IE7识别,如:.box{*background-color:red;}
- “ _ ”只有IE6识别
- CSSHACK的编写顺序:Firefox———IE7———IE6
- 可以使用CSSHACK解决左右margin加倍问题
- 注意:CSSHACK不是W3C的标准,因此,尽量少用。如果调试兼容性,没有办法时,可以偶尔用一下。