8.4 网站的（X）HTML
8.4 网站的（X）HTML
在开始编写CSS之前，应该把整个网站的(X)HTML代码全部写出来，然后把(X)HTML代码放到 http://validator.w3.org/网站上去验证，看是否符合规范，如果验证成功，我们就可以开始编写网站的CSS样式了。下面是(X)HTML验证一些常见的错误：
[插图]
8.5 网站样式（CSS）
8.5.1 将CSS文件分门别类
现在，不仅有了一个基本的XHTML模板，而且有了设计好的网站视觉效果。接下来的任务就是让它以网页形式呈现出来。为了达到目的，需要为模板编写CSS代码。我们把所有的CSS代码都写在同一个文件里，这样只需要在页面的<head>标签内部插入一个<link>标签就可以了，代码如下：
[插图]
8.5.2 编写CSS
对于 CSS的编写，每个人的思路和写法都不同。笔者推荐先编写全局样式，然后编写可大范围内重用的样式，最后编写细节方面的样式。这样，根据 CSS的最近优先原则，可以很容易地对网站进行从整体到细节样式的定义。
1．编写全局样式
首先编写reset.css样式表，该样式表主要用来编写一些全局的样式。CSS代码如下：
[插图]
（1）首先使用元素标签将每个元素的margin和padding属性都设置为零。这样做的好处是，可以让页面不受到不同浏览器默认设置的页边距和字边距的影响。
（2）设置<body>元素的字体颜色，字号大小等，这样可以规范整个网站的样式风格。
（3）设置其他元素的特定样式。读者可自行查阅CSS手册。
2．编写重用的样式
网站的两个页面（index.html和detail.html）都拥有头部和商品推荐部分。因此，头部和商品推荐部分的两个样式表是可以重用的。
首先我们观察一下头部的HTML结构，代码如下：
[插图]
头部主要有四块内容，Logo、搜索框、皮肤切换和导航菜单。
我们先为最外面的元素定义样式，CSS代码如下：
[插图]
上面代码把头部宽度定为990px，然后用“margin:0 auto；”使其能够居中显示。
接下来我们为Logo、搜索框、皮肤切换和导航菜单来定义样式。
- Logo部分
Logo部分的HTML代码如下：
[插图]
通过设计图，我们知道要将Logo放在最左边，即左浮动，CSS代码如下：
[插图]
- 搜索框
搜索部分的HTML代码如下：
[插图]
在前面定义头部样式，我们为”#header .contWidth”定义了”position: relative”，那么在它里面的元素，我们可以使用”position: absolute”来将它定义在头部的任何部分，CSS代码如下：
[插图]
- 皮肤切换
和Logo部分一样，可以采用float浮动方式使它显示在规定的位置，不过此时，我们使用的是右浮动，CSS代码如下：
[插图]
接下来需要为ul元素内部的li元素添加样式，使之符合设计图的效果，代码如下：
[插图]
在上面的CSS 代码中，首先用“float:left；”语句使 li 元素横向排列，然后利用“text-indent:-9999px;”语句使文字显示到看不到的区域，然后给li元素添加背景图片。
为了使不同的li元素显示不同的背景图，可以使用background-position属性来定位背景图。代码如下：
[插图]
- 导航菜单
和搜索框部分一样，可以采用绝对定位方式使它显示在规定的位置，CSS代码如下：
[插图]
上面只是为一次菜单定义了样式，由于有的菜单有二级菜单，所以我们还需要做一些工作。同样，我们还是先观察菜单的HTML结构，代码如下：
[插图]
然后我们为二级菜单定义如下样式：
[插图]
和之前的原理类似，在二级菜单中，我们还是使用了position，float等传统方式。
现在，就可以看出网站头部的效果，如图8-4所示。
[插图]
3．编写主体内容样式
（1）网站首页（index.html）主体布局
网站首页主体部分HTML结构为：
[插图]
可以使用float浮动方式来达到布局需求，CSS代码如下：
[插图]
接下来往主体结构里面放置 HTML 代码来充实网页，从而达到前面的设计图效果。首先从左边开始。在前面的设计图中，左侧有一个模块，即“商品分类”。“商品分类”的HTML 结构如下：
[插图]
接下来，为这个模块添加相应的样式，使之能达到需求。在”商品分类”模块中，有部分商品是热销产品，那么需要为这些元素添加高亮（hot）样式。CSS代码如下：
[插图]
应用样式后，页面呈现效果如图8-5所示。
[插图]
左侧完成后，接下来完成首页主体内容的右侧部分的布局。从前面的设计图中可以知道，右侧部分分为上下两个部分，而上面部分又分为左右两个部分。我们先来完成上面的部分，它们的HTML结构如下：
[插图]
在“大屏广告”部分，我们先为它设置固定的高度和宽度，然后使用overflow:hidden 来隐藏溢出的部分，接下来为它添加position:relative属性，然后为里面的img元素分别添加position:absolute属性。CSS代码如下：
[插图]
接下来，对“大屏广告”下方的缩略图设置样式。可以使用position:absolute和bottom:0的方式让缩略图处于最下方，然后使用float:left的方式让缩略图以水平方式排列。 CSS代码如下：
[插图]
应用样式后，网页呈现图8-6所示的效果。
[插图]
“最新动态”部分由于也都是一些列表元素，所以布局可以借鉴之前模块的样式设计，CSS代码如下：
[插图]
应用样式后，网页呈现图8-7所示的效果。
[插图]
在首页还有最后一块内容，那就是“品牌活动”部分。它的HTML代码如下：
[插图]
从代码可知，“品牌活动”分为“jnBrandTab”和“jnBrandContent”两部分。“jnBrandTab”是品牌活动分类，而“jnBrandContent”则是品牌活动的内容。“jnBrandTab”部分的CSS代码如下：
[插图]
“jnBrandContent”的内容比较多，但宽度有限，所以可以使用overflow:hidden来隐藏多余的部分。在后面的内容里，我们将通过脚本来显示多余的部分。CSS代码如下：
[插图]
应用样式后，网页呈现图8-8所示的效果。
[插图]
（2）详细页（detail.html）主体布局
详细页的头部和左侧样式与首页(index.html)一样，因此只需要修改内容右侧即可。
根据前面设计的效果图可以把右侧结构分为左列和右列。在左列有一张大图片、几张小图片和一个选项卡。右列则是一些商品信息介绍，例如颜色、尺寸和价格等。
详细页主体布局的HTML结构代码如下：
[插图]
前面我们已经为为商品分类设置了样式，接下来只要为“jnProitem”和“jnDetails”设置样式即可，分别为左右两个模块设置float属性和width属性，从而达到布局目的。CSS代码如下：
[插图]
- 产品大图和产品缩略图
和前面一样，使用float:left让缩略图以水平方式排列。CSS代码如下：
[插图]
- 选项卡
在第5章中，我们已经实现了一个选项卡，所以需要将其样式移植过来即可，CSS代码如下：
[插图]
- 颜色，尺寸和评分
这些元素的样式原理都跟前面的差不多，在这里就不再做过多的阐述了，读者可以在源代码中查看相关的CSS代码。
应用样式后，网页呈现如图8-9所示的效果。
[插图]
此时，网站所需的两个页面都已经完成，与之前设计的效果图一致。接下来将用jQuery 脚本给网站添加一些交互效果。