17.2.8 设计CSS 3样式文件
第五篇 综合实战篇
第17章 使用HTML 5+CSS 3开发商业站点实例
经过前面内容的学习，读者已了解了使用HTML 5设计网页的基本知识。本章将介绍一种当今最流行的页面修饰技术——CSS 3。并通过一个具体实例的实现过程，向读者介绍联合使用HTML 5+CSS 3+<div>技术开发大型商业网站的方法。在讲解过程中，对整个站点的实现流程进行了详细介绍，读者可以直接将实例中的一些技巧应用到自己的项目中去。
17.1 CSS 3基础
CSS（Cascading Style Sheet，层叠式样式表），简称为样式表，是W3C组织制定的、控制页面显示样式的标记语言。CSS的最新版本是CSS 3.0，这是现在网页所遵循的通用标准。
本节简要介绍CSS技术的基本知识。
17.1.1 CSS概述
在网页需要将指定内容按照指定样式显示时，可以利用CSS实现。在网页中有如下两种使用CSS的方式。
■页内直接设置CSS：即在当前使用页面直接指定样式。
■第三方页面设置：即在别的网页中单独设置CSS，然后通过文件调用这个CSS来实现指定显示效果。
CSS样式设置的具体运行流程如图17-1所示。
图17-1 CSS样式设置运行流程
下面将通过一个具体的CSS应用实例，来看CSS在网页中的表现效果。
实例文件1.html的主要代码如下。
执行后的效果如图17-2所示，如果取消样式，则效果如图17-3所示。
图17-2 显示效果
图17-3 取消样式后效果
从上述不同的显示效果中可以看出CSS的样式的作用十分明显，它可以帮助用户更好地编辑网页。
17.1.2 基本语法
因为在现实应用中，经常用到的CSS元素是选择符、属性和值。所以在CSS的应用语法中其主要应用格式也主要涉及上述3种元素。CSS的基本语法结构如下。
例如，在本章17.1.1节的实例中的代码就严格按照上述格式：
在使用CSS时，需要遵循如下所示的原则：
■当有多个属性时，属性之间必须用“；”隔开。
■属性必须包含在“{}”中。
■在属性设置过程中，可以使用空格、换行等操作。
■如果一个属性有多个值，必须用空格将它们隔开。
17.1.3 选择符的使用
选择符即样式的名称，CSS选择符可以使用如下所示的字符。
■大小写的英文字母：“A-Z”，“a-z”。
■数字：例如“0-9”。
■连字号“-”
■下划线“_”
■冒号“"”
■句号“。”
注意：CSS选择符只能以字母开头。
常用的CSS选择符有通配选择符、类型选择符、群组选择符、包含选择符、ID选择符、class选择符、标签指定选择符、组合选择符等。下面将对上述各类选择符进行详细介绍。
（1）通配选择符
通配选择符的书写格式是“*”，功能是表示页面内所有元素的样式。如下代码就使用了通配选择符：
（2）类型选择符
类型选择符是指，以网页中已有的标签类型作为名称的选择符。例如将<body>、<div>、<p>、<span>等网页中的标签作为选择符名称。下面的代码将页面<body>元素内的字体进行了设置。
注意：所有的页面元素都可以作为选择符。
（3）群组选择符
在XHTML中，对其一组对象同时进行相同的样式指派时，只需使用“逗号”对选择符进行分隔即可。这种方法的优点是对于同样的样式只需要书写一次，减少了代码量，改善了CSS代码结构。群组选择符的书写格式如下。
下面的代码使用了群组选择符对指定对象的页面文字进行了设置。
注意：在使用群组选择符时，使用的"逗号"是半角模式，并非中文全角模式。
（4）包含选择符
包含选择符的功能是对某对象中的子对象进行样式指定，其书写格式如下。
例如下面的代码使用了包含选择符，对<body>元素内<p>元素包含的文字进行了设置。
此方法的优点是避免过多的对ID和class进行设置，直接对所需的元素进行定义。
注意：在使用包含选择符时需要注意如下两点：
■样式设置仅对此对象的子对象标签有效，对于其它单独存在或位于此对象以外的子对象，不应用此样式设置。例如上例中的样式只对<body>元素内的<p>元素进行设置，而对<body>元素外的<p>元素没有效果。
■选择符1和选择符2之间必须用空格隔开。
（5）ID选择符
ID选择符是根据DOM文档对象模型原理所出现的选择符。在XHTML文件中，其中的每一个标签都可以使用“id=""”的形式进行一个名称指派。在“XHTML+CSS”布局的网页中，可以针对不同的用途进行命名，例如头部命名为“header”，底部命名为“footer”。
ID选择符的使用格式如下。
#选择符
下面通过一个实例来讲解ID选择符的使用方法，本实例文件为2.html，保存在“3”文件夹中。
文件2.html的主要代码如下。
执行后的效果如图17-4所示。
图17-4 执行效果
注意：在一个XHTML文件中，ID要具有唯一性，不能重复。
（6）class选择符
上面介绍的ID是对XHTML标签的扩展，而class选择符和ID选择符类似。class是对XHTML多个标签的一种组合，class直译的意思是类或类别。class选择符可以在对于XHTML页面中使用class=""进行名称指派。与ID的区别是，class可以重复使用，页面中多个样式的相同元素可以直接定义为一个class。
class选择符的使用格式如下。
.选择符
使用class选择符的好处是众多的标签均可以使用一个样式来定义，不需要为每一个标签编写一个样式代码。
使用class选择符的方法和ID选择符一样，只需在页面中直接调用样式代码。
（7）组合选择符
组合选择符是指对前面介绍的6种选择符进行组合使用。例如，如下代码组合使用了上述几种方法。
从本节内容可以看出，CSS选择符是非常灵活的。读者可以根据自己页面的需要，合理使用各种选择符，尽量做到结构化和完美化的统一。
17.1.4 CSS属性的简介
CSS属性是CSS中最重要的内容之一，CSS就是利用本身的属性来实现其绚丽的显示效果的。在CSS中常用的属性及其对应的属性值如下。
（1）字体属性：type
■font-family：使用什么字体。
■font-style：字体的样式，是否斜体，有normal\italic\oblique三种。
■font-variant：字体的大小写，有normal和small-caps两种。
■font-weight：字体的粗细，有normal\bold\bolder\lithter三种。
■font-size：字体的大小，有absolute-size\relative-size\length\percentage四种。
（2）颜色和背景属性：backgroud
■color：定义前景色，例如：p{color：red}）。
■background-color：定义背景色。
■background-image：定义背景图片。
■background-repeat：背景图案重复方式，有repeat-x\repeat-y\no-repeat三种。
■background-attachmen：设置滚动，有scroll（滚动）\fixe（固定的）两种。
■background-position：设置背景图案的初始位置，有percentage\length\top\left\right\bottom六种。
（3）文本属性：block
定义排序：
■text-align：文字的对齐，有left\right\center\justify四种。
■text-indent：文本的首行缩进，有length和percentage两种。
■line-height：文本的行高，有normal\numbet\lenggth\percentage（百分比）四种。
定义超链接：
■a：link{color：green；text-decoration：nore}：未访问过的状态。
■a：visited{color：ren；text-decoration：underline；16pt}：访问过的状态。
■a：hover{color：blue；text-decoration：underline；16pt}：鼠标激活的状态。
（4）块属性：block
边距属性：
■margin-top：设置顶边距。
■margin-right：设置右边距。
填充距属性：
■padding-top：设置顶端填充距。
■padding-right：设置右侧填充距。
（5）边框属性：border
■border-top-width：顶端边框宽度。
■border-right-width：右端边框宽度。
图文混排：
■width：定义宽度属性。
■height：定义高度属性。
（6）项目符号和编号属性：list
■display：定义是否显示符号。
■white-spac：怎样处理空白部分，有normal\pre\nowrap三种。
（7）层属性：Type
用于设定对象的定位方式。有如下三种定位方式：
■Absolute：绝对定位。
■Relative：相对定位。
■Static：无特殊定位
（8）列表属性
（9）表格属性
（10）扩展属性
在上述属性中，有的属性只受部分浏览器支持。至于CSS属性的更详细知识和具体用法，将在后面的章节中详细介绍。
17.1.5 几个常用值
在本书前面的内容中，已经了解了CSS选择符和常用的属性，而单位和属性值是CSS属性的基础。正确理解单位和属性值的概念，将有助于用户对CSS属性的使用。本节将对CSS中几个常用的单位和属性值进行简要介绍。
1.颜色单位
在CSS中，可以通过多种方式来定义颜色。其中最为常用的方法有如下两种：
■颜色名称定义
使用颜色名称定义颜色的方法只能实现比较简单的颜色效果，因为只有有限数量的颜色名称才能被浏览器识别。例如，如下代码定义了文字颜色为红色：
执行后的效果如图17-5所示。
图17-5 执行效果
浏览器能够识别的颜色名称如表17-1所示。
表17-1 浏览器识别的颜色名称列表
■十六进制定义
十六进制定义是指使用颜色的十六进制数值定义颜色值。使用十六进制定义后，可以定义更加复杂的颜色。例如，如下代码使用了十六进制数值定义文字颜色：
执行后的效果如图17-6所示。
注意：
（1）在网页设计中，颜色的十六进制值有多个，读者可以从网上获取具体颜色的对应值。也可以在Dreamweaver中选择某元素颜色后，通过查看其代码的方法获取此颜色对应的十六进制值。Dreamweaver方法获取十六进制颜色值的操作方法如图17-7所示。
（2）在代码中使用十六进制颜色时，颜色值前面一定要加上字符“#”。
图17-6 执行效果
图17-7 Dreamweaver获取颜色值流程图
2.长度单位
在CSS中常用的长度单位有如下两种：
（1）绝对长度单位
常用的绝对长度单位如表17-2所示。
表17-2 常用绝对长度单位列表
上述CSS长度单位和现实中测量用的长度单位一样。其中，“pt”（磅）和“pc”（pica）是标准印刷单位，72 pt=1 in，1 pc=12 pt。
（2）相对长度单位
在网页设计中，使用最为频繁的是相对长度单位。其中最为常用的相对长度单位如下。
■字体大小：em
em的功能是，用来定义文本中“font-size”（文字大小）的值。例如，在页面中对某文本定义的文字大小为12 pt，那么对于这个文本元素来说，1 em就是12 pt。也就是说，em的实际大小是受字体尺寸影响的。
■文本高度：ex
“ex”和“em”类似，功能是定义文本中元素的高度。和“em”一样，因为不同字的高度是不同的，所以“ex”的实际大小也受字体和字尺寸的影响。
■像素：px
像素“px”是网页设计中最为常用的长度单位。在显示器中，界面将被划分为多个单元格，其中的每个单元格就是一个像素。像素“px”的具体大小是和屏幕分辨率有关的。例如有一个100 px大小的字符，在800×600分辨率的屏幕上，字符显示宽度是屏幕宽度的1/8；而在1024×768分辨率的屏幕上，字符显示宽度是屏幕宽度的1/10，从视觉角度看，浏览者会以为字变小了。如图17-8所示。
图17-8 100px大小的字符在不同分辨率的屏幕上的显示效果
3.百分比值
百分比值是网页设计中常用的数值之一，其书写格式如下。 数字%。
这里的数字可正可负。
在页面设计中，百分比值需要通过一个值和另外一个值的对比得到。例如，一个元素的宽度为200px，如定义在它里面的子元素的宽度为20%，则此子元素的实际宽度为40px。
4.URL
URL是统一资源定位符的缩写，是指一个文件、文档或图片等对象的路径，通过这个路径用户可以获取此对象的信息。使用URL的语法格式如下。 url（路径）
这里的“路径”是对象存放路径。URL路径分为相对路径和绝对路径两种，在下面将分别介绍。
（1）相对路径
相对路径是指，相对于某文件本身所在位置的路径。例如，某CSS文件和文件名为“2.jpg”的图片处在同一目录下，当CSS给此图片设置某种样式时，可以使用如下代码：
在上述代码中，“2.jpg”是相对于CSS文件的路径。
注意：
■在HTML（XHTML）中使用相对路径时，是相对于CSS文件，而不是相对于HTML（XHTML）页面文件本身。
■代码中url和后面的括号“（”之间不能有空格，否则功能失效。
（2）绝对路径
绝对路径是指，某对象放在网络空间中的绝对位置，是它的实际路径。例如，如下代码使用了绝对路径来调用某图片。
在上述代码中，网址表示图片的实际存放路径。
5.CSS默认值
CSS的默认值是指，在页面中没有定义某属性值时的取值，CSS中的基本默认值是“none”或“0”。CSS的默认值和所使用的浏览器有关。例如，<body>元素的默认补白属性值在IE浏览器中是“0”，而在opera浏览器中是8px。
17.1.6 网页中的CSS应用
在网页中添加CSS的方法和将CSS添加到XTML文件中的方法类似。本节将对页面调用CSS的方式和使用CSS优先级等知识进行简要介绍。
1.页面调用CSS方式
在页面中通常使用如下5种方法调用CSS。
（1）链接外部CSS样式表
链接外部CSS样式表方法是指在“<head></head>”标记内使用<link>标记符调用外部CSS样式。若已有若干CSS外部文件，则在网页中用下列代码即可将CSS文档引入，然后在<body>部分直接使用CSS中的定义。
注意：使用此方法时，外部样式表不能含有任何像<head>或<style>这样的HTML的标记，并且样式表仅仅由样式规则或声明组成。
（2）文档中植入
文档中植入法是指通过<style>标记元素将设置的样式信息作为文档的一部分用于页面中。所有样式表都应列于文档的头部，即包含在<head>和</head>之间。在<head>中，可以包含一个或多个<style>标记元素，但须注意<style>和</style>成对使用，并注意将CSS代码置于“<！--”和“-->”之间。
请看下面的演示代码。
执行后的效果如图17-9所示。
图17-9 执行效果
注意：
■如果浏览器不能识别<style>元素，就会将其作为<body>元素的一部分照常展示其内容，从而使这些样式表对用户是可见的。为了防止出现这种情况，建议将<style>元素的内容要包含在一个注解“<！--”和“-->”里面，像上述例子那样。
■当一个文档具有独特样式的时候，可应用嵌入的样式表。如果多个文档都使用同一样式表，则链接外部CSS样式表方法更适用。
（3）页面标记中加入
页面标记中加入是指，在某个标记符的属性说明中加入设置样式的代码。例如，如下代码使用此方法对文字进行了设置。
（4）导入CSS样式表
使用@import url选择器可以导入第三方样式表，其实现方法类似于链接<link>。它可以放在HTML文档的<style>与</style>标记符之间，与<link>的区别在于无论该网页是否应用了CSS样式表，它都将读取样式表；而<link>只有在该网页应用CSS样式表时，才去读样式表。下面代码说明了@import选择器的使用方法：
（5）脚本运用CSS样式
在DHTML页面中，可以使用脚本语句来实现CSS的调用。当DHTML页面结合使用内嵌的CSS样式和内嵌的脚本事件时，就可以在网页上产生一些动态的效果，如动态地改变字体、颜色、背景、文本属性等。例如，在如下代码中将页面中的文本颜色进行了设置，当鼠标移动到文本上面时字体为红色，离开文本时字体为绿色。
执行效果如图17-10所示。
图17-10 执行效果
2.调用优先级
上述几种常用的页面调用方法，在具体使用时，其作用顺序是不同的。本节重点向读者介绍几种通常所遵循的优先级样式。
（1）通用优先级
一般来说，在页面元素中直接使用的CSS样式是最高的优先级样式，其次是在页面头部定义的CSS样式，最后是使用链接形式调用的样式。
（2）类型选择符和类选择符
在页面中同时使用类型选择符和类选择符时，类选择符的优先级要高于类型选择符。也就是说，要首先遵循类选择符，然后再遵循类型选择符。
（3）ID选择符
在页面设计中，ID选择符的优先级要高于类选择符。
（4）最近优先原则
最近优先原则是在页面设计中所遵循的原则。例如，如果某元素的ID选择符被定义在其父元素中，那么其父元素会使用最近定义的样式。
17.1.7 CSS的编码规范
CSS的编码规范是指，在书写CSS编码时所遵循的规范。虽然以不同的书写方式对CSS的样式本身并没有什么影响，但是按照标准格式书写的代码会更加便于阅读，有利于程序的维护和调试。本节将介绍CSS样式的书写规范知识。
1.书写规范
在网页设计过程中，标准的CSS书写规范主要包括如下两个方面。
（1）书写顺序
在使用CSS时，最好将CSS文件单独书写并保存为独立文件，而不是把其书写在HTML页面中。这样做的好处是，便于CSS样式的统一管理，便于代码的维护。
在编码时，建议读者先书写类型选择符和重复使用的样式，然后再书写伪类代码，最后书写自定义选择符。这样做的好处是，便于在程序维护时的样式查找，提高工作效率。
（2）书写方式
在CSS中，虽然在不违反语法格式的前提下使用任何的书写方式都能正确执行。但还是建议读者在书写每一个属性时，使用换行和缩进来书写。这样做的好处是，使编写的程序一目了然，便于程序的后续维护。例如如下代码：
注意：
在书写CSS代码时，应该注意如下3点。
■CSS属性中的所有长度单位都要注明单位，“0”除外。
■所有使用的十六进制颜色单位的颜色值前面要加上“#”字符。
■充分使用注释。使用注释后，不但使页面代码变的更加清晰易懂，而且有助于开发人
员的维护和修改。
2.命名规范
命名规范是指，CSS元素在命名时所要遵循的规范。在制作网页过程中，经常需要定义大量的选择符。如果没有很好的命名规范，会导致页面的混乱或名称的重复，造成不必要的麻烦。所以，CSS在命名时应遵循一定的规范，使页面结构最优化。
在CSS开发中，通常使用的命名方式是结构化命名方法。它相对于传统的表现效果命名方式来说要优秀得多。例如，当文字颜色为蓝色时，使用“blue”来命名；当某页面元素位于页面中间时，使用“center”来命名。这种传统的方式表面看来比较直观和方便，但是这种方法不能达到标准布局所要求的页面结构和效果相分离的要求。而结构化命名方式结合了表现效果的命名方式，实现样式命名所以，用户应选择结构化的方法来书写编码。
例如，如下命名方式就是遵循了结构化命名方式：
■体育新闻：sports-news。
■后台样式：admin-css。
■左侧导航：left-daohang。
使用结构化命名方法后，不管页面内容放在什么位置，其命名都有同样的含义。同时它可以方便页面中相同的结构，重复使用样式，节省其它样式的编写时间。表17-3中列出了常用页面元素的命名方法。
表17-3 常用CSS命名方法
因为具体页面的使用目的不同，所以并没有适合所有页面的国际命名规范。在开发过程中，只要遵循Web标准所规定的“结构和表现相分离”这一原则，做到命名合理即可。
17.1.8 CSS调试
CSS调试是指对编写后的CSS代码进行调整，确保达到自己满意的效果。在使用CSS时，经常出现显示效果和设计预想的效果不一样，造成效果的差异，或者出现代码错误。造成上述结果的原因很多，有可能是设计者一时大意而书写错误，或者是由于属性之间的冲突而造成的。当出现上述页面表现错误时，就需要进行CSS调试，找出错误的真正原因。本节将向读者介绍CSS的基本调试知识。
1.设计软件调试
使用Dreamweaver调试是最简单的软件调试方法。作为主流的网页制作工具，Dreamweaver能很好地实现设计代码和预览界面的转换。设计者可以迅速的在Dreamweaver设计界面中进行代码调整，然后在浏览器中查看显示效果。通过上述方法可以很好地实现代码和效果的统一，从而快速的找到问题所在。
另外，也有一部分错误是因为浏览器之间的差异造成的。这就需要进行多个浏览器的检测，确定真正问题所在。
2.继承性和默认值带来的问题
在页面测试时，经常出现如下情况：页面中的某元素没有任何指定样式，在显示效果中却体现了某种其他指定样式。造成上述问题的原因可能是，这个元素继承了其父元素的属性。例如，如下代码由于继承性问题而产生异常显示效果。
执行后会发现执行效果继承了<body>元素样式，如图17-11所示。
图17-11 执行效果
在上述代码中，通过样式<STYLE1>设置了文本大小为18px。在显示后的效果图中，文本文字的显示效果却是颜色为红色、文字大小为18px。造成上述问题的原因是，在代码中设置了<body>元素的颜色属性为红色，<body>元素将其样式继承给了它的子元素<span>。
解决上述问题的方式是，重新定义相关属性来覆盖继承样式和默认样式。另外，合理地设计出清晰的嵌套结构样式，是解决上述问题的根本。
（3）背景颜色寻找错位
为准确定位到页面的出错区域，可以向某页面元素添加背景颜色，来判断正在修改的代码是否是目前正在影响页面中的内容。另外，可以充分利用CSS的一些常用边框属性，例如“style-width：1”、“border-color：red”和“border-style：solid”来定位出错区域。具体方法是给块加入一个外边框，一开始的边框比较大，然后逐渐缩小范围，就很容易定位到出错区域了。
（4）第三方软件调试
读者通常使用Dreamwear、IE、Frontpage同时进行调试工作，上述方法虽然比较简单，但是三者之间的频繁转化让人觉得麻烦。第三方软件调试是利用专用软件来调试页面程序的方法，常用的调试工具是CSSVista。
CSSVista是一款Windows（只能在XP上使用）平台的第三方、免费的CSS编辑工具。其主要功能就是将Frontpage、IE6以及CSS编辑器集合到一个框架里面。可以所见即所得地对页面进行CSS调试。CSSVista需要运行在Microsoft's.NET Framework 2.0下。
（5）W3C校验
在W3C的官方站点上可以测试个人设计页面样式的标准化。读者可以登陆到http：//jigsaw.w3.org/css-validator/validator.html，对文件进行测试。其测试界面和结果界面分别如图17-12和图17-13所示。
图17-12 W3C测试界面
图17-13 W3C测试结果界面
在网页设计过程中，W3C可以通过如下3种方式进行测试。
■通过指定URL。
■通过文件上传。
■表单直接输入测试。
17.2 开发一个商业站点
本节将通过一个具体实例的实现过程，详细讲解联合使用HTML 5+CSS 3+<div>技术开发大型商业网站的方法。在讲解过程中，对整个站点的实现流程进行了详细介绍，读者可以直接将实例中的一些技巧应用到自己的项目中去。
17.2.1 网站规划
网站规划是制作网站的第一步，规划阶段的任务主要有如下几点：
■站点需求分析
■预期效果分析
■站点结构规划
下面将对上述任务的实现进行简要介绍。
17.2.2 站点需求分析
本实例是一个化妆品代购网站，作为一个典型的商业站点，必需具备如下的功能模块。
（1）系统主页
利用互联网这个平台，设计一个美观大方的页面作为系统主页，在主页中展现最新、最畅销的产品类型，并附上相应的产品介绍。
（2）产品展示
在本页面中展现出系统内的所有商品，每个产品以图文并茂的方式展现在浏览用户面前。
（3）关于我们
为了消除购买者对网购的后顾之忧，特意介绍了系统对购物者的保证和质保说明，为大家提供一个轻松愉悦的购物环境。
（4）我的博客
在博客页面展现店主的风采，记录店主和企业在生活中的点点滴滴，和在线用户构建一个和谐健康的交流平台。
（5）联系我们
本页面提供了企业和负责人的联系信息，十分详细。如果有变更，则需要及时进行更新。
17.2.3 预期效果分析
对于一个Web站点来说，最为重要的是首页的制作效果。作为站点的门户，首页应该做到美观大方，本实例网站首页的预期效果如图17-14所示。
图17-14 系统首页预期效果图
“产品展示”页面是系统的二级页面，将以图文并茂的样式显示系统内的产品信息，其预期显示效果如图17-15所示。
图17-15 产品展示页页面预期效果图
“关于我们”页面的预期显示效果如图17-16所示。
图17-16 关于我们页面预期效果图
“我的博客”页面的预期显示效果如图17-17所示。
图17-17 我的博客页面预期效果图
17.2.4 站点结构规划
根据17.2.1和17.2.2的分析，可以得出整个站点的系统结构如图17-18所示。
图17-18 站点结构规划图
17.2.5 设计系统首页文件
本系统实例的系统主页文件是index.html，具体实现流程如下。
（1）设计顶部导航界面
插入一个名为“header”的<div>，然后在顶部插入一幅素材图片<div>，在下面分别设置主页、产品展示、关于我们、个人博客、联系我们共5个导航链接。具体代码如下。
执行后的效果如图17-19所示。
图17-19 顶部导航
（2）设计中间内容界面，插入一个名为“contents”的<div>，具体实现流程如下。
■首先在上方插入一幅名为“summer-nymph.png”的图片。
■然后使用<p></p>标记输入一段文本。
■接着插入一个名为“featured”的<div>。
■通过<ul>和<li>列表标记连续插入三个图文并茂的产品信息。
具体实现代码如下。
此时执行之后的效果如图17-20所示。
图17-20 执行效果
（3）设计底部导航界面，插入一个名为“footer”的<div>，具体实现流程如下。
■插入一个名为“connect”的<div>。
■分别提供两个和联系信息有关的超级链接。
执行之后的效果如图17-21所示。
图17-21 执行效果
17.2.6 设计产品展示页面
本实例的产品展示页面文件是shop.html，具体实现流程如下。
（1）设计顶部导航界面，本步骤和前面17.2.4中的步骤（1）完全一样。
（2）设计中间内容界面，插入一个名为“contents”的<div>，具体实现流程如下。
■连续插入4个<div></div>块，每个<div>块展示一个产品。
■在每一个<div>块中，在顶部插入一幅有超级链接的图片，在中间使用<h3></h3>标记设置产品的名称，在下方使用<p></p>标记对展现这款产品的简介信息。
实现代码如下。
（3）设计底部导航界面，本步骤和前面17.2.4中的步骤（3）完全一样。 执行后的效果如图17-22所示。
图17-22 执行效果
17.2.7 设计关于我们页面
本实例的产品展示页面文件是about.html，具体实现流程如下。
（1）设计顶部导航界面，本步骤和前面17.2.4中的步骤（1）完全一样。
（2）设计中间内容界面，具体实现流程如下所示。
■插入一个名为“contents”的<div>。
■在顶部使用<h3></h3>标记设置信息的标题，在下方使用<p></p>标记对展现对应的详细信息。
具体实现代码如下。
（3）设计底部导航界面，本步骤和前面17.2.4中的步骤（3）完全一样。 执行后的效果如图17-23所示。
注意：我的博客页面blog.html和联系我们页面contact.html的具体实现过程和前面的关于我们页面about.html类似，在此不再进行详细讲解。
图17-23 执行效果
17.2.8 设计CSS 3样式文件
本实例的样式文件是style.css，具体实现流程如下所示。
（1）分别为<body>和<img>标记设置样式，具体实现代码如下。
（2）为系统顶部导航设置样式，分别为顶部导航<div>块“header”、“Logo”、“Navigation”编写对应的样式，这些样式代码在本书前面的内容中已经详细讲解。具体实现代码如下。
（3）为系统中间内容部分设置样式，具体实现流程如下。
■首先设置各个页面通用区域的样式，例如“contents”。
■然后为各个页面设置专用样式，例如首页中的“Adbox”样式，关于我们页面样式“about”，产品展示页面样式“shop”等。
具体实现代码如下所示。
（4）为底部导航内容部分设置样式，设置联系信息内容的样式“connect”，为整体部分设置了一幅背景图，然后设置了几种链接方式的样式。具体实现代码如下。
经过CSS 3样式文件的设置修饰之后，整个页面将以我们预期的效果展现在用户面前。例如产品展示页面文件shop.html的最终执行效果如图17-24所示。
图17-24 产品展示页面文件的最终执行效果