- 第2版前言
- 本书结构
- 读者对象
- 本书约定
- 读者反馈＆示例下载
- 疑难解答＆本书勘误
- 第1章 认识 jQuery
- 第2章 jQuery 选择器
- 第3章 jQuery 中的 DOM 操作
- 第4章 jQuery 中的事件和动画
- 第5章 jQuery 对表单、表格的操作及更多应用
- 第6章 jQuery 与 Ajax 的应用
- 第7章 jQuery 插件的使用和写法
- 第8章 用 jQuery 打造个性网站
- 第9章 jQuery Mobile
- 第10章 jQuery 各个版本的变化
- 第11章 jQuery 性能优化和技巧
- 附录A 关于 $(document).ready() 函数
- 附录B Firebug
- 附录C Ajax 的 XMLHttpRequest 对象的属性和方法
- 附录D jQuery $.ajax() 方法的参数详解
- 附录E jQuery 加载并解析 XML
- 附录F 插件 API
- 附录G jQuery 速查表
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手册。
注意：关于重置样式，读者也可以参考Eric Meyer的重置样式和YUI的重置样式。
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元素添加背景图片。
注意：背景图片是预先合并好的，这样能节省网站的HTTP请求。
为了使不同的li元素显示不同的背景图，可以使用background-position属性来定位背景图。代码如下：
导航菜单
和搜索框部分一样，可以采用绝对定位方式使它显示在规定的位置，CSS代码如下：
上面只是为一次菜单定义了样式，由于有的菜单有二级菜单，所以我们还需要做一些工作。同样，我们还是先观察菜单的HTML结构，代码如下：
然后我们为二级菜单定义如下样式：
和之前的原理类似，在二级菜单中，我们还是使用了position，float等传统方式。
现在，就可以看出网站头部的效果，如图8-4所示。
图8-4 网站头部的效果
这里二级菜单并未显示出来，稍后编写脚本的时候将解决该问题。
3．编写主体内容样式
（1）网站首页（index.html）主体布局
网站首页主体部分HTML结构为：
可以使用float浮动方式来达到布局需求，CSS代码如下：
接下来往主体结构里面放置HTML代码来充实网页，从而达到前面的设计图效果。首先从左边开始。在前面的设计图中，左侧有一个模块，即商品分类。商品分类的HTML结构如下：
接下来，为这个模块添加相应的样式，使之能达到需求。在商品分类模块中，有部分商品是热销产品，那么需要为这些元素添加高亮（hot）样式。CSS代码如下：
应用样式后，页面呈现效果如图8-5所示。
左侧完成后，接下来完成首页主体内容的右侧部分的布局。从前面的设计图中可以知道，右侧部分分为上下两个部分，而上面部分又分为左右两个部分。我们先来完成上面的部分，它们的HTML结构如下：
图8-5 左侧部分的布局
在大屏广告部分，我们先为它设置固定的高度和宽度，然后使用overflow:hidden来隐藏溢出的部分，接下来为它添加position:relative属性，然后为里面的img元素分别添加position:absolute属性。CSS代码如下：
接下来，对大屏广告下方的缩略图设置样式。可以使用position:absolute和bottom:0的方式让缩略图处于最下方，然后使用float:left的方式让缩略图以水平方式排列。CSS代码如下：
应用样式后，网页呈现图8-6所示的效果。
图8-6 大屏广告样式完成
最新动态部分由于也都是一些列表元素，所以布局可以借鉴之前模块的样式设计，CSS代码如下：
应用样式后，网页呈现图8-7所示的效果。
图8-7 最新动态布局
在首页还有最后一块内容，那就是品牌活动部分。它的HTML代码如下：
从代码可知，品牌活动分为jnBrandTab和jnBrandContent两部分。jnBrandTab是品牌活动分类，而jnBrandContent则是品牌活动的内容。jnBrandTab部分的CSS代码如下：
jnBrandContent的内容比较多，但宽度有限，所以可以使用overflow:hidden来隐藏多余的部分。在后面的内容里，我们将通过脚本来显示多余的部分。CSS代码如下：
应用样式后，网页呈现图8-8所示的效果。
图8-8 首页
（2）详细页（detail.html）主体布局
详细页的头部和左侧样式与首页(index.html)一样，因此只需要修改内容右侧即可。
根据前面设计的效果图可以把右侧结构分为左列和右列。在左列有一张大图片、几张小图片和一个选项卡。右列则是一些商品信息介绍，例如颜色、尺寸和价格等。
详细页主体布局的HTML结构代码如下：
前面我们已经为为商品分类设置了样式，接下来只要为jnProitem和jnDetails设置样式即可，分别为左右两个模块设置float属性和width属性，从而达到布局目的。CSS代码如下：
产品大图和产品缩略图
和前面一样，使用float:left让缩略图以水平方式排列。CSS代码如下：
选项卡
在第5章中，我们已经实现了一个选项卡，所以需要将其样式移植过来即可，CSS代码如下：
颜色，尺寸和评分
这些元素的样式原理都跟前面的差不多，在这里就不再做过多的阐述了，读者可以在源代码中查看相关的CSS代码。
应用样式后，网页呈现如图8-9所示的效果。
图8-9 详细页效果
此时，网站所需的两个页面都已经完成，与之前设计的效果图一致。接下来将用jQuery脚本给网站添加一些交互效果。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论