作者：李海燕
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
DIV+CSS布局与样式之网站设计精粹试读：
前言
本书是一本详细讲解如何运用DIV+CSS进行网站制作的技术书，是最全的网站重构案例书，由天涯社区前端工程师李海燕结合多年工作经验和项目开发经验所编写。
学习DIV+CSS有用吗
Web前端开发技术包括三个核心要素：XHTML、CSS和JavaScript，本书的DIV+CSS技术充分运用了其中的两个：XHTML和CSS。企业在招聘前端开发或网站制作的人员时，能熟练运用DIV+CSS技术进行网站制作成为筛选人才的必选项。同时运用DIV+CSS技术制作的网站与传统TABLE布局相比，无论在SEO还是在性能上都远远胜出。可以说如果从事与网站相关的工作，那么不懂DIV+CSS将寸步难行。
精心梳理知识要点
本书第1章梳理了作者多年在网站制作中积累的知识要点和技巧，包括公司网站制作流程、CSS模块化、XHTML代码语义、CSS Sprites、CSS重置代码等，使读者少走弯路，快速积累经验。
细致介绍制作过程
本书第2章~第15章详细讲解如何运用DIV+CSS制作14个类型和风格各不相同的大型网站案例。这些案例都是实际项目或目前互联网上正在使用的页面，取材新颖，内容实用。每个案例都分别进行了细致分析，包括网站效果图、布局规划、切图、搭建网站框架、XHTML编写和CSS编写。
系统讲解在企业的实际项目中涉及的问题和解决办法
本书第16章~第18章分别介绍网页在各种浏览器中的兼容问题及解决办法，如何使用Firebug、IE Developer Toolbar和Chrome开发者工具进行网页调试，网页发布前如何进行网站测试，大型项目中的代码压缩和版本控制以及上传网站方法，加深读者对网站制作的认识，提高读者实战能力。
本书涉及的技术或知识点
◎ 网站开发流程◎ XHTML代码语义◎ Firebug◎ 浏览器兼容◎ 网站上传◎ 如何切图◎ CSS Sprites◎ class组合与继承◎ IE Developer Toolbar◎ 代码测试◎ 清除浮动◎ CSS样式重置◎ CSS模块化◎ CSS Hack◎ Chrome开发者工具◎ 版本控制◎ 浏览器内核
本书的案例
◎ 企业网站：Communications通讯◎ 产品展示网站：CLOTHES公司服装展示◎ 电子商务网站：唯品会◎ 搜索资讯网站：Google◎ 游戏网站：游戏部落◎ 论坛类网站：天涯来吧◎ 汽车网站：一汽奔腾◎ 个人网站：博客◎ 教育科研机构网站：北京理工大学◎ 电子政务网站：山西省人民政府驻北京办事处◎ 电影网站：豆瓣电影◎ 婚庆网站：婚礼花艺◎ 餐饮网站：美味比萨餐厅◎ 在线阅读网站：唐茶——阅读新境界
本书特点
1. 讲解细致，分析透彻，本书无论是理论知识的介绍，还是实例的开发，都从实际应用角度出发，精心选择开发中的典型例子。
2. 深入浅出、轻松易学，以实例为主线，激发读者的阅读兴趣，让读者能够真正学习到DIV+CSS技术最实用、最前沿的技术。
3. 图文并茂，步骤详细，对每段代码中的重点都进行了讲解，使读者易于理解和消化，帮助读者快速掌握。
4. 贴近读者、贴近实际，汇总讲解了在网页制作中遇到的兼容问题，并详细介绍各种常用网页调试工具的使用和说明，帮助读者快速找到浏览器各种兼容问题的最优解决方案，书中很多实例来自作者工作的实际案例和现在流行的网站。
5. 贴心提醒，醒目易记，本书根据需要在各章使用了很多“注意”形式，对每个实例制作时遇到的问题进行了总结，让读者可以在学习过程中更轻松地理解相关知识点及概念。
本书读者● XHTML和CSS开发初学者和前端开发爱好者● 前端开发工程师● 网站重构工程师● 从事后端开发但对前端开发感兴趣的人员● 网页设计人员、站长、网站编辑或网站运营● 喜欢网页设计的大中专院校的学生● 可作为各种培训学校的入门+实践教程
本书作者
除本书封面署名作者外，参与本书编写的人员还有宋楠、李春城、李柯泉、陈超、杜礼、孔峰、孙泽军、王刚、杨超、张光泽、赵东、李玉莉、刘岩、潘玉亮、林龙，在此表示感谢。
配套源代码下载
本书配套源代码下载地址（注意字母大小写）为http://pan.baidu.com/s/1qWNlNli。编者2014年6月第1章网站制作前需知
学习DIV+CSS制作网页不仅是因为其流行，更多的是越来越多的人认识到DIV+CSS技术在建站上所体现出的优点。在利用DIV+CSS技术制作一个网页前，除了必备的XHTML和CSS代码知识外，还要了解网站开发流程，以及如何分析页面等知识。
本章主要涉及到的知识点如下。● 网站开发流程：了解网站开发流程，在项目中占据主动。● 分析网页效果图：学习如何划分模块，如何切图，以及介绍CSS
代码模块化。● 与产品经理、后端技术人员进行有效的沟通：明白在网页制作中，
沟通的重要性。● XHTML CSS必备基础知识点：XHTML基本构成，CSS基本构成，
标签语义化，CSS命名规范，CSS Sprites技术，CSS样式重
置，页面质量评估标准，代码注释以及CSS Hack。本章内容是对网页制作涉及的基础知识进行简要介绍，详细知识点请参考XHTML及CSS语法书籍。1.1 网站开发流程
了解网站开发的基本流程，有助于把握开发进度，明确自己的职责和项目环节。绝大多数公司基本上都按照下面的顺序进行网站开发：网站策划（策划人员）→交互设计（交互设计师）→网页设计（视觉设计师）→前端开发（前端工程师）→后端开发（后端工程师）→测试网页（测试人员）→网站发布→后期运营和维护。1.2 分析网页效果图
收到一个网页效果图后不要急于开始制作，要先进行分析和规划，分析好了，后期的制作会很轻松。
制作前先建立好几个文件夹，通常文件夹images存放切好的网页图片，文件夹pic用于存放临时图片，文件夹css用于存放CSS文件，文件夹js用于存放JavaScript文件。1.2.1 划分模块
网页都是由一个个的小模块组成的，对于一个页面，如果它的页面结构和表现有很多统一和相似的地方，便可以运用网页模块化来制作页面，省去重复劳动。如图1.1所示的是划分模块前的原始页面。图1.1 划分模块前的原始页面
如图1.2所示是划分模块后的页面。图1.2 划分模块后的页面1.2.2 CSS模块化
网页上表现相同或相近的区域能提取出可以重复使用的CSS样式，就是CSS模块化。如图1.3所示，①②③④区域的XHTML结构和CSS样式都一样，不同的只是④区域的新闻条目是3条，而其他①②③区域是5条。图1.3 对页面划分模块CSS模块化对于大型网页制作，尤其门户类首页是很实用的一个技巧。
根据图1.3所示，编写代码1-1。
代码1-1
红色块①②③区域的XHTML代码如下：01
红色块④区域的XHTML代码如下：01
红色块区域的CSS代码如下：01 .newlist-1{padding:10px;font-size:14px;}02 .newlist-1 li{height:22px;line-height:22px;overflow:hidden;background:url(../images/dot.gif)no-repeat left center;}03 .newlist-1 li a{color:#C2C2C2;}04 .newlist-1 li a:hover{color:#C2C2C2;text-decoration:none;}
红色块④区域的XHTML代码只比红色块①②③区域的XHTML代码少了两行li标签，而CSS样式newlist-1可以重复使用。1.2.3 class使用技巧
用class组合就是一个XHTML模块的表现样式用几个class样式组合在一起实现，而少用class继承，这样可以有效减少CSS样式的重复编写，可减少代码量，既提高开发效率又提高页面性能。
将代码1-1优化一下，变为如代码1-2所示。
代码1-2
①②③区域的XHTML代码如下：01
④区域的XHTML代码如下：01
图1.3中加框区域的CSS代码如下：01 .p10{padding:10px;}02 .fs12{font-size:14px;}03 .newlist-1{ }04 .newlist-1 li{height:22px;line-height:22px;overflow:hidden;background:url(../images/dot.gif)no-repeat left center;}05 .newlist-1 li a{color:#C2C2C2;}06 .newlist-1 li a:hover{color:#C2C2C2;text-decoration:none;}
将.newlist-1中的padding和font-size拆分到另外两个样式中，这样如果将来红色块①②③④中任意一个区域需要修改字体或边距都可以轻松修改。1.2.4 如何“切图”“切图”是制作网页必不可少的一个环节。所谓切图，就是把视觉设计师给的网页效果图切成一块一块的小图片供制作时使用，这些小图片也被称为“切片”。一般切图软件有Photoshop、Fireworks等。切图的原则是尽量使切片最简单，面积最小，并且一个模块能在高度和宽度上自由伸缩。
切图技巧主要有以下几点：（1）颜色渐变或图案重复的图片只需切其中任意一块重复的区域。（2）反之，颜色不是渐变，没有重复图案或不是纯色的图片将其整体作为一个切片。（3）能用CSS的background-color属性显示的尽量不用图片。（4）切图的时候将网页效果图放大，切片边缘精确到一个px，否则达不到网页与效果图一致的目的。1.3 与产品经理、设计师、后端工程师进行有效沟通
制作网页的前端工程师处于整个项目链条的中间位置，一个项目最简单的组合往往由产品经理、视觉设计师、前端工程师及后端工程师组成。在拿到设计图准备制作页面之前，务必将页面上不明确的部分与产品经理、设计师和后端工程师详细沟通，防止事倍功半的情况发生。
如图1.4所示是一般情况下的项目成员及分工。图1.4 项目成员及分工1.4 XHTML CSS基础知识
本节简要概述了在网页制作中涉及到的XHTML和CSS基础知识以及一些经验总结和实用技巧。在工作中熟练掌握基础知识，合理使用经验总结，灵活运用实用技巧，有助于提高网页制作效率，提高网站性能。1.4.1 XHTML文件的构成
HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是构成网页文档的主要语言。XHTML指扩展超文本标签语言（EXtensible HyperText Markup Language），是更严格更纯净的HTML版本。XHTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
如代码1-3所示是一个XHTML文件：
代码1-301 02 03
04 05其中，DOCTYPE和xmlns都是必须的。编码格式经常使用的有UTF-8和GBK两种，UTF-8是针对英文网页设计的编码格式；GBK是针对中文网页设计的编码格式。在没有特殊需求的情况下统一使用UTF-8编码，因为UTF-8是国际编码，通用性好，另外使用UFT-8编码有个好处是后端页面，如PHP、ASP等一般都使用UTF-8编码，所以与其通信时可以防止出现乱码和不必要的麻烦。
CSS一般位于XHTML文件的头部，JavaScript一般位于XHTML文件的末尾，防止JavaScript文件在加载时出现加载时间过长，而导致页面出现空白等糟糕的用户体验。XHTML标签全部小写。1.4.2 CSS文件的构成
级联样式表（Cascading Style Sheet）简称CSS，通常又称为“层叠样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，网页上蓝色的字、红色的按钮，这些都是风格。通过设立样式表，可以统一地控制XHTML中各标签的显示属性。CSS样式表可以使人更能有效地控制网页外观。如代码1-4是一个CSS文件：
代码1-401 /*css reset*/02 html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6/*...*/03 /*全局公共样式*/04 textarea{resize:none;} /*hack for chrome, disable chrome resizes textarea*/05 a{color:#049;outline-style:none;}06 a:hover{color:#f00;}07 .cf{zoom:1;}08 .cf:after{content:'.';display:block;visibility:hidden;clear:both;height:0px;}09 /*moduleABC ABC模块的样式*/10 #moduleABC h2{font-size:14px;font-weight:bold;}11 #moduleABC p{font-size:12px;line-height:1.5;}
如代码1-4所示，CSS文件分为三部分：第一部分为CSS重置；第二部分为公共样式；第三部分为模块样式（非公共）。所有的公共样式一般写在第二部分，位于模块样式之上，方便查找。
在模块CSS部分，尽量写出样式的详细路径，比如：01 #mty_bbs_myblock .searchbar .addblock ul li a{margin:.2em 0;padding-bottom:.2em}
尽量不要简写为：01 #mty_bbs_myblock .searchbar a{margin:.2em 0;padding-bottom:.2em}CSS代码建议全部小写。1.4.3 标签语义化
制作网站前，首先应该明白各标签的含义。XHTML每个标签都有自己的含义，都有各自的适用范围，各标签不能随意滥用和忽略。
比如在一个页面中，
使用标签语义化有很多好处：● 语义化的网页，容易被搜索引擎抓取，便于网站的推广。● 去掉样式或者样式丢失时页面结构依然清晰分明。● 移动设备能够更加完美地展示网页。● 阅读器会根据标签的语义自动解析，呈现更容易阅读的内容形
式。● 便于后期的开发以及维护，提高团队合作效率。
如表1.1是网页制作中常用的XHTML标签的英文全拼和中文翻译。表1.1 常见XHTML标签语义汇总1.4.4 CSS命名规范
CSS命名既要简洁又要尽可能体现出该样式的作用，可以方便以后阅读和理解，提高可维护性。
CSS的命名一般有两种方法：● 第一种是驼峰命名法，例如topMenu、subLeftMenu。● 另一种是划线命名法，例如top-menu、sub-left-menu、top_menu、
sub_left_menu。可以单独使用一种方法也可以将两种方法组合
使用。
如表1.2所示是常用的CSS命名：表1.2 常用的CSS命名1.4.5 CSS样式重置
浏览器对XHTML标签都有自己默认的样式，如果不对这些默认样式进行重置，那么为了使网页在各浏览器中都呈现出与效果图一致的样子，需要在CSS中对每个XHTML标签反复设置相同的规则。
CSS重置的样式一般都是固定的，如代码1-5所示。
代码1-501 /*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;}03 table{border-collapse:collapse; border-spacing:0;}04 ol,ul{list-style:none;}05 fieldset,img {border:0;}06 textarea{resize:none;}07 input:focus,textarea:focus {outline:none}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:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}16 *.cf{zoom:1;}
.cf样式用于对DIV内部的元素清除浮动，从而避免了增加一个空的DIV标签来清除浮动。CSS重置的样式可以根据个人需求不同自定义，也可以参考大型网站，如Yahoo的CSS Reset代码。
如代码1-6所示。
代码1-6
XHTML代码如下：
推荐的写法：01
不推荐的写法：01
CSS代码如下：01 .clear{clear:both;height:0;overflow:hidden;}02 .cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}03 *.cf{zoom:1;}04 .left{float:left;}05 .right{float:right;}实际项目的CSS文件中，要在CSS文件头部增加代码01~05作为CSS样式重置代码。1.4.6 CSS Sprites技术
CSS Sprites是一种处理网页图片的方式。它是将一个页面涉及到的零星背景图片都整合到一张大图中，再利用CSS的background-image、background-repeat和background-position的组合对背景图片定位，background-position可以用数字精确定位出背景图片的位置。
使用CSS Sprites的好处是能够减少网页HTTP请求，提高网页性能。因为客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。
但是，CSS Sprites技术在实际开发中，要视情况决定是否有必要使用。由于CSS Sprites在开发时需要将小图片一张一张整合到一起，过程繁琐、耗时，因此，对于小流量或简单的页面，耗费的人力、时间成本与收效不成正比，不推荐使用。对于较高流量的页面，可以使用CSS Sprites技术合并图片，并且整合后的图片大小不高于200KB时推荐使用。如图1.5所示是一张网页导航的CSS Sprites图，图片的名称是nav.gif。图1.5 网页导航的CSS Sprites注
蓝色是正常状态下的样式，红色是鼠标指针移上去后的样式。根据图1.5所示，编写代码1-7。
代码1-7
XHTML代码如下：01
CSS代码如下：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;}03 table{border-collapse:collapse; border-spacing:0;}04 ol,ul{list-style:none;}05 fieldset,img {border:0;}06 textarea{resize:none;}07 input:focus,textarea:focus {outline:none}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:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}16 *.cf{zoom:1;}17 /*nav*/18 .nav{width:450px;height:44px;margin:20px auto;}19 .nav ul li {width:150px; height:44px;float:left; }20 .nav ul li a {width:150px; height:44px;float:left; background:url(../images/nav.gif) no-repeat; text-indent:-999em;overflow:hidden;}21 .nav ul .home a{background-position:0px 0px;}22 .nav ul .blog a{background-position:-150px 0px;}23 .nav ul .contact a{background-position:-300px 0px;}24 .nav ul .home a:hover{background-position:0px -44px;}25 .nav ul .blog a:hover{background-position:-150px -44px;}26 .nav ul .contact a:hover{background-position:-300px -44px;}代码1-7的CSS文件中，注释/*nav*/以下是导航样式，注释/*css reset*/是CSS样式重置代码。
如图1.6所示是完成后的网页导航效果。图1.6 网页导航效果
如图1.7所示是鼠标指针移到导航上的网页效果。图1.7 鼠标指针移到导航上的网页效果1.4.7 页面质量评估标准
通过插件YSlow或W3C验证http://validator.w3.org/都可以检测XHTML和CSS代码的质量。
YSlow是Yahoo发布的一款基于Firefox的插件。YSlow可以对网站的页面进行分析，为方便用户提高网站性能，会列出具体的修改意见。如图1.8所示是Yslow的Grade视图，即等级视图，是Yslow给出的网站性能评分。图1.8 Yslow的等级视图Grade视图
如图1.9所示是Yslow的Components视图，即组件视图，通过Components考验查看网页各个元素占用的空间大小。图1.9 Yslow的Components视图
如图1.10所示是Yslow的Statistics视图，即统计信息视图，Statistics视图统计页面对比了空缓存和使用缓存后页面元素的加载情况。图1.10 Yslow的Statistics视图
如图1.11所示是Yslow的Tools视图，即辅助工具视图，是YSlow提供的优化页面的小工具。图1.11 Yslow的Tools视图可以根据网站实际情况选择性的做优化。
通常判断代码质量优劣的标准如下：● 浏览器兼容性测试。● XHTML代码结构是否清晰。● XHTML代码结构是否复杂。● XHTML代码是否和CSS混杂在一起。● XHTML代码中是否大量出现不被推荐使用的标签。● XHTML和CSS代码是否书写规范。1.4.8 代码注释的重要性
代码加注释对于网站制作者本身是一个标记，在大型项目中，能及时有效地进行维护和修改。对代码的阅读者来说，也是一个解释，能让读者透彻了解网站的结构和设计者的思路。对于企业来说，在人员接替时能保证稳定过渡。
1. XHTML代码注释
XHTML代码注释语法：，中间是注释内容。
如代码1-8所示。
代码1-801 02 03
04 05这是一段普通的段落。
11 122. CSS代码注释
CSS代码注释语法有两种：（1）/* 注释内容 */（2）//
其中，前者可以注释多行，从“/*”开始到“*/”之间的都是注释，后者是单行注释。如代码1-9所示。
代码1-9
多行注释：01 /* ----------文字样式开始---------- */02 /*标题字体样式*/03 . white12px{color:white;font-size:16px;}04 /*正文字体样式*/05 .dreamdublack16px{color:black;font-size:16px;}06 /* ----------文字样式结束---------- */
单行注释：01 //详细摘要02 .summary{font-size:12px;color:#666;}
添加注释时，每行注释应简洁清楚的交代该段代码的功能，同时当一段代码被更改时，相应的注释也应改被更改。1.4.9 CSS Hack
由于不同的浏览器对CSS的解析不一样，因此会导致生成的页面效果不一样。这时需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中得到相同的页面效果。这个针对不同的浏览器写不同的CSS代码的过程，就叫CSS Hack。
写CSS Hack在CSS的编写中是下下策，不推荐使用，因为质量好的XHTML和CSS代码通常99.9％不需要写CSS Hack就能处理各浏览器的兼容问题，而且写CSS Hack不利于将来的维护和修改。
写CSS Hack代码应该根据浏览器的现代程度由高往低写，比如Firfox、IE 9、IE 8、IE 7及IE 6的CSS Hack书写顺序应该是Firfox、IE 9、IE 8、IE 7、IE 6。
如表1.3所示是常用CSS Hack兼容一览表（IE 6~IE 8、Chrome、Firefox等主流浏览器兼容表）。表1.3 常用CSS Hack兼容一览表图（IE 6~IE 8、Chrome等主流浏览器兼容一览表图）
浏览器有两种模式：急速模式和普通模式。只要有一种模式不支持使用，表1.3中就用×表示，由于无法判断用户使用的是哪种模式，所以为了保险起见，只要有一种模式下不支持这种CSS Hack的写法，就不建议使用。随着各浏览器版本的升级，对网页的渲染规则也逐渐向W3C标准靠拢，CSS Hack代码也会随之变化。表1.3只是某个时期的CSS Hack的一个参考。
如代码1-10所示是两个DIV块在Firfox、IE 8、IE 7及IE 6下不同显示效果的代码。
代码1-10
XHTML代码：01 02 03
04 05CSS代码：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;}03 table{border-collapse:collapse; border-spacing:0;}04 ol,ul{list-style:none;}05 fieldset,img {border:0;}06 textarea{resize:none;}07 input:focus,textarea:focus {outline:none}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:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}16 *.cf{zoom:1;}17 /*block css兼容*/18 .block{width:500px;height:20px;background-color:#eee;}19 .mt{20 margin-top:0px;/*FF*/21 margin-top:50px\9;/*IE 8*/22 *margin-top:150px;/*IE 7*/23 _margin-top:200px;/*IE 6*/24 }25 .color{26 background-color:red;/*FF*/27 background-color:green\9;/*IE 8*/28 *background-color:orange;/*IE 7*/29 _background-color:blue;/*IE 6*/30 }为方便阅读，部分代码分行显示，实际工作中通常一个类、id或标签的样式写在一行。
如图1.12所示是代码1-10在Firfox、IE 8、IE 7及IE 6下页面的显示效果。
试读结束[说明：试读内容隐藏了图片]