下载掌阅APP，畅读海量书库
立即打开
CSS能够对网页中元素的位置、排版进行px级的精确控制，是目前基于文本展示最优秀的表现设计语言。编写灵活精确的CSS样式，最根本的是准确理解CSS盒模型的含义。
本节主要讲解企业网站的CSS编写，包括网站公共部分的CSS编写、页面框架的CSS编写、页头和页脚的CSS编写、首页和内页的CSS编写。
页面公共部分包括CSS重置、页面中公用字体、字体颜色、边距的CSS样式，以及内容部分的公司简介、公司新闻、特色产品、服务项目、全球服务和客户评价的标题。
CSS重置代码务必在编写页面CSS样式前编写。由于浏览器对XHTML标签的默认样式的设置不一样，因此要使页面展现的效果在各浏览器中一致，CSS重置代码是最开始要编写的。
除CSS重置代码外，前面分析了页面公共部分并且编写了页面公共部分的XHTML代码，这两部分的CSS代码编写如下：
代码2-9
01 /*css reset*/
02 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0; padding:0;} /*以上元素的内外边距都设置为0*/
03 table{border-collapse:collapse; border-spacing:0;} /*合并表格边框，单元格的边框间距为0*/
04 ol,ul{list-style:none;} /* 隐藏列表符号*/
05 fieldset,img {border:0;}
06 textarea{resize:none;} /*文本区尺寸不能调节*/
07 input:focus,textarea:focus {outline:none} /*获得焦点时边框为0*/
08 a{text-decoration:none;}
09 a:hover{text-decoration:underline;}
10 q:before, q:after{content:'';} /*去掉被引用内容的引号*/
11 abbr, acronym{border:0; font-variant:normal;} /*网页中的文字缩写与简称设置为正常字体*/
12 address,cite,dfn,optgroup,em,var{font-style:normal;} /*以上标签的字体都设置为正常字体*/
13 legend{color:#000;}
14 .clear{clear:both;height:0;overflow:hidden;}
15 /*清除浮动类 .cf*/
16 .cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
17 *.cf{zoom:1;} /* IE 6/7浏览器(触发hasLayout) */
18 /*global css*/
19 body{font-size:12px;font-family:"宋体";background:url("../images/bg.gif") repeat left top;color:#545454;}
20 a{color:#545454;} /*网站所有链接的颜色设置*/
21 a:hover{color:#545454;}
22 .green{color:#6FCB00;} /*网站通用文字颜色设置*/
23 .green:hover{color:#6FCB00;}
24 .blue{color:#3E9DE2;}
25 .deepblue{color:#324A6D;}
26 .deepblue1{color:#106092;}
27 .gray{color:#787878;}
28 .font-tahoma{font-family:Tahoma;} /*网站通用文字字体设置*/
29 .mt8{margin-top:8px;} /*网站通用外边距设置*/
30 .mt20{margin-top:20px;}
31 .mb45{margin-bottom:45px;}
32 #bd h2{font-size:15px;padding:15px 0;margin:10px 0;} /*网站通用标题样式设置*/
33 #bd h2 span{padding:0 10px 0 5px;}
第01~17行是CSS重置代码，通过对相关元素的内外边距、字体、字号等的重新设置，覆盖掉各浏览器中有可能不一样的默认样式，从而提高浏览器的兼容性。第18~33行是公用CSS代码，第32~33行是页面公共标题样式的设置。
前面分析了页面的布局图并且编写了页面框架的XHTML代码，根据这两部分编写页面框架的CSS代码如下：
代码2-10
01 #doc{
02 width:733px;
03 background:#fff;
04 padding:0 10px 9px 9px;
05 margin:105px auto;
06 }
07 /*页面头部#hd的CSS样式*/
08 #hd{
09 margin:0 0 12px 0;
10 }
11 /*网站内容#bd的CSS样式*/
12 #bd{
13 background:url("../images/bd-bg.gif") no-repeat left top;
14 line-height:18px;
15 border-bottom:1px solid #A8A8A8;
16 padding:0 0 8px 16px;
17 }
18 /*网站页脚#ft的CSS样式*/
19 #ft{
20 background:url("../images/ft-bg.gif") repeat-x left top;
21 border-top:1px solid #E5E5E5;
22 margin:5px 0 0 0;
23 height:47px;
24 line-height:47px;
25 padding:0 0 0 10px;
26 }
第01~06行是页面最外层容器#doc的CSS代码。第05行代码通过设置左右边距为auto，实现了#doc容器在页面中水平居中显示的目的。这个知识在网页布局中也经常使用，即通常设置一个div或其他标签容器的左右边距是auto，从而使该容器在父级容器中水平居中显示。
前面分析了页面头部并且编写了页面头部的XHTML代码，在页面头部中，网站标志、日期和邮箱的CSS代码如下：
代码2-11
01 .logo-date-mail{padding:18px 0;}
02 .logo{
03 background:url("../images/logo.gif") no-repeat left top; /*标志的背景图*/
04 width:182px; /*标志的宽*/
05 height:27px; /*标志的高*/
06 float:left; /*包含标志的div向左浮动*/
07 }
08 .logo a{
09 display:block; /*将a设置为块元素*/
10 width:100%; /*a的宽是父元素的100% */
11 height:100%; /*a的高是父元素的100% */
12 text-indent:-999em; /*a中的文字缩进-999em */
13 }
14 .date-mail{
15 float:right; /*日期和邮箱向右浮动*/
16 }
17 .date{
18 float:left; /*日期向左浮动*/
19 padding:6px 25px 6px 0; /*日期的内边距*/
20 background:url("../images/top_line.gif") no-repeat right center; /*日期右边的竖线*/
21 }
22 .mail{
23 background:url("../images/icon-mail.png")no-repeat left top; /*邮箱背景图*/
24 width:32px; /*邮箱的宽*/
25 height:19px; /*邮箱的高*/
26 float:left; /*包含邮箱的div向左浮动*/
27 margin:3px 30px 0; /*邮箱的外边距*/
28 display:inline; /*修复ie6双边距bug*/
29 }
30 .mail a{
31 display:block; /*将a设置为块元素*/
32 width:100%; /*a的宽是父元素的100% */
33 height:100%; /*a的高是父元素的100% */
34 text-indent:-999em; /*a中的文字缩进-999em */
35 }
第02~13行是标志的CSS代码，其中第03行代码是标志的背景图片。网站的标志由于不经常更换，而且网站标志所用的字体一般都不是网站常用的字体，为了防止客户端没有安装某些特殊字体造成网页文字变形，所以网站的标志最好用图片制作。第06行代码实现标志向左浮动。第12行代码利用文字缩进-999em，实现标志中的文字在页面展示时不可见。第15行代码实现了日期和邮箱整体向右浮动。第28行代码对于解决浏览器兼容很重要，在IE 6浏览器下，class为mail的div容器，其左右外边距是其他浏览器的双倍。也就是说，如果没有这句代码，在IE 6下，class为mail的div容器，其左右外边距显示的不是30px，而是60px。
一个div盒子如果设置了margin，并且该div设置了float浮动，那么在IE 6下便会产生双边距问题，解决办法是在该浮动的div上增加样式display:inline。
头部导航和banner的CSS代码如下：
代码2-12
01 .nav{
02 background:url("../images/nav_bg.gif") no-repeat left top; /*导航背景图*/
03 float:left; /*导航向左浮动*/
04 width:217px; /*导航的宽*/
05 height:182px; /*导航的高*/
06 overflow:hidden; /*隐藏溢出高度的部分*/
07 }
08 .nav ul{
09 border-top:1px solid #EBEBEB; /*导航中列表的上边框*/
10 margin:0 0 0 12px; /*列表的外边距*/
11 }
12 .nav ul li.first{
13 height:30px; /*列表第一行的高度*/
14 line-height:30px; /*列表第一行的行高*/
15 }
16 .nav ul li{
17 border-bottom:1px dotted #DBDBDB; /*列表每行的下边框*/
18 height:37px; /*列表每行的高度*/
19 line-height:37px; /*列表每行的行高*/
20 padding:0 0 0 25px; /*列表每行的内边距*/
21 margin:0 0 0 8px; /*列表每行的外边距*/
22 }
23 .nav ul li a:hover{
24 color:#3E9DE2; /*鼠标经过文字颜色*/
25 text-decoration:none; /*鼠标经过文字去掉下划线*/
26 }
27 .banner{
28 float:right; /*banner向右浮动*/
29 width:516px; /*banner的宽*/
30 }
31 .banner img{
32 display:block; /*将图片设置为块元素*/
33 }
第01~26行是导航的CSS代码，第27~33行是banner的CSS代码。第03行和第28行是布局的关键，分别实现了导航向左浮动和banner向右浮动。第06行隐藏溢出导航高度的部分，是为了将导航最后一行的下边框截取掉。第13~14行也是一个知识点，通常利用设置某div块的高度height和行高line-height相同，从而实现该div块中单行文字垂直居中显示。第18~19行同样运用了该知识。第32行通过将图片设置为块元素，从而解决各浏览器下图片有3px空白的bug。
本章中网站的页脚由于只有一行文字，因此页脚的样式定义在#ft中，见代码2-10中的第19~26行。
根据对首页主体内容的分析和首页主体内容的XHTML代码，编写首页主体内容的CSS代码如下。
代码2-13
01 /*index.html*/
02 /*introduce*/
03 /*class为introduce 的div表示UI中的“公司介绍”，向左浮动，并且宽度设置为445px */
04 .introduce{
05 width:445px;
06 float:left;
07 }
08 /*“公司介绍”中的图片向左浮动实现图文环绕 */
09 .introduce img{
10 margin:0 10px 0 0;
11 float:left;
12 }
13 .introduce .content{
14 padding:0 50px 0 0;
15 }
16 .introduce .content p{
17 margin:0 0 12px 0;
18 }
19 /*news*/
20 /* class为news的div表示UI中的“公司新闻”，向右浮动，并且宽度设置为272px */
21 .news{
22 width:272px;
23 float:right;
24 }
25 .news dl{
26 padding:0 10px 0 0;
27 }
28 /*“公司新闻”中的日期列表设置背景图片，并且文字向左移动30px*/
29 .news dl dt{
30 background:url("../images/icon-date.gif") no-repeat 8px center;
31 padding:0 0 0 30px;
32 }
第04~18行是公司介绍部分的CSS代码。第21~32行是公司新闻部分的CSS代码。第06行和第23行是这两部分布局的关键，分别实现公司介绍向左浮动和公司新闻向右浮动。第30行代码是通过为公司新闻的日期添加背景图片，可以实现每个日期前面都有一个名为icon-date.gif的小图标。
根据对内页主体内容的分析和内页XHTML代码，编写内页主体内容的CSS代码如下：
代码2-14
01 /*products.html*/
02 /*products*/
03 /*class为products的div表示UI中的“特色产品”，向左浮动，并且宽度设置为445px */
04 .products{
05 width:445px;
06 float:left;
07 }
08 /*“特色产品”中，每个class为pro-item的div模块中，图片向左浮动*/
09 .products .pro-item .photo{
10 float:left;
11 width:92px;
12 height:52px;
13 }
14 .products .pro-item dl{
15 margin:0 25px 8px 118px;
16 }
17 .products .pro-item dl dt a{
18 text-decoration:underline;
19 }
20 /*services-lists*/
21 /* class为services-lists的div表示UI中的“服务项目”，向右浮动，并且宽度设置为272px */
22 .services-lists{
23 width:272px;
24 float:right;
25 }
26 /*“服务项目”中，每段文字首行缩进两个汉字的距离*/
27 .services-lists p{
28 text-indent:2em;
29 }
30 .services-lists ul{
31 margin:10px 0;
32 }
33 /*“服务项目”中的文字链接列表设置背景图片，文字链接向左移动30px，每行设置下边框，且文字在每个li标签中垂直居中显示 */
34 .services-lists ul li{
35 background:url("../images/bullet2.gif") no-repeat 8px center;
36 padding:0 0 0 30px;
37 border-bottom:1px dotted #ccc;
38 height:23px;
39 line-height:23px;
40 }
41 /*服务项目中的文字链接列表，最后一行的下边框设置为无*/
42 .services-lists ul li.last{
43 border-bottom:0 none;
44 }
第03~19行是公司产品页中“特色产品”的CSS代码。第21~44行是公司产品页中“服务项目”的CSS代码。第06行、第24行代码是布局的关键，分别实现特色产品向左浮动和服务项目向右浮动。第10行代码通过设置图片向左浮动，使图片后面的文字环绕到图片的右边，实现了该图片与旁边文字的图文环绕。第28行代码是汉字排版中常用到的知识，通过设置首行缩进的值为2em，实现段落首行缩进两个汉字。
前面讲解了页面头部、页面主体内容、页脚、CSS重置和页面公用的CSS代码，这些代码共同组成了网站页面的完整CSS代码。网站页面的完整CSS代码如下：
代码2-15
01 @charset "utf-8";
02 /*css reset*/
03 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0; padding:0;}
04 …
17 *.cf{zoom:1;}
18 /*global css*/
19 body{ background:url("../images/bg.gif") repeat left top;color:#545454;font-size:12px;font-family:"宋体"; }
20 …
51 #bd h2 span{padding:0 10px 0 5px;}
52 /*module css*/
53 /*index.html*/
54 /*introduce*/
55 .introduce{width:445px;float:left;}
56 …
58 .introduce .content p{margin:0 0 12px 0;}
59 /*news*/
60 .news{width:272px;float:right;}
61 …
62 .news dl dt{background:url("../images/icon-date.gif") no-repeat 8px center;padding:0 0 0 30px;}
63 /*products.html*/
64 /*products*/
65 .products{width:445px;float:left;}
66 …
68 .products .pro-item dl dt a{text-decoration:underline;}
69 /*services-lists*/
70 .services-lists{width:272px;float:right;}
71 …
74 .services-lists ul li.last{border-bottom:0 none;}
通常为了减少CSS文件的大小，进而提高页面渲染速度，每个CSS样式尽量在一行显示，以减少不必要的空格。