web前端之锋利的jQuery十一:综合开发,编写购物网首页
2016-12-08 15:34
711 查看
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 © 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十:编写jQuery插件
- tp5微信小程序全栈开发 十一——前端框架构建与令牌管理,首页、专题、分类等模块编写
- 编写高质量代码—Web前端开发啊修炼之道(二)
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十四】
- 《编写高质量代码-web前端开发修炼之道》 读书笔记 (转)
- 【读书笔记】编写高质量的代码Web前端开发修炼之道——曹刘阳
- JavaScript & JQuery 交互式Web前端开发
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十四】
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
- <编写高质量代码--web前端开发修炼之道>之css总结
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
- JavaWeb前端开发知识总结(jQuery)
- web前端开发修炼之道--编写高质量代码
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十三】
- Web前端开发(JQuery)
- Web前端开发人员和设计师必读文章【系列十一】
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)
- Sublime text 2编辑器(本次用于backbone+jQuery_Mobile+html5的web前端开发)
- web前端之锋利的jQuery七:jQuery表格应用、其他应用