小白读《锋利的jQuery》第8章（打造个性网站）

作者提醒我们，作为一个出色的前端开发者，对HTML和CSS的理解同样重要，很多时候甚至比JavaScript更重要。

案例背景介绍

购物网站

网站材料

假设已经有了

网站结构

文件结构

images文件夹存放将要用到的图片。
styles文件夹存放CSS样式表。
scripts文件夹存放jQuery脚本。

在这里插入图片描述

网页结构

头部：Logo标志、通往各个页面的链接等。
内容：主体
底部：页面其他链接和版权信息等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo Websize</title>
</head>
<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</body>
</html>

界面设计

使用PhotoShop图形设计工具来完成这项工作。
在这里插入图片描述

网站的（X）HTML

在开始编写CSS之前，应该把整个网站的（X）HTML代码全部写出来，然后把（X）HTML代码放到
http://validator.w3.org/
网站上去验证，看是否符合规范，如果验证成功，我们就可以开始编写网站的CSS样式了。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo Websize</title>
</head>

<body>
    <!--头部开始-->
    <div id="header">
        <div class="contWidth">
            <a class="logo" href="#nogo"><img src="images/logo.gif" alt="JaneShop" /></a>
            <div class="search">
                <input type="text" id="inputSearch" class="" value="请输入商品名称" />
            </div>
            <ul id="skin">
                <li id="skin_0" title="蓝色" class="selected">蓝色</li>
                <li id="skin_1" title="紫色">紫色</li>
                <li id="skin_2" title="红色">红色</li>
                <li id="skin_3" title="天蓝色">天蓝色</li>
                <li id="skin_4" title="橙色">橙色</li>
                <li id="skin_5" title="淡绿色">淡绿色</li>
            </ul>
            <!-- 导航 start -->
            <div id="nav" class="mainNav">
                <ul class="nav">
                    <li><a href="#">首 页</a></li>
                    <li><a href="#">品 牌</a>
                        <div class="jnNav">
                            <div class="subitem">
                                <dl class="fore">
                                    <dt>
                                        <a href="#nogo">品牌：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <a href="#nogo">品牌：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">女 装</a>
                        <div class="jnNav">
                            <div class="subitem">
                                <dl class="fore">
                                    <dt>
                                        <a href="#nogo">女 装：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <a href="#nogo">女 装：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">男 装</a>
                        <div class="jnNav">
                            <div class="subitem">
                                <dl class="fore">
                                    <dt>
                                        <a href="#nogo">男 装：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <a href="#nogo">男 装：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">鞋包配饰</a></li>
                </ul>
            </div>
            <!-- 导航 end -->
        </div>
    </div>
    <!--头部结束-->
    <!--主体开始-->
    <div id="content">
        <div class="janeshop">
            <!-- 商品分类 start -->
            <div id="jnCatalog">
                <h2 title="商品分类">商品分类</h2>
                <div class="jnCatainfo">
                    <h3>推荐品牌</h3>
                    <ul>
                        <li><a href="#nogo">耐克</a></li>
                        <li><a href="#nogo" class="promoted">阿迪达斯</a></li>
                        <li><a href="#nogo">达芙妮</a></li>
                        <li><a href="#nogo">李宁</a></li>
                        <li><a href="#nogo">安踏</a></li>
                        <li><a href="#nogo">奥康</a></li>
                        <li><a href="#nogo" class="promoted">骆驼</a></li>
                        <li><a href="#nogo">特步</a></li>
                    </ul>
                    <br class="clear" />
                    <h3>女装</h3>
                    <ul>
                        <li><a href="#nogo">呢大衣</a></li>
                        <li><a href="#nogo">T恤</a></li>
                        <li><a href="#nogo">羽绒</a></li>
                        <li><a href="#nogo">衬衫</a></li>
                        <li><a href="#nogo">羊绒衫</a></li>
                        <li><a href="#nogo">针织</a></li>
                        <li><a href="#nogo">连衣裙</a></li>
                        <li><a href="#nogo">皮外套</a></li>
                    </ul>
                    <br class="clear" />
                    <h3>男装</h3>
                    <ul>
                        <li><a href="#nogo">衬衫</a></li>
                        <li><a href="#nogo">T恤衫</a></li>
                        <li><a href="#nogo">夹克</a></li>
                        <li><a href="#nogo">大皮衣</a></li>
                        <li><a href="#nogo">风衣</a></li>
                        <li><a href="#nogo">牛仔裤</a></li>
                        <li><a href="#nogo">西服</a></li>
                        <li><a href="#nogo">卫衣</a></li>
                    </ul>
                    <br class="clear" />
                    <h3>鞋包配饰</h3>
                    <ul>
                        <li><a href="#nogo">围巾</a></li>
                        <li><a href="#nogo">旅行箱</a></li>
                        <li><a href="#nogo">真皮包</a></li>
                        <li><a href="#nogo">韩版</a></li>
                        <li><a href="#nogo">达芙妮</a></li>
                        <li><a href="#nogo">单肩包</a></li>
                        <li><a href="#nogo">毛线</a></li>
                        <li><a href="#nogo">清仓靴子</a></li>
                    </ul>
                    <br class="clear" />
                </div>
            </div>
            <!-- 商品分类 end -->

            <!-- 大屏广告 start -->
            <div id="jnImageroll">
                <a href="#nogo" id="JS_imgWrap">
                    <img src="images/ads/1.jpg" alt="相约情人节" />
                    <img src="images/ads/2.jpg" alt="新款上线" />
                    <img src="images/ads/3.jpg" alt="愤怒小鸟特卖" />
                    <img src="images/ads/4.jpg" alt="男鞋促销第一波" />
                    <img src="images/ads/5.jpg" alt="春季新品发布" />
                </a>
                <div>
                    <a href="###1"><em>相约情人节</em><em>全场119元起</em></a>
                    <a href="###2"><em>新款上线</em><em>全场357元起</em></a>
                    <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
                    <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
                    <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
                </div>
            </div>
            <!-- 大屏广告 end -->

            <!-- 最新动态 start -->
            <div id="jnNotice">
                <div id="jnMiaosha">
                    <a href="#nogo" class="JS_css3"><img src="images/upload/20120216.jpg" alt="冬品清仓" /></a>
                </div>
                <div id="jnNoticeInfo">
                    <h2 title="最新动态">最新动态</h2>
                    <ul>
                        <li><a href="###1" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
                        <li><a href="###2" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
                        <li><a href="###3" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
                        <li><a href="###4" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
                        <li><a href="###5" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
                        <li><a href="###6" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
                    </ul>
                    <br class="clear" />
                </div>
            </div>
            <!-- 最新动态 end -->

            <!-- 品牌活动 start -->
            <div id="jnBrand">
                <div id="jnBrandTab">
                    <h2 title="品牌活动">品牌活动</h2>
                    <ul>
                        <li><a title="运动" href="#nogo">运动</a></li>
                        <li><a title="女鞋" href="#nogo">女鞋</a></li>
                        <li><a title="男鞋" href="#nogo">男鞋</a></li>
                        <li><a title="Applife" href="#nogo">童鞋</a></li>
                    </ul>
                </div>
                <div id="jnBrandContent">
                    <div id="jnBrandList">
                        <ul>
                            <li>
                                <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                                <span><a href="###1">耐克</a></span>
                            </li>
                            <li>
                                <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                                <span><a href="###2">阿迪达斯</a></span>
                            </li>
                            <li>
                                <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                                <span><a href="###3">李宁</a></span>
                            </li>
                            <li>
                                <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                                <span><a href="###4">安踏</a></span>
                            </li>
                            <li>
                                <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                                <span><a href="###1">耐克</a></span>
                            </li>
                            <li>
                                <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                                <span><a href="###2">阿迪达斯</a></span>
                            </li>
                            <li>
                                <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                                <span><a href="###3">李宁</a></span>
                            </li>
                            <li>
                                <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                                <span><a href="###4">安踏</a></span>
                            </li>
                            <li>
                                <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                                <span><a href="###1">耐克</a></span>
                            </li>
                            <li>
                                <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                                <span><a href="###2">阿迪达斯</a></span>
                            </li>
                            <li>
                                <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                                <span><a href="###3">李宁</a></span>
                            </li>
                            <li>
                                <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                                <span><a href="###4">安踏</a></span>
                            </li>
                            <li>
                                <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                                <span><a href="###1">耐克</a></span>
                            </li>
                            <li>
                                <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                                <span><a href="###2">阿迪达斯</a></span>
                            </li>
                            <li>
                                <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                                <span><a href="###3">李宁</a></span>
                            </li>
                            <li>
                                <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                                <span><a href="###4">安踏</a></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 品牌活动 end -->

        </div>
    </div>
    <!--主体结束-->
    <!--底部开始-->
    <div id="footer">Copyright &copy; 2009 - 2012 JaneShop Inc. </div>
    <!--底部结束-->
