web前端之锋利的jQuery十一：综合开发，编写购物网首页

这章主要介绍如何搭建一个前端网页，文章最后面有完整的代码，前面的主要是说明

第一步：搭建网页结构
购物网站基本上可以分为以下几部分：
头部：相当于网站的品牌，可用于放置Logo和通往各页面的链接
内容：防止页面的主体
底部：放置页面其他链接和版权信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>综合实战，购物网站</title>
</head>
<body><div id="header"></div><div id="content"></div><div id="footer"></div>
</body>
</html>

第二步：网站样式（编写CSS）
设置全局变量：
1.首先使用元素标签将每个元素的margin和padding属性设置为0,。这样做的好处是，可以让页面不受到不同浏览器默认设置的页边距和字边距的影响。
2.设置body元素的字体颜色，字号大小等，这样可以规范整个网站的样式风格。
3.设置其他属性的特定样式
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;
}

因为篇幅有限，下面直接给出源码：
index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>综合实战，购物网站</title>
<link rel="stylesheet" href="styles/reset.css" type="text/css" />
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />
<script src="scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script src="scripts/jquery.cookie.js" type="text/javascript"></script>
<script src="scripts/input.js" type="text/javascript"></script>
<script src="scripts/changeSkin.js" type="text/javascript"></script>
<script src="scripts/nav.js" type="text/javascript"></script>
<script src="scripts/addhot.js" type="text/javascript"></script>
<script src="scripts/ad.js" type="text/javascript"></script>
<script src="scripts/tooltip.js" type="text/javascript"></script>
<script src="scripts/imgSlide.js" type="text/javascript"></script>
<script src="scripts/imgHover.js" type="text/javascript"></script></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>

main.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;
}
#header .logo { float:left; margin:0 0 0 10px; color:#FFF; line-height:80px;
}
#header .search {left:198px;position:absolute;top:20px;
}
#inputSearch {border:1px solid #BABEBF;color:#999999;font-size:14px;height:17px;padding:3px 6px 5px 6px;width:200px;
}
#inputSearch.focus{border:1px solid #00A5FF;
}
/* 切换皮肤控件样式 */
#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; }
/*导航样式开始*/
.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;
}
.mainNav ul li a:hover { background:none;
}
/* 二级菜单 */
.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 .fore {border-top-style:none;padding-top:0;
}
.jnNav .subitem dt {float:left;font-weight:bold;line-height:16px;padding:4px 3px;text-align:center;width:76px;
}
.jnNav .subitem dt a {color:#000;font-weight:700;font-size:12px;padding:0;
}
.jnNav .subitem dd {float:left;overflow:hidden;padding:0;width:364px;
}
.jnNav .subitem em {border-right:1px solid #CCCCCC;float:left;font-style:normal;height:14px;line-height:14px;margin:5px 0;padding:0 8px;
}
.jnNav .subitem em a {color:#666666;white-space:nowrap;font-size:12px;font-weight:normal;padding:0;
}
.jnNav .subitem em.noborder {border-right:0 none;
}
/* 主体样式 */
#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;
}
#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;
}
/* 大屏广告 */
#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;
}
/* 最新动态 */
#jnNotice{float:left;height:321px;overflow:hidden;width:230px;
}
#jnMiaosha {float:left;height:176px;margin-bottom:10px;overflow:hidden;width:230px;
}
.JS_css3 img {-webkit-transition:1s all;-moz-transition:1s all;-o-transition:1s all;transition:1s all;
}
.JS_css3:hover img {-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);transform:rotate(720deg);
}
#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;
}
/* 品牌活动 */
#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;
}
#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;
}
/* 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}
#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;
}/* tooltip */
#tooltip{position:absolute;border:1px solid #333;background:#f7f5d1;padding:1px;color:#333;display:none;
}
/* imgHover */
.imageMask{background-color:#ffffff; filter:alpha(opacity=0);opacity:0; cursor:pointer;
}
.imageOver{background:url(../images/zoom.gif) no-repeat 50% 50%;   filter:alpha(opacity=60);opacity:0.6;
}/* jquery zoom */
.zoomPad{position:relative;float:left;z-index:99;cursor:crosshair;
}
.zoomPreload{-moz-opacity:0.8;opacity:0.8;filter:alpha(opacity = 80);color:#333;font-size:12px;font-family:Tahoma;text-decoration:none;border:1px solid #CCC;background-color:white;padding:8px;text-align:center;background-image:url(../images/zoomloader.gif);background-repeat:no-repeat;background-position:43px 30px;z-index:110;width:90px;height:43px;position:absolute;top:0px;left:0px;* width:100px;* height:49px;
}
.zoomPup{overflow:hidden;background-color:#FFF;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity = 60);z-index:120;position:absolute;border:1px solid #CCC;z-index:101;cursor:crosshair;
}
.zoomOverlay{position:absolute;left:0px;top:0px;background:#FFF;/*opacity:0.5;*/z-index:5000;width:100%;height:100%;display:none;z-index:101;
}
.zoomWindow{position:absolute;left:110%;top:40px;background:#FFF;z-index:6000;height:auto;z-index:10000;z-index:110;
}
.zoomWrapper{position:relative;border:1px solid #999;z-index:110;
}
.zoomWrapperTitle{display:block;background:#999;color:#FFF;height:18px;line-height:18px;width:100%;overflow:hidden;text-align:center;font-size:12px;position:absolute;top:0px;left:0px;z-index:120;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity = 60);
}
.zoomWrapperImage{display:block;position:relative;overflow:hidden;z-index:110;}
.zoomWrapperImage img{border:0px;display:block;position:absolute;z-index:101;
}
.zoomIframe{z-index:-1;filter:alpha(opacity=0);-moz-opacity:0.80;opacity:0.80;position:absolute;display:block;
}

