作者提醒我们,作为一个出色的前端开发者,对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 © 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>价  格:</span>
<strong class="del">379.00</strong>元
</li>
<li class="tbDetailPrice">
<span>促  销:</span>
<strong>200.00</strong>元
</li>
<li class="color_change">
<span>颜  色:</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>尺  寸:</span>
<strong>未选择</strong>
<ul>
<li>S</li>
<li>L</li>
<li>SL</li>
<li>LL</li>
</ul>
</li>
<li>
<span>数  量:</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>总  计:</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 © 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验证一些常见的错误。
这一部分现在和书上的不一样,不赘述,有兴趣的可以自行翻阅。
网站样式(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; //避免页面跳转
});
})