</body>

</html>

在这里插入图片描述

detail.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>detail Websize</title>
</head>

<body>
    <div id="header">
        <div class="contWidth">
            <a class="logo" href="#nogo"><img src="images/logo.gif" alt="JaneShop" /></a>
            <div class="search">
                <input type="text" id="inputSearch" class="" value="请输入商品名称" />
            </div>
            <ul id="skin">
                <li id="skin_0" title="蓝色" class="selected">蓝色</li>
                <li id="skin_1" title="紫色">紫色</li>
                <li id="skin_2" title="红色">红色</li>
                <li id="skin_3" title="天蓝色">天蓝色</li>
                <li id="skin_4" title="橙色">橙色</li>
                <li id="skin_5" title="淡绿色">淡绿色</li>
            </ul>
            <!-- 导航 start -->
            <div id="nav" class="mainNav">
                <ul class="nav">
                    <li><a href="#">首 页</a></li>
                    <li><a href="#">品 牌</a>
                        <div class="jnNav">
                            <div class="subitem">
                                <dl class="fore">
                                    <dt>
                                        <a href="#nogo">品牌：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <a href="#nogo">品牌：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">女 装</a>
                        <div class="jnNav">
                            <div class="subitem">
                                <dl class="fore">
                                    <dt>
                                        <a href="#nogo">女 装：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <a href="#nogo">女 装：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">男 装</a>
                        <div class="jnNav">
                            <div class="subitem">
                                <dl class="fore">
                                    <dt>
                                        <a href="#nogo">男 装：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        <a href="#nogo">男 装：</a>
                                    </dt>
                                    <dd>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em><a href="#nogo">安踏</a></em>
                                        <em><a href="#nogo">奥康</a></em>
                                        <em><a href="#nogo">骆驼</a></em>
                                        <em><a href="#nogo">特步</a></em>
                                        <em><a href="#nogo">耐克</a></em>
                                        <em><a href="#nogo">阿迪达斯</a></em>
                                        <em><a href="#nogo">达芙妮</a></em>
                                        <em><a href="#nogo">李宁</a></em>
                                        <em class="noborder"><a href="#nogo">特步</a></em>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">鞋包配饰</a></li>
                </ul>
            </div>
            <!-- 导航 end -->
        </div>
    </div>
    <!--头部结束-->
    <!--主体开始-->
    <div id="content">
        <div class="janeshop">
            <!-- 商品分类 start -->
            <div id="jnCatalog">
                <h2 title="商品分类">商品分类</h2>
                <div class="jnCatainfo">
                    <h3>推荐品牌</h3>
                    <ul>
                        <li><a href="#nogo">耐克</a></li>
                        <li><a href="#nogo" class="promoted">阿迪达斯</a></li>
                        <li><a href="#nogo">达芙妮</a></li>
                        <li><a href="#nogo">李宁</a></li>
                        <li><a href="#nogo">安踏</a></li>
                        <li><a href="#nogo">奥康</a></li>
                        <li><a href="#nogo" class="promoted">骆驼</a></li>
                        <li><a href="#nogo">特步</a></li>
                    </ul>
                    <br class="clear" />
                    <h3>女装</h3>
                    <ul>
                        <li><a href="#nogo">呢大衣</a></li>
                        <li><a href="#nogo">T恤</a></li>
                        <li><a href="#nogo">羽绒</a></li>
                        <li><a href="#nogo">衬衫</a></li>
                        <li><a href="#nogo">羊绒衫</a></li>
                        <li><a href="#nogo">针织</a></li>
                        <li><a href="#nogo">连衣裙</a></li>
                        <li><a href="#nogo">皮外套</a></li>
                    </ul>
                    <br class="clear" />
                    <h3>男装</h3>
                    <ul>
                        <li><a href="#nogo">衬衫</a></li>
                        <li><a href="#nogo">T恤衫</a></li>
                        <li><a href="#nogo">夹克</a></li>
                        <li><a href="#nogo">大皮衣</a></li>
                        <li><a href="#nogo">风衣</a></li>
                        <li><a href="#nogo">牛仔裤</a></li>
                        <li><a href="#nogo">西服</a></li>
                        <li><a href="#nogo">卫衣</a></li>
                    </ul>
                    <br class="clear" />
                    <h3>鞋包配饰</h3>
                    <ul>
                        <li><a href="#nogo">围巾</a></li>
                        <li><a href="#nogo">旅行箱</a></li>
                        <li><a href="#nogo">真皮包</a></li>
                        <li><a href="#nogo">韩版</a></li>
                        <li><a href="#nogo">达芙妮</a></li>
                        <li><a href="#nogo">单肩包</a></li>
                        <li><a href="#nogo">毛线</a></li>
                        <li><a href="#nogo">清仓靴子</a></li>
                    </ul>
                    <br class="clear" />
                </div>
            </div>
            <!-- 商品分类 end -->

            <!-- 商品信息 start -->
            <div id="jnProitem">
                <div class="jqzoomWrap">
                    <a href="images/pro_img/blue_one_big.jpg" class="jqzoom" rel='gal1' title="免烫高支棉条纹衬衣">
                        <img src="images/pro_img/blue_one_small.jpg" title="免烫高支棉条纹衬衣" alt="免烫高支棉条纹衬衣" id="bigImg" />
                    </a>
                </div>
                <span>
                    <a title="介绍文字" id="thickImg" href="images/pro_img/blue_one_big.jpg" class="thickbox">
                        <img src="images/look.gif" alt="点击看大图" />
                    </a>
                </span>
                <ul class="imgList">
                    <li class="imgList_blue"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_one_small.jpg',largeimage: 'images/pro_img/blue_one_big.jpg'}"><img
                                src='images/pro_img/blue_one.jpg' alt="" /></a></li>
                    <li class="imgList_blue"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_two_small.jpg',largeimage: 'images/pro_img/blue_two_big.jpg'}"><img
                                src='images/pro_img/blue_two.jpg' alt="" /></a></li>
                    <li class="imgList_blue"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_three_small.jpg',largeimage: 'images/pro_img/blue_three_big.jpg'}"><img
                                src='images/pro_img/blue_three.jpg' alt="" /></a></li>

                    <li class="imgList_green hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/green_one_small.jpg',largeimage: 'images/pro_img/green_one_big.jpg'}"><img
                                src='images/pro_img/green_one.jpg' alt="" /></a></li>
                    <li class="imgList_green hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/green_two_small.jpg',largeimage: 'images/pro_img/green_two_big.jpg'}"><img
                                src='images/pro_img/green_two.jpg' alt="" /></a></li>

                    <li class="imgList_yellow hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/yellow_one_small.jpg',largeimage: 'images/pro_img/yellow_one_big.jpg'}"><img
                                src='images/pro_img/yellow_one.jpg' alt="" /></a></li>
                    <li class="imgList_yellow hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/yellow_two_small.jpg',largeimage: 'images/pro_img/yellow_two_big.jpg'}"><img
                                src='images/pro_img/yellow_two.jpg' alt="" /></a></li>
                    <li class="imgList_yellow hide"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/yellow_three_small.jpg',largeimage: 'images/pro_img/yellow_three_big.jpg'}"><img
                                src='images/pro_img/yellow_three.jpg' alt="" /></a></li>

                </ul>
                <div class="tab">
                    <div class="tab_menu">
                        <ul>
                            <li class="selected">产品属性</li>
                            <li>产品尺码表</li>
                            <li>产品介绍</li>
                        </ul>
                    </div>
                    <div class="tab_box">
                        <div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。
                        </div>
                        <div class="hide">
                            来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，曲摆的现代人性化裁减，相得益彰，浑然天成。
                        </div>
                        <div class="hide">
                            世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品信息 end -->

            <!-- 商品列表 start -->
            <div id="jnDetails">
                <div class="jnProDetail">
                    <h4>免烫高支棉条纹衬衣</h4>
                    <ul class="jnProDetailList">
                        <li>全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少；
                            80-100高支双股经纬交织，带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持！
                        </li>
                        <li>
                            <span>价&#12288;&#12288;格：</span>
                            <strong class="del">379.00</strong>元
                        </li>
                        <li class="tbDetailPrice">
                            <span>促&#12288;&#12288;销：</span>
                            <strong>200.00</strong>元
                        </li>
                        <li class="color_change">
                            <span>颜&#12288;&#12288;色：</span>
                            <strong>蓝白</strong>
                            <ul>
                                <li><img alt="蓝白" src="images/pro_img/blue.jpg" /></li>
                                <li><img alt="黄白" src="images/pro_img/yellow.jpg" /></li>
                                <li><img alt="粉绿" src="images/pro_img/green.jpg" /></li>
                            </ul>
                        </li>
                        <li class="pro_size">
                            <span>尺&#12288;&#12288;寸：</span>
                            <strong>未选择</strong>
                            <ul>
                                <li>S</li>
                                <li>L</li>
                                <li>SL</li>
                                <li>LL</li>
                            </ul>
                        </li>
                        <li>
                            <span>数&#12288;&#12288;量：</span>
                            <div class="pro_num">
                                <select id="num_sort">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                        </li>
                        <li class="pro_price">
                            <span>总&#12288;&#12288;计：</span>
                            <strong>200</strong>元
                        </li>
                    </ul>
                    <div class="pro_rating">
                        给商品评分：
                        <ul class="rating nostar">
                            <li class="one"><a title="1分" href="#">1</a></li>
                            <li class="two"><a title="2分" href="#">2</a></li>
                            <li class="three"><a title="3分" href="#">3</a></li>
                            <li class="four"><a title="4分" href="#">4</a></li>
                            <li class="five"><a title="5分" href="#">5</a></li>
                        </ul>
                    </div>
                    <div id="cart">
                        <a href="#"><img src="images/btn_cart.png" alt="放入购物车" /></a>
                    </div>
                </div>
            </div>
            <!-- 商品列表 end -->
        </div>
    </div>
    <!--主体结束-->
    <div id="footer">Copyright &copy; 2009 - 2012 JaneShop Inc. </div>


    <!-- 普通弹出层 [[ -->
    <div id="basic-dialog-ok">
        <div class="box-title show">
            <h2>提示</h2>
        </div>
        <div class="box-main">
            <div class="tips">
                <span class="tips-ico">
                    <span class="ico-ok">
                        <!-- 图标 --></span>
                </span>
                <div class="tips-content">
                    <div class="tips-title" id="jnDialogContent"></div>
                    <div class="tips-line"></div>
                </div>
            </div>
            <div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>
        </div>
    </div>
    <!-- 普通弹出层 ]] -->