不要忘了最上面的reset.css

skin_0.css - skin_5.css:

skin_0.css :
.mainNav {background-color:#4A4A4A;
}
#jnCatalog h2 {background-color:#6E6E6E;
}
skin_1.css :
.mainNav {background-color:#BE46D8;
}
#jnCatalog h2 {background-color:#D49AE1;
}
skin_2.css :
.mainNav {background-color:#E44072;
}
#jnCatalog h2 {background-color:#F296B2;
}
skin_3.css :
.mainNav {background-color:#37C7D4;
}
#jnCatalog h2 {background-color:#98E0E6;
}
skin_4.css :
.mainNav {background-color:#F9AF2A;
}
#jnCatalog h2 {background-color:#FFCF78;
}
skin_5.css :
.mainNav {background-color:#B1D410;
}
#jnCatalog h2 {background-color:#CDE074;
}

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");
}

addhot.js:

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

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").siblings().removeClass("selected");$("#cssfile").attr("href","styles/skin/"+skinName+".css");//设置不同的皮肤$.cookie("MyCssSkin",skinName,{path:'/',expires:10});}

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");});
})

imgSlide.js:

$(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);
}

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('回车提交表单');}})
})

nav.js:

$(function(){$("#nav li").hover(function(){$(this).find(".jnNav").show();},function(){$(this).find(".jnNav").hide();});
})

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();}).mouseover(function(e){$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});});})

jquery.js和cookie.js因为篇幅有限，读者自行下载。

图片：
logo.gif：

theme.gif：

hot.gif：

headerbg.png：

chos.gif：

adindex.gif：

其余的图片都可以自行寻找

到此为止，我对锋利的jQuery的学习也就告一段落了

web前端之锋利的jQuery十一：综合开发，编写购物网首页相关推荐

web前端期末大作业【仿12306铁路官网首页】学生网页设计作业源码
如何使用jquery_好程序员web前端学习路线分享jQuery学习技巧
好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! ...
JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
移动web前端框架一、jQuery Mobile
简述:jQuery Mobile是 jQuery发布的针对手机和平板设备.经过触控优化的Web框架.它基于jQuery,在不同移动设备平台上可提供统一的用户界面.该框架基于渐近增强技术,并利用HTML ...
hbuilder前端需要的插件_初学Web前端会用到开发工具（附官网下载地址）
目前市面上比较流行的前端开发工具主要有WebStorm.Vscode.Sublime.HBuilder.notepad++.EditPlus.记事本等,今天介绍一下这些开发工具,并且给出了下载地址. ...
基于HTML+CSS+JS制作商城（web前端网页制作课作业）--7古典乐器网 8页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 ...
2020最新web前端开发学习资料,全套源码无加密网盘下载
前言--2020web前端开发最新学习资料完整版,全套源码无加密网盘下载最近小编整理了多套的学习资料(视频+资料+源码),无加密: 两套是某马老师讲解的,讲得挺不错,小编基本学完!还有多个项目实战! ...
Web前端复习-12、jQuery进阶
1.jQuery文档处理 jQuery除了可以操作元素的属性.样式和内容外,还可以对DOM进行复杂的操作: 元素的创建元素的插入元素的删除元素的替换元素的复制 1.1 创建节点根据W3C中的 ...
web前端(5)：了解jQuery(常见选择器+相关尺寸+元素/节点操作)
文章目录一.jQuery是什么二.JQuery的常见选择器三.JQuery的元素操作四.相关尺寸函数五.常用的事件方法 1. 绑定事件的两种方式 2.解除绑定六.节点操作七.经典案例 1 ...

web前端之锋利的jQuery十一：综合开发，编写购物网首页

web前端之锋利的jQuery十一：综合开发，编写购物网首页

web前端之锋利的jQuery十一：综合开发，编写购物网首页相关推荐

最新文章

热门文章