</body>

</html>

在这里插入图片描述

（X）HTML验证一些常见的错误。

这一部分现在和书上的不一样，不赘述，有兴趣的可以自行翻阅。

扫描二维码关注公众号，回复： 5345620 查看本文章

网站样式（CSS）

将CSS文件分门别类

把所有CSS代码都写在一个文件夹里，需要的在head标签内部插入一个link标签。

编写CSS

作者推荐先编写全局样式，然后编写可大范围内重用的样式，最后编写细节方面的样式。

优点：根据CSS的最近优先原则，可以很容易地对网站进行从整体到细节样式的定义。

1.编写全局样式

reset.css

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0;
}

body,
button,
input,
select,
textarea {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}

address,
cite,
dfn,
em,
var {
    font-style: normal;
}

code,
kbd,
pre,
samp {
    font-family: courier new, courier, monospace;
}

small {
    font-size: 12px;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

legend {
    color: #000;
}

fieldset,
img {
    border: 0;
}

button,
input,
select,
textarea {
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clear {
    clear: both;
    float: none;
    height: 0;
    overflow: hidden;
}

html .hide {
    display: none;
}

（1）每个元素的margin和padding属性设置为零。
（2）设置body元素的字体颜色，字号大小等，规范整个网站的样式风格。
（3）设置其他元素的特定样式。

2.编写重用的样式

两个页面有相同头部和商品推荐部分，可以重用。

头部基本CSS

/*头部样式开始*/
#header {
    background: url("../images/headerbg.png") repeat-x scroll 0 0 #FFFFFF;
    height: 105px;
}

#header .contWidth {
    position: relative;
    height: 105px;
    margin: 0 auto;
    width: 990px;
    z-index: 100;
}

四部分：

Logo

#header .logo {
    float: left;
    margin: 0 0 0 10px;
    color: #FFF;
    line-height: 80px;
}

搜索框

#header .search {
    left: 198px;
    position: absolute;
    top: 20px;
}

皮肤切换

/* 切换皮肤控件样式 */
#skin {
    float: right;
    margin: 10px;
    padding: 4px;
    width: 120px;
}

#skin li {
    float: left;
    margin-right: 4px;
    width: 15px;
    height: 15px;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    cursor: pointer;
    background-image: url("../images/theme.gif");
}

#skin_0 {
    background-position: 0px 0px;
}

#skin_1 {
    background-position: 15px 0px;
}

#skin_2 {
    background-position: 35px 0px;
}

#skin_3 {
    background-position: 55px 0px;
}

#skin_4 {
    background-position: 75px 0px;
}

#skin_5 {
    background-position: 95px 0px;
}

#skin_0.selected {
    background-position: 0px 15px;
}

#skin_1.selected {
    background-position: 15px 15px;
}

#skin_2.selected {
    background-position: 35px 15px;
}

#skin_3.selected {
    background-position: 55px 15px;
}

#skin_4.selected {
    background-position: 75px 15px;
}

#skin_5.selected {
    background-position: 95px 15px;
}

"text-indent:-9999px; " 语句使文字显示到看不到的区域，然后给li元素添加背景图片。

导航菜单

采用绝对定位方式使它显示在规定的位置。

/*导航样式开始*/
.mainNav {
    position: absolute;
    top: 68px;
    left: 0;
    height: 37px;
    line-height: 37px;
    width: 990px;
    z-index: 100;
    background-color: #4A4A4A;
}

.mainNav .nav {
    display: inline;
    float: left;
    margin-left: 25px;
}

.mainNav ul li {
    float: left;
    display: inline;
    margin-right: 14px;
    position: relative;
    z-index: 100;
}

.mainNav ul li a {
    display: block;
    padding: 0 8px;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
}

二级菜单

/* 二级菜单 */
.jnNav {
    background: #FFFFFF;
    border: 1px solid #B1B1B1;
    border-top: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 37px;
    width: 474px;
    z-index: 1000;
    display: none;
}

.jnNav .subitem {
    float: left;
    height: auto !important;
    min-height: 100px;
    padding: 10px 12px;
    width: 450px;
}

.jnNav .subitem dl {
    border-top: 1px dashed #C4C4C4;
    overflow: hidden;
    padding: 8px 0;
    float: left;
}

.jnNav .subitem dt {
    float: left;
    font-weight: bold;
    line-height: 16px;
    padding: 4px 3px;
    text-align: center;
    width: 76px;
}

.jnNav .subitem dd {
    float: left;
    overflow: hidden;
    padding: 0;
    width: 364px;
}

在这里插入图片描述
3.编写主体内容样式

（1）index.html主体布局

/* 主体样式 */
#content {
    clear: left;
    margin: 0 auto;
    position: relative;
    width: 990px;
}

.janeshop {
    height: 560px;
    overflow: hidden;
    padding: 10px 0;
}

/* 商品分类 */
#jnCatalog {
    float: left;
    height: 560px;
    margin: 0 11px 0 0;
    overflow: hidden;
    width: 187px;
}

/* 大屏广告 */
#jnImageroll {
    float: left;
    height: 320px;
    margin: 0 11px 0 0;
    overflow: hidden;
    position: relative;
    width: 550px;
}

/* 最新动态 */
#jnNotice {
    float: left;
    height: 321px;
    overflow: hidden;
    width: 230px;
}

/* 品牌活动 */
#jnBrand {
    float: left;
    height: 230px;
    margin: 10px 0 0;
    overflow: hidden;
    width: 790px;
}

往主体结构里面放置HTML代码来充实网页。

/* 商品分类 */
#jnCatalog {
    float: left;
    height: 560px;
    margin: 0 11px 0 0;
    overflow: hidden;
    width: 187px;
}

#jnCatalog h2 {
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    text-indent: 13px;
    background-color: #6E6E6E;
}

.jnCatainfo {
    border: 1px solid #6E6E6E;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    height: 524px;
    overflow: hidden;
    padding: 5px 10px 0;
    width: 165px;
}

.jnCatainfo h3 {
    border-bottom: 1px solid #EEEEEE;
    height: 24px;
    line-height: 24px;
    width: 164px;
}

.jnCatainfo ul {
    float: left;
    padding: 0 2px 8px;
}

.jnCatainfo li {
    color: #AEADAE;
    float: left;
    height: 24px;
    line-height: 24px;
    width: 79px;
    overflow: hidden;
    position: relative;
}

.jnCatainfo li a {
    color: #444444;
}

.jnCatainfo li a:hover {
    color: #008CD7;
    text-decoration: none;
}

.jnCatainfo li a.promoted {
    color: #F9044E;
}

.jnCatainfo li .hot {
    background: url("../images/hot.gif") no-repeat scroll 0 0 transparent;
    height: 16px;
    position: absolute;
    top: 0;
    width: 21px;
}

右侧布局分上下两部分

（1）大屏部分

/* 大屏广告 */
#jnImageroll {
    float: left;
    height: 320px;
    margin: 0 11px 0 0;
    overflow: hidden;
    position: relative;
    width: 550px;
}

#jnImageroll img {
    position: absolute;
    left: 0;
    top: 0;
}

#jnImageroll div {
    bottom: 0;
    overflow: hidden;
    position: absolute;
    float: left;
}

#jnImageroll div a {
    background-color: #444444;
    color: #FFFFFF;
    display: inline-block;
    float: left;
    height: 32px;
    margin-right: 1px;
    overflow: hidden;
    padding: 5px 15px;
    text-align: center;
    width: 79px;
}

#jnImageroll div a:hover {
    text-decoration: none;
}

#jnImageroll div a em {
    cursor: pointer;
    display: block;
    height: 16px;
    overflow: hidden;
    width: 79px;
}

#jnImageroll .last {
    margin: 0;
    width: 80px;
}

#jnImageroll a.chos {
    background: url("../images/adindex.gif") no-repeat center 39px #37A7D7;
    color: #FFFFFF;
}

（2）最新动态

/* 最新动态 */
#jnNotice {
    float: left;
    height: 321px;
    overflow: hidden;
    width: 230px;
}

#jnMiaosha {
    float: left;
    height: 176px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 230px;
}

#jnNoticeInfo {
    float: left;
    border: 1px solid #DFDFDF;
    height: 133px;
    overflow: hidden;
    width: 228px;
}

#jnNoticeInfo h2 {
    height: 23px;
    line-height: 23px;
    border-bottom: 1px solid #DFDFDF;
    text-indent: 12px;
}

#jnNoticeInfo ul {
    float: left;
    padding: 6px 2px 0 12px;
}

#jnNoticeInfo li {
    height: 20px;
    line-height: 20px;
    overflow: hidden;
}

#jnNoticeInfo li a {
    color: #666666;
}

#jnNoticeInfo li a:hover {
    color: #008CD7;
    text-decoration: none;
}

下半部分

（1）jnBrandTab

/* 品牌活动 */
#jnBrand {
    float: left;
    height: 230px;
    margin: 10px 0 0;
    overflow: hidden;
    width: 790px;
}

#jnBrandTab {
    border-bottom: 1px solid #E4E4E4;
    height: 29px;
    position: relative;
    width: 790px;
    float: left;
}

#jnBrandTab h2 {
    height: 29px;
    line-height: 29px;
    left: 0;
    position: absolute;
    width: 100px;
}

#jnBrandTab ul {
    position: absolute;
    right: 0;
    top: 10px;
}

#jnBrandTab li {
    float: left;
    margin: 0 10px 0 0;
}

#jnBrandTab li a {
    background-color: #E4E4E4;
    color: #000000;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
}

#jnBrandTab .chos {
    background: url("../images/chos.gif") no-repeat scroll 50% bottom transparent;
    padding-bottom: 3px;
}

#jnBrandTab .chos a {
    background-color: #FA5889;
    color: #FFFFFF;
    outline: 0 none;
}

（2）jnBrandContent

#jnBrandContent {
    float: left;
    height: 188px;
    overflow: hidden;
    margin: 8px 5px;
    width: 790px;
    position: relative;
}

#jnBrandList {
    position: absolute;
    left: 0;
    top: 0;
    width: 3200px;
}

#jnBrandContent li {
    float: left;
    height: 188px;
    overflow: hidden;
    padding: 0 5px;
    position: relative;
    width: 185px;
}

#jnBrandContent li img {
    left: 5px;
    position: absolute;
    top: 0;
}

#jnBrandContent li span {
    background-color: #EFEFEF;
    bottom: 0;
    color: #666666;
    display: inline-block;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    width: 183px;
}

#jnBrandContent li a {
    color: #666666;
}

#jnBrandContent li a:hover {
    color: #008CD7;
    text-decoration: none;
}

在这里插入图片描述
detail.html主体布局的CSS

（1）jnProitem

产品大图和产品缩略图

/* details.html */
#jnProitem {
    float: left;
    width: 312px;
    height: 560px;
    display: inline;
}

#jnProitem .jqzoomWrap {
    border: 1px solid #BBBBBB;
    cursor: pointer;
    float: left;
    padding: 0;
    position: relative;
}

#jnProitem span {
    clear: both;
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 320px;
}

#jnProitem ul.imgList {
    height: 80px;
}

#jnProitem ul.imgList li {
    float: left;
    margin-right: 10px;
}

#jnProitem ul.imgList li img {
    width: 60px;
    height: 60px;
    padding: 1px;
    background: #EEE;
    cursor: pointer;
}

#jnProitem ul.imgList li img:hover {
    padding: 1px;
    background: #999;
}

选项卡

.tab {
    clear: both;
    float: left;
    height: 230px;
    overflow: hidden;
    width: 310px;
}

.tab .tab_menu {
    clear: both;
}

.tab .tab_menu li {
    float: left;
    text-align: center;
    cursor: pointer;
    list-style: none;
    padding: 1px 6px;
    margin-right: 4px;
    background: #F1F1F1;
    border: 1px solid #898989;
    border-bottom: none;
}

.tab .tab_menu li.hover {
    background: #DFDFDF;
}

.tab .tab_menu li.selected {
    color: #FFF;
    background: #6D84B4;
}

.tab .tab_box {
    clear: both;
    border: 1px solid #898989;
}

.tab .hide {
    display: none
}

（2）jnDetails

颜色、尺寸和评分

#jnDetails {
    float: left;
    display: inline;
    overflow: hidden;
    width: 468px;
}

#jnDetails .jnProDetail {
    padding: 0 10px 10px 10px;
}

#jnDetails .jnProDetailList li {
    line-height: 25px;
    float: left;
    width: 100%;
}

#jnDetails .jnProDetailList strong.del {
    color: #404040;
    font-size: 12px;
    position: static;
    text-decoration: line-through;
}

#jnDetails .jnProDetailList strong {
    font-weight: 400;
}

#jnDetails .jnProDetailList .tbDetailPrice strong {
    font-weight: 700;
    color: #FF5500;
    font: 24px Tahoma, Arial, Helvetica, sans-serif;
    padding-right: 5px;
    vertical-align: middle;
}

#jnDetails .jnProDetailList .color_change li,
#jnDetails .jnProDetailList .pro_size li {
    float: left;
    margin-right: 10px;
    width: 40px;
}

#jnDetails .jnProDetailList .color_change img {
    width: 30px;
    height: 30px;
    padding: 1px;
    background: #EEE;
    border: 1px solid #BBB;
    cursor: pointer;
}

#jnDetails .jnProDetailList .color_change img:hover,
#jnDetails .jnProDetailList .color_change img.hover {
    border: 1px solid #f60;
}

#jnDetails .jnProDetailList .pro_size li {
    display: block;
    margin-right: 6px;
    border: 1px solid #AAA;
    cursor: pointer;
    width: 30px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-align: center;
}

#jnDetails .jnProDetailList .pro_size li.cur {
    border: 1px solid #AAA;
    background-color: #f60;
}

/* rating css */
.rating {
    overflow: hidden;
    width: 80px;
    height: 16px;
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
    clear: both;
    position: relative;
    background: url(../images/star-matrix.gif) no-repeat 0 0;
}

.nostar {
    background-position: 0 0
}

.onestar {
    background-position: 0 -16px
}

.twostar {
    background-position: 0 -32px
}

.threestar {
    background-position: 0 -48px
}

.fourstar {
    background-position: 0 -64px
}

.fivestar {
    background-position: 0 -80px
}

ul.rating li {
    cursor: pointer;
    float: left;
    text-indent: -999em;
}

ul.rating li a {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    text-decoration: none;
    z-index: 200;
}

ul.rating li.one a {
    left: 0
}

ul.rating li.two a {
    left: 16px;
}

ul.rating li.three a {
    left: 32px;
}

ul.rating li.four a {
    left: 48px;
}

ul.rating li.five a {
    left: 64px;
}

ul.rating li a:hover {
    z-index: 2;
    width: 80px;
    height: 16px;
    overflow: hidden;
    left: 0;
    background: url(../images/star-matrix.gif) no-repeat 0 0
}

ul.rating li.one a:hover {
    background-position: 0 -96px;
}

ul.rating li.two a:hover {
    background-position: 0 -112px;
}

ul.rating li.three a:hover {
    background-position: 0 -128px
}

ul.rating li.four a:hover {
    background-position: 0 -144px
}

ul.rating li.five a:hover {
    background-position: 0 -160px
}

/* footer */
#footer {
    margin: 0 auto;
    width: 990px;
    color: #666666;
    padding: 18px 0;
    text-align: center;
}

网站脚本（jQuery）

准备工作

开始编写jQuery代码之前，先确定应该完成哪些功能。

首页上的功能

搜索框文字效果（input.js）

/* 搜索文本框效果 */
$(function () {
	$("#inputSearch").focus(function () {
		$(this).addClass("focus");
		if ($(this).val() == this.defaultValue) {
			$(this).val("");
		}
	}).blur(function () {
		$(this).removeClass("focus");
		if ($(this).val() == '') {
			$(this).val(this.defaultValue);
		}
	}).keyup(function (e) {
		if (e.which == 13) {
			alert('回车提交表单!');
		}
	})
})

网页换肤（changeSkin.js）

//网站换肤
$(function () {
	var $li = $("#skin li");
	$li.click(function () {
		switchSkin(this.id);
	});
	var cookie_skin = $.cookie("MyCssSkin");
	if (cookie_skin) {
		switchSkin(cookie_skin);
	}
});

function switchSkin(skinName) {
	$("#" + skinName).addClass("selected") //当前<li>元素选中
		.siblings().removeClass("selected"); //去掉其他同辈<li>元素的选中
	$("#cssfile").attr("href", "styles/skin/" + skinName + ".css"); //设置不同皮肤
	$.cookie("MyCssSkin", skinName, {
		path: '/',
		expires: 10
	});
}

导航效果（nav.js）

//导航效果
$(function () {
	$("#nav li").hover(function () {
		$(this).find(".jnNav").show();
	}, function () {
		$(this).find(".jnNav").hide();
	});
})

左侧商品分类热销效果（addhot.js）

/* 添加hot显示 */
$(function () {
	$(".jnCatainfo .promoted").append('<s class="hot"></s>');
})

右侧上部产品广告效果（ad.js）

/* 首页大屏广告效果 */
$(function () {
	var $imgrolls = $("#jnImageroll div a");
	$imgrolls.css("opacity", "0.7");
	var len = $imgrolls.length;
	var index = 0;
	var adTimer = null;
	$imgrolls.mouseover(function () {
		index = $imgrolls.index(this);
		showImg(index);
	}).eq(0).mouseover();
	//滑入 停止动画，滑出开始动画.
	$('#jnImageroll').hover(function () {
		if (adTimer) {
			clearInterval(adTimer);
		}
	}, function () {
		adTimer = setInterval(function () {
			showImg(index);
			index++;
			if (index == len) {
				index = 0;
			}
		}, 5000);
	}).trigger("mouseleave");
})
//显示不同的幻灯片
function showImg(index) {
	var $rollobj = $("#jnImageroll");
	var $rolllist = $rollobj.find("div a");
	var newhref = $rolllist.eq(index).attr("href");
	$("#JS_imgWrap").attr("href", newhref)
		.find("img").eq(index).stop(true, true).fadeIn().siblings().fadeOut();
	$rolllist.removeClass("chos").css("opacity", "0.7")
		.eq(index).addClass("chos").css("opacity", "1");
}

右侧最新动态模块内容添加超链接提示（tooltip.js）

/* 超链接文字提示 */
$(function () {
	var x = 10;
	var y = 20;
	$("a.tooltip").mouseover(function (e) {
		this.myTitle = this.title;
		this.title = "";
		var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建 div 元素
		$("body").append(tooltip); //把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY + y) + "px",
				"left": (e.pageX + x) + "px"
			}).show("fast"); //设置x坐标和y坐标，并且显示
	}).mouseout(function () {
		this.title = this.myTitle;
		$("#tooltip").remove(); //移除 
	}).mousemove(function (e) {
		$("#tooltip")
			.css({
				"top": (e.pageY + y) + "px",
				"left": (e.pageX + x) + "px"
			});
	});
})

右侧下部品牌活动横向滚动效果（imgSlide.hs）

/* 品牌活动模块横向滚动 */
$(function () {
	$("#jnBrandTab li a").click(function () {
		$(this).parent().addClass("chos").siblings().removeClass("chos");
		var idx = $("#jnBrandTab li a").index(this);
		showBrandList(idx);
		return false;
	}).eq(0).click();
});
//显示不同的模块
function showBrandList(index) {
	var $rollobj = $("#jnBrandList");
	var rollWidth = $rollobj.find("li").outerWidth();
	rollWidth = rollWidth * 4; //一个版面的宽度
	$rollobj.stop(true, false).animate({
		left: -rollWidth * index
	}, 1000);
}

右侧下部光标滑过产品列表效果（imgHover.js）

/* 滑过图片出现放大镜效果 */
$(function () {
	$("#jnBrandList li").each(function (index) {
		var $img = $(this).find("img");
		var img_w = $img.width();
		var img_h = $img.height();
		var spanHtml = '<span style="position:absolute;top:0;left:5px;width:' + img_w + 'px;height:' + img_h + 'px;" class="imageMask"></span>';
		$(spanHtml).appendTo(this);
	})
	$("#jnBrandList").delegate(".imageMask", "hover", function () {
		$(this).toggleClass("imageOver");
	});

	/*
	$("#jnBrandList").find(".imageMask").live("hover", function(){
		$(this).toggleClass("imageOver");
	});
	*/
})

详细页上的功能

产品图片放大镜效果（jquery.zoom.js + use_jqzoom.js）

/*使用jqzoom*/
$(function () {
	$('.jqzoom').jqzoom({
		zoomType: 'standard',
		lens: true,
		preloadImages: false,
		alwaysOn: false,
		zoomWidth: 340,
		zoomHeight: 340,
		xOffset: 10,
		yOffset: 0,
		position: 'right'
	});
});

产品图片遮罩层效果（jquery.thickbox.js）

<a title="介绍文字" id="thickImg" href="images/pro_img/blue_one_big.jpg" class="thickbox">
    <img src="images/look.gif" alt="点击看大图" />
</a>

添加class=“thickbox” title="介绍文字"即可。

单击产品小图片切换大图（switchimg.js）

<li class="imgList_blue"><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/pro_img/blue_one_small.jpg',largeimage: 'images/pro_img/blue_one_big.jpg'}"><img
	src='images/pro_img/blue_one.jpg' alt="" /></a></li>

产品属性介绍之类的选项卡（tab.js）

/*Tab 选项卡 标签*/
$(function () {
	var $div_li = $("div.tab_menu ul li");
	$div_li.click(function () {
		$(this).addClass("selected") //当前<li>元素高亮
			.siblings().removeClass("selected"); //去掉其他同辈<li>元素的高亮
		var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
		$("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
			.eq(index).show() //显示 <li>元素对应的<div>元素
			.siblings().hide(); //隐藏其他几个同辈的<div>元素
	}).hover(function () {
		$(this).addClass("hover");
	}, function () {
		$(this).removeClass("hover");
	})
})

右侧产品颜色切换（switchColor.js）

/*衣服颜色切换*/
$(function () {
	$(".color_change ul li img").click(function () {
		$(this).addClass("hover").parent().siblings().find("img").removeClass("hover");
		var imgSrc = $(this).attr("src");
		var i = imgSrc.lastIndexOf(".");
		var unit = imgSrc.substring(i);
		imgSrc = imgSrc.substring(0, i);
		var imgSrc_small = imgSrc + "_one_small" + unit;
		var imgSrc_big = imgSrc + "_one_big" + unit;
		$("#bigImg").attr({
			"src": imgSrc_small
		});
		$("#thickImg").attr("href", imgSrc_big);
		var alt = $(this).attr("alt");
		$(".color_change strong").text(alt);
		var newImgSrc = imgSrc.replace("images/pro_img/", "");
		$("#jnProitem .imgList li").hide();
		$("#jnProitem .imgList").find(".imgList_" + newImgSrc).show();
		//解决问题：切换颜色后，放大图片还是显示原来的图片。
		$("#jnProitem .imgList").find(".imgList_" + newImgSrc).eq(0).find("a").click();
	});
});

右侧产品尺寸切换（sizeAndprice.js）

/*衣服尺寸选择*/
$(function () {
	$(".pro_size li").click(function () {
		$(this).addClass("cur").siblings().removeClass("cur");
		$(this).parents("ul").siblings("strong").text($(this).text());
	})
})
/*数量和价格联动*/
$(function () {
	var $span = $(".pro_price strong");
	var price = $span.text();
	$("#num_sort").change(function () {
		var num = $(this).val();
		var amount = num * price;
		$span.text(amount);
	}).change();
})

右侧产品数量和价格联动（sizeAndprice.js）

/*衣服尺寸选择*/
$(function () {
	$(".pro_size li").click(function () {
		$(this).addClass("cur").siblings().removeClass("cur");
		$(this).parents("ul").siblings("strong").text($(this).text());
	})
})
/*数量和价格联动*/
$(function () {
	var $span = $(".pro_price strong");
	var price = $span.text();
	$("#num_sort").change(function () {
		var num = $(this).val();
		var amount = num * price;
		$span.text(amount);
	}).change();
})

右侧给产品评分的效果（star.js）

/*商品评分效果*/
$(function () {
	//通过修改样式来显示不同的星级
	$("ul.rating li a").click(function () {
		var title = $(this).attr("title");
		alert("您给此商品的评分是：" + title);
		var cl = $(this).parent().attr("class");
		$(this).parent().parent().removeClass().addClass("rating " + cl + "star");
		$(this).blur(); //去掉超链接的虚线框
		return false;
	})
})

右侧放入购物车（finish.js）

/*最终购买输出*/
$(function () {
	var $product = $(".jnProDetail");
	$("#cart a").click(function (e) {
		var pro_name = $product.find("h4:first").text();
		var pro_size = $product.find(".pro_size strong").text();
		var pro_color = $(".color_change strong").text();
		var pro_num = $product.find("#num_sort").val();
		var pro_price = $product.find(".pro_price strong").text();
		var dialog = "感谢您的购买。<div style='font-size:12px;font-weight:400;'>您购买的产品是：" + pro_name + "；" +
			"尺寸是：" + pro_size + "；" +
			"颜色是：" + pro_color + "；" +
			"数量是：" + pro_num + "；" +
			"总价是：" + pro_price + "元。</div>";
		$("#jnDialogContent").html(dialog);
		$('#basic-dialog-ok').modal();
		return false; //避免页面跳转
	});
})