慕课网——手把手教你实现一个电商网站（源码分享）
1.首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<link rel="stylesheet" type="text/css" href="../css/gongyong.css"/>
<script type="text/javascript" src="../js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript" src="../js/ie6Fixpng.js"></script>
<script type="text/javascript" src="../js/dhl.js"></script>
</head>
<body>
<div class="headerbar">
<div class="topbar">
<div class="comwidth">
<div id="leftcont">
<a href="" class="collection">收藏慕课</a></div>
<div id="rightcont">
<span>
欢迎来到慕课网！</span>
<a href="">[登录]</a>
<a href="">[免费注册]</a>
</div>
</div>
</div>
<div class="logobar">
<div class="comwidth">
<div class="logo fl">
<a href=""><img src="../img/logo.png" alt="慕课网"/></a>
</div>
<div class="search fl">
<input type="search" name="search_text" id="input_search" value="" />
<input type="button" name="search_btn" id="input_btn" value="搜 索" />
</div>
<div class="shopbar fr">
<span class="shoptext fl">
<a href="">购物车</a></span>
<span class="shopnum fl">100</span>
</div>
</div>
</div>
<div class="navbar">
<div class="comwidth">
<div class="shopclass fl">
<h3>全部商品分类</h3>
<div class="shopclass_show" id="main1">
<ul class="block">
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item ">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item shopclass_active" onMouseover="Navbar()" onMouseOut="Navnone()">
<dt><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan" id="hyj" > 合约机
</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
<div class="shopclass_list1" id="mulu">
<div class="shoplist_cont" >
<dl class="shoplist_item1">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item1">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item1">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
</dd>
</dl>
<dl class="shoplist_item1">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item1">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item1">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<div class="shoplist_links">
<a href="">电脑整机频道<span> </span></a>
<a href="">电脑整机频道<span> </span></a>
</div>
</div>
</div>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
</ul>
</div>
<div class="shopclass_list hide">
<div class="shoplist_cont" >
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
</dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<div class="shoplist_links">
<a href="">电脑整机频道<span> </span></a>
<a href="">电脑整机频道<span> </span></a>
</div>
</div>
</div>
</div>
<ul class="nav fl" id="nav1">
<li onMouseOver="setTab(1,0)" class="hover"><a href="../首页制作/chanpinye.html" class="/active/">数码城</a></li>
<li onMouseOver="setTab(1,1)"><a href="" >天黑黑</a></li>
<li onMouseOver="setTab(1,2)"><a href="" >团购</a></li>
<li onMouseOver="setTab(1,3)"><a href="" >发现</a></li>
<li onMouseOver="setTab(1,4)"><a href="" >二手特卖</a></li>
<li onMouseOver="setTab(1,5)"><a href="" >名品会</a></li>
</ul>
</div>
</div>
</div>
<!-----------------------------banner------------------------------------>
<div class="banner comwidth clearfix">
<div class="banner_bar banner_big">
<ul class="imgbox">
<li><a href=""><img src="../img/banner_01.png" alt="banner"></a></li>
<li><a href=""><img src="../img/banner_02.png" alt="banner"></a></li>
</ul>
<div class="imgnum"><a href="" class="active"></a><a href=""></a><a href=""></a><a href=""></a></div>
</div></div>
<div class="shoptit comwidth">
<span class="icon"></span><h3>家用电脑</h3>
<a href="" class="more">更多>></a>
</div>
<div class="shoplist comwidth clearfix">
<div class="leftarea fl">
<div class="banner_bar banner_sm">
<ul class="imgbox">
<li><a href=""><img src="../img/tpgg.png" alt="tpgg"></a></li>
</ul>
<div class="imgnum"><a href="" class="active"></a><a href=""></a><a href=""></a><a href=""></a></div>
</div>
</div>
<div class="rightarea fl">
<div class="shoplist_top clearfix">
<div class="shop_item fl">
<div class="shop_img"><a href=""><img src="../img/sj-1.png" alt=""></a></div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
<div class="shop_item fl">
<div class="shop_img"><a href=""><img src="../img/sj-1.png" alt=""></a></div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
<div class="shop_item fl">
<div class="shop_img"><a href=""><img src="../img/sj-1.png" alt=""></a></div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
<div class="shop_item fl">
<div class="shop_img"><a href=""><img src="../img/sj-1.png" alt=""></a></div>
<h3>HTC新渴望8系列</h3>
<p>1899元</p>
</div>
</div>
<div class="shoplist_sm clearfix">
<div class="shopitem_sm fl">
<div class="shopitem_smimg">
<a href=""><img src="../img/pd.png" alt=""></a>
</div>
<div class="shopitem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="shopitem_sm fl">
<div class="shopitem_smimg">
<a href=""><img src="../img/pd.png" alt=""></a>
</div>
<div class="shopitem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="shopitem_sm fl">
<div class="shopitem_smimg">
<a href=""><img src="../img/pd.png" alt=""></a>
</div>
<div class="shopitem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
<div class="shopitem_sm fl">
<div class="shopitem_smimg">
<a href=""><img src="../img/pd.png" alt=""></a>
</div>
<div class="shopitem_text">
<p>NFC技术一碰轻松配对！接触屏幕</p>
<h3>￥149.00</h3>
</div>
</div>
</div>
</div>
</div>
<div class="shoptit comwidth">
<span class="icon"></span><h3>食品酒水</h3>
<a href="" class="more">更多>></a>
</div>
<div class="shoplist comwidth clearfix">
<div class="leftarea fl">
<div class="banner_bar banner_sm">
<ul class="imgbox">
<li><a href=""><img src="../img/sp.png" alt="tpgg"></a></li>
</ul>
<div class="imgnum"><a href="" class="active"></a><a href=""></a><a href=""></a><a href=""></a></div>
</div>
</div>
<div class="rightarea fl">
<div class="shoplist_top clearfix">
<div class="shop_item fl">
<div class="shop_img"><a href=""><img src="../img/sn-1.png" alt=""></a></div>
<h3>三月美食狂享购</h3>
<p>40元</p>
</div>
<div class="shop_item fl">
<div class="shop_img"><a href=""><img src="../img/sn-1.png" alt=""></a></div>
<h3>三月美食狂享购</h3>
<p>40元</p>
</div>
<div class="shop_item fl">
<div class="shop_img"><a href=""><img src="../img/sn-1.png" alt=""></a></div>
<h3>三月美食狂享购</h3>
<p>40元</p>
</div>
<div class="shop_item fl">
<div class="shop_img"><a href=""><img src="../img/sn-1.png" alt=""></a></div>
<h3>三月美食狂享购</h3>
<p>40元</p>
</div>
</div>
<div class="shoplist_sm clearfix">
<div class="shopitem_sm fl">
<div class="shopitem_smimg img2">
<a href=""><img src="../img/sp-1.png" alt=""></a>
</div>
<div class="shopitem_text text2">
<p>康比特 维他保咀嚼片 60片</p>
<h3>￥600.00</h3>
</div>
</div>
<div class="shopitem_sm fl">
<div class="shopitem_smimg img2">
<a href=""><img src="../img/sp-1.png" alt=""></a>
</div>
<div class="shopitem_text text2">
<p>康比特 维他保咀嚼片 60片</p>
<h3>￥600.00</h3>
</div>
</div>
<div class="shopitem_sm fl">
<div class="shopitem_smimg img2">
<a href=""><img src="../img/sp-1.png" alt=""></a>
</div>
<div class="shopitem_text text2">
<p>康比特 维他保咀嚼片 60片</p>
<h3>￥600.00</h3>
</div>
</div>
<div class="shopitem_sm fl">
<div class="shopitem_smimg img2">
<a href=""><img src="../img/sp-1.png" alt=""></a>
</div>
<div class="shopitem_text text2">
<p>康比特 维他保咀嚼片 60片</p>
<h3>￥600.00</h3>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="">慕课简介</a><i>|</i>
<a href="">慕课公告</a><i>|</i>
<a href="">招纳贤士</a><i>|</i>
<a href="">联系我们</a><i>|</i>
客服热线：400-675-1234</p>
<p>Copyright © 2006 - 2014 慕课版权所有 京ICP备09037834号 京ICP证B1034-8373号 某市公安局XX分局备案编号：123456789123</p>
<p class="web">
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
</p>
</div>
</body>
</html>
2.产品页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品页</title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<link rel="stylesheet" type="text/css" href="../css/gongyong.css"/>
</head>
<body>
<div class="headerbar">
<div class="topbar">
<div class="comwidth">
<div id="leftcont">
<a href="" class="collection">收藏慕课</a></div>
<div id="rightcont">
<span>
欢迎来到慕课网！</span>
<a href="">[登录]</a>
<a href="">[免费注册]</a>
</div>
</div>
</div>
<div class="logobar">
<div class="comwidth">
<div class="logo fl">
<a href=""><img src="../img/logo.png" alt="慕课网"/></a>
</div>
<div class="search fl">
<input type="search" name="search_text" id="input_search" value="" />
<input type="button" name="search_btn" id="input_btn" value="搜 索" />
</div>
<div class="shopbar fr">
<span class="shoptext fl">
<a href="">购物车</a></span>
<span class="shopnum fl">100</span>
</div>
</div>
</div>
<div class="navbar">
<div class="comwidth">
<div class="shopclass fl">
<h3>全部商品分类</h3>
<!---<div class="shopclass_show hide">
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item ">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item /shopclass_active/">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
</div>
<div class="shopclass_list /hide/">
<div class="shoplist_cont">
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
</dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<div class="shoplist_links">
<a href="">电脑整机频道<span> </span></a>
<a href="">电脑整机频道<span> </span></a>
</div>
</div>
</div>--->
</div>
<ul class="nav fl">
<li><a href="" class="active">数码城</a></li>
<li><a href="">天黑黑</a></li>
<li><a href="">团购</a></li>
<li><a href="">发现</a></li>
<li><a href="">二手特卖</a></li>
<li><a href="">名品会</a></li>
</ul>
</div>
</div>
</div>
<!-----------------------------banner------------------------------------> <div class="hr_15"></div>
<div class="products comwidth clearfix">
<div class="leftarea fl">
<div class="leftnav">
<h3 class="nav_title">手机、相机、数码</h3>
<div class="nav_cont clearfix">
<h3>手机通讯</h3>
<ul class="navcont_list">
<li><a href="">全部手机</a></li>
<li><a href="">1080p高清</a></li>
<li><a href="">双卡手机</a></li>
<li><a href="">拍照神器</a></li>
<li><a href="">老年手机</a></li>
<li><a href="">对讲机</a></li>
<li><a href="">联通专区</a></li>
</ul>
</div>
<div class="nav_cont clearfix">
<h3>数码相机</h3>
<ul class="navcont_list">
<li><a href="">卡片机</a></li>
<li><a href="">中长焦</a></li>
<li><a href="">专业便</a></li>
<li><a href="">携自拍利器</a></li>
<li><a href="">防水防摔</a></li>
<li><a href="">一次成像</a></li>
</ul>
</div>
<div class="nav_cont clearfix">
<h3>单反</h3>
<ul class="navcont_list">
<li><a href="">全部</a></li>
<li><a href="">佳能</a></li>
<li><a href="">尼康</a></li>
<li><a href="">宾得</a></li>
<li><a href="">哈苏</a></li>
</ul>
</div>
<div class="nav_cont clearfix">
<h3>镜头</h3>
<ul class="navcont_list">
<li><a href="">单反镜头</a></li>
<li><a href="">微单镜头</a></li>
</ul>
</div>
<div class="nav_cont clearfix">
<h3>摄像机</h3>
<ul class="navcont_list">
<li><a href="">全部</a></li>
<li><a href="">索尼</a></li>
<li><a href="">松下</a></li>
<li><a href="">佳能</a></li>
<li><a href="">三星</a></li>
</ul>
</div>
<div class="nav_cont clearfix">
<h3>摄像配件</h3>
<ul class="navcont_list">
<li><a href="">相机包</a></li>
<li><a href="">相机电池</a></li>
<li><a href="">贴膜</a></li>
<li><a href="">滤镜</a></li>
<li><a href="">三脚架</a></li>
<li><a href="">闪光灯</a></li>
<li><a href="">遮光罩</a></li>
<li><a href="">遥控器</a></li>
<li><a href="">专业配件</a></li>
<li><a href="">清洁用品</a></li>
<li><a href="">望远镜</a></li>
</ul>
</div>
<div class="nav_cont clearfix">
<h3>数码存储</h3>
<ul class="navcont_list">
<li><a href="">刻录光盘</a></li>
<li><a href="">盘片附件</a></li>
</ul>
</div>
<div class="nav_cont clearfix">
<h3>电子教育</h3>
<ul class="navcont_list">
<li><a href="">电子书</a></li>
<li><a href="">电子词典</a></li>
<li><a href="">幼儿教育</a></li>
<li><a href="">智能学习</a></li>
<li><a href="">录音笔</a></li>
</ul>
</div>
</div>
</div>
<div class="rightarea fr">
<div class="banner_bar banner_big">
<ul class="imgbox">
<li><a href=""><img src="../img/banner_01.png" alt="banner"></a></li>
<li><a href=""><img src="../img/banner_02.png" alt="banner"></a></li>
</ul>
<div class="imgnum"><a href="" class="active"></a><a href=""></a><a href=""></a><a href=""></a></div>
</div>
<div class="hr_7"></div>
<div class="products_title">
<h3>数码影像</h3>
</div>
<div class="products_list clearfix">
<div class="item">
<div class="img_item">
<a href=""><img src="../img/l-1.png" alt=""></a></div>
<p>Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD
">￥699.00
评论:">
">
">
">
">
">
">(79条)
">
Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD</p> <p class="money">￥699.00</p> <p>评论:<span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <a href="">(79条)</a></p> </div> <div class="item"> <div class="img_item"> <a href=""><img src="../img/l-1.png" alt=""></a></div> <p>Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD
">￥699.00
评论:"> "> "> "> "> "> ">(79条)
">
Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD</p> <p class="money">￥699.00</p> <p>评论:<span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <a href="">(79条)</a></p> </div> <div class="item"> <div class="img_item"> <a href=""><img src="../img/l-1.png" alt=""></a></div> <p>Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD
">￥699.00
评论:"> "> "> "> "> "> ">(79条)
">
Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD</p> <p class="money money2">￥699.00</p> <p>评论:<span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <a href="">(79条)</a></p> </div> <div class="item"> <div class="img_item"> <a href=""><img src="../img/l-1.png" alt=""></a></div> <p>Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD
">￥699.00
评论:"> "> "> "> "> "> ">(79条)
">
Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD</p> <p class="money money2">￥699.00</p> <p>评论:<span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <a href="">(79条)</a></p> </div> </div> <div class="hr_20"></div> <div class="products_title"> <h3>娱乐影音</h3> </div> <div class="products_list clearfix"> <div class="item"> <div class="img_item"> <a href=""><img src="../img/l-1.png" alt=""></a></div> <p>Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD
">￥699.00
评论:"> "> "> "> "> "> ">(79条)
">
Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD</p> <p class="money">￥699.00</p> <p>评论:<span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <a href="">(79条)</a></p> </div> <div class="item"> <div class="img_item"> <a href=""><img src="../img/l-1.png" alt=""></a></div> <p>Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD
">￥699.00
评论:"> "> "> "> "> "> ">(79条)
">
Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD</p> <p class="money">￥699.00</p> <p>评论:<span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <a href="">(79条)</a></p> </div> <div class="item"> <div class="img_item"> <a href=""><img src="../img/l-1.png" alt=""></a></div> <p>Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD
">￥699.00
评论:"> "> "> "> "> "> ">(79条)
">
Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD</p> <p class="money money2">￥699.00</p> <p>评论:<span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <a href="">(79条)</a></p> </div> <div class="item"> <div class="img_item"> <a href=""><img src="../img/l-1.png" alt=""></a></div> <p>Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD
">￥699.00
评论:"> "> "> "> "> "> ">(79条)
">
Canon 佳能 IXUS 132 数码相机 粉色 （1600像素2.7" LGD</p> <p class="money money2">￥699.00</p> <p>评论:<span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <span class="stars"></span> <a href="">(79条)</a></p> </div> </div> </div> </div> <div class="hr_7"></div> <div class="footer"> <p> <a href="">慕课简介</a><i>|</i> <a href="">慕课公告</a><i>|</i> <a href="">招纳贤士</a><i>|</i> <a href="">联系我们</a><i>|</i> 客服热线：400-675-1234</p> <p>Copyright © 2006 - 2014 慕课版权所有 京ICP备09037834号 京ICP证B1034-8373号 某市公安局XX分局备案编号：123456789123</p> <p class="web"> <a href=""><img src="../img/web.png" alt="logo"></a> <a href=""><img src="../img/web.png" alt="logo"></a> <a href=""><img src="../img/web.png" alt="logo"></a> <a href=""><img src="../img/web.png" alt="logo"></a> </p> </div> </body> </html>
3.筛选页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>筛选页</title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<link rel="stylesheet" type="text/css" href="../css/gongyong.css"/>
</head>
<body>
<div class="headerbar">
<div class="topbar">
<div class="comwidth">
<div id="leftcont">
<a href="" class="collection">收藏慕课</a></div>
<div id="rightcont">
<span>
欢迎来到慕课网！</span>
<a href="">[登录]</a>
<a href="">[免费注册]</a>
</div>
</div>
</div>
<div class="logobar">
<div class="comwidth">
<div class="logo fl">
<a href=""><img src="../img/logo.png" alt="慕课网"/></a>
</div>
<div class="search fl">
<input type="search" name="search_text" id="input_search" value="" />
<input type="button" name="search_btn" id="input_btn" value="搜 索" />
</div>
<div class="shopbar fr">
<span class="shoptext fl">
<a href="">购物车</a></span>
<span class="shopnum fl">100</span>
</div>
</div>
</div>
<div class="navbar">
<div class="comwidth">
<div class="shopclass fl">
<h3>全部商品分类</h3>
<div class="shopclass_show hide">
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item ">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item /shopclass_active/">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
</div>
<div class="shopclass_list hide">
<div class="shoplist_cont">
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
</dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<div class="shoplist_links">
<a href="">电脑整机频道<span> </span></a>
<a href="">电脑整机频道<span> </span></a>
</div>
</div>
</div>
</div>
<ul class="nav fl">
<li><a href="" class="active">数码城</a></li>
<li><a href="">天黑黑</a></li>
<li><a href="">团购</a></li>
<li><a href="">发现</a></li>
<li><a href="">二手特卖</a></li>
<li><a href="">名品会</a></li>
</ul>
</div>
</div>
</div>
<!-----------------------------banner------------------------------------> <div class="hr_15"></div>
<div class="products comwidth clearfix">
<div class="leftarea_sx fl">
<div class="leftnav">
<h3 class="nav_title">产品分类</h3>
<div class="nav_contsx clearfix">
<h3>手机通讯</h3>
<ul class="navcont_listsx">
<li><a href="">手机</a></li>
<li><a href="">对讲机</a></li>
</ul>
</div>
<div class="nav_contsx clearfix">
<h3>运营商</h3>
<ul class="navcont_listsx">
<li><a href="">购机送费</a></li>
<li><a href="">0元购机</a></li>
<li><a href="">选号入网</a></li>
</ul>
</div>
<div class="nav_contsx clearfix">
<h3>手机配件</h3>
<ul class="navcont_listsx">
<li><a href="">手机电池</a></li>
<li><a href="">蓝牙耳机</a></li>
<li><a href="">充电器/数据线</a></li>
<li><a href="">手机耳机</a></li>
<li><a href="">手机贴膜</a></li>
<li><a href="">手机存储卡</a></li>
<li><a href="">手机保护套</a></li>
<li><a href="">车载配件</a></li>
<li><a href="">iPhone 配件</a></li>
</ul>
</div>
</div>
<div class="nav_contimg clearfix nav_white">
<div class="navcont_img">
<a href="">
<img src="../img/cont-1.png" alt=""></a>
</div>
</div>
</div>
<div class="rightarea_sx fr">
<div class="screening_box">
<dl class="screening clearfix">
<dt>手机</dt>
<dd class="limitsx"><a href="">裸机(773)</a></dd>
<dd class="limitsx"><a href="">裸机(773)</a></dd>
</dl>
<dl class="screening clearfix">
<dt>品牌</dt>
<dd class="limit"><a href="" class="active">不限</a></dd>
<dd class="screening_list">
<ul class="clearfix">
<li><a href="">Samsung/三星</a></li>
<li><a href="">Apple/苹果</a></li>
<li><a href="">Huawei/华为</a></li>
<li><a href="">Apple/苹果</a></li>
<li><a href="">Huawei/华为</a></li>
<li><a href="">Samsung/三星</a></li>
<li><a href="">Apple/苹果</a></li>
<li><a href="">Huawei/华为</a></li>
<li><a href="">Apple/苹果</a></li>
<li><a href="">Huawei/华为</a></li>
<li><a href="">Samsung/三星</a></li>
<li><a href="">Apple/苹果</a></li>
</ul>
</dd>
<dd class="screening_listsx"><li class="sx_pmsx"><a href="" class="more_sx">更多 </a></li></dd>
</dl>
<dl class="screening clearfix">
<dt>屏幕尺寸</dt>
<dd class="limit"><a href="" class="active">不限</a></dd>
<dd class="screening_list">
<ul class="clearfix">
<li class="sx_pm"><a href="">超大屏幕(>5.9英寸)</a></li>
<li class="sx_pm"><a href="">大屏幕(4.8—5.8英寸)</a></li>
<li class="sx_pm"><a href="">主流屏幕尺寸(4.0-4.7)英寸</a></li>
</ul>
</dd>
<dd class="screening_listsx"><li class="sx_pmsx"><a href="" class="more_sx">更多 </a></li></dd>
</dl>
<dl class="screening clearfix">
<dt>操作系统</dt>
<dd class="limit"><a href="" class="active">不限</a></dd>
<dd class="screening_list">
<ul class="clearfix">
<li><a href="">Android</a></li>
<li><a href="">苹果iOS</a></li>
<li><a href="">Windows phone</a></li>
<li><a href="">Symbian</a></li>
<li><a href="">非智能机</a></li>
</ul>
</dd>
</dl>
<dl class="screening clearfix">
<dt>适用网络制式</dt>
<dd class="limit"><a href="" class="active">不限</a></dd>
<dd class="screening_list">
<ul class="clearfix">
<li><a href="">4G</a></li>
<li><a href="">5G</a></li>
<li><a href="">WiFF5</a></li>
<li><a href="">WiFF6</a></li>
</ul></dd>
<dd class="screening_listsx"><li class="sx_pmsx"><a href="" class="more_sx">更多 </a></li></dd>
</dl>
<dl class="screening clearfix">
<dt>更多选项</dt>
<dd class="screening_list">
<div class="screen_more">
<a href="">Samsung/三星</a></div>
<div class="screen_more">
<a href="">Samsung/三星</a></div>
</dd>
</dl>
</div>
<div class="screen_cont">
<span>送至</span><select>
<option value="1">海淀区五环内</option>
<option value="2">中关村五环内</option></select>
<input type="checkbox" name="" class="shuju"> 仅显示有货 共<i class="red_shuju">16422</i>件商品
</div>
<div class="shoplb">
<div class="shoplb_kuang">
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj2.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj3.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj4.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj5.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj6.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="shoplb_list">
<div class="shoplb_img"><a href="">
<img src="../img/sj1.png" alt=""></a></div>
<div class="shoplb_cont">
<p>小米 红米 4G (GSM/TD-SCDMA)手机 灰色</p>
<p class="red_shuju">￥ 1150.00 </p><span class="blue_shuju">4886</span><span class="black">评论</span>
<p ><a href="" class="shop_gwc blue_shuju">加入购物车</a></p>
</div>
</div>
<div class="hr_60"></div>
<div class="yema">
<span class="yemafooter">上一页</span>
<span class="yemafooter yemafooter_2">1</span>
<span class="yemafooter">2</span>
<span class="yemafooter">3</span>
<span class="yemafooter">4</span>
<span class="yemafooter">5</span>
<span class="yemafooter">6</span>
<span class="yemafooter">7</span>
<span class="yemafooter">8</span>
<span class="yemafooter">...</span>
<span class="yemafooter">200</span>
<span class="yemafooter">下一页</span>
<span class="yemafoot">共200页，到第</span>
<span class="yemafooter yemafooter_3">1</span>
<span class="yemafoot_1">页</span>
<input type="button" name="" value="确定" class="btn">
</div>
</div>
</div>
</div>
</div>
<div class="hr_7"></div>
<div class="footer">
<p>
<a href="">慕课简介</a><i>|</i>
<a href="">慕课公告</a><i>|</i>
<a href="">招纳贤士</a><i>|</i>
<a href="">联系我们</a><i>|</i>
客服热线：400-675-1234</p>
<p>Copyright © 2006 - 2014 慕课版权所有 京ICP备09037834号 京ICP证B1034-8373号 某市公安局XX分局备案编号：123456789123</p>
<p class="web">
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
</p>
</div>
</body>
</html>
4.详情页-1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>详情页-商品评价</title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<link rel="stylesheet" type="text/css" href="../css/gongyong.css"/>
</head>
<body class="grey">
<div class="headerbar">
<div class="topbar">
<div class="comwidth">
<div id="leftcont">
<a href="" class="collection">收藏慕课</a></div>
<div id="rightcont">
<span>
欢迎来到慕课网！</span>
<a href="">[登录]</a>
<a href="">[免费注册]</a>
</div>
</div>
</div>
<div class="logobar">
<div class="comwidth">
<div class="logo fl">
<a href=""><img src="../img/logo.png" alt="慕课网"/></a>
</div>
<div class="search fl">
<input type="search" name="search_text" id="input_search" value="" />
<input type="button" name="search_btn" id="input_btn" value="搜 索" />
</div>
<div class="shopbar fr">
<span class="shoptext fl">
<a href="">购物车</a></span>
<span class="shopnum fl">100</span>
</div>
</div>
</div>
<div class="navbar">
<div class="comwidth">
<div class="shopclass fl">
<h3>全部商品分类</h3>
<!---- <div class="shopclass_show hide">
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item ">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item /shopclass_active/">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
</div>
<div class="shopclass_list hide">
<div class="shoplist_cont">
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
</dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<div class="shoplist_links">
<a href="">电脑整机频道<span> </span></a>
<a href="">电脑整机频道<span> </span></a>
</div>
</div>
</div>----->
</div>
<ul class="nav fl">
<li><a href="" class="active">数码城</a></li>
<li><a href="">天黑黑</a></li>
<li><a href="">团购</a></li>
<li><a href="">发现</a></li>
<li><a href="">二手特卖</a></li>
<li><a href="">名品会</a></li>
</ul>
</div>
</div>
</div>
<!-----------------------------shangpinjieshao------------------------------------>
<div class="userposition comwidth">
<strong><a href="">首页</a></strong>
<span> > </span>
<a href="">平板电脑</a>
<span> > </span>
<em>MD531CH/A</em>
</div>
<div class="description_info comwidth" contenteditable="true">
<div class="description clearfix">
<div class="leftarea fl">
<div class="description_imgs">
<div class="big"><img src="../img/des.png" alt=""></div>
<ul class="des_smimg">
<li class="active"><a href=""><img src="../img/des1.png" alt=""></a></li>
<li><a href=""><img src="../img/des2.png" alt=""></a></li>
<li><a href=""><img src="../img/des3.png" alt=""></a></li>
<li><a href=""><img src="../img/des4.png" alt=""></a></li>
<li><a href=""><img src="../img/des5.png" alt=""></a></li>
</ul>
</div>
</div>
<div class="rightarea fr">
<div class="des_cont">
<h3>全网底价 Apple 苹果 iPad mini 16G wifi版 平板电脑 前白后银 MD531CH/A 银白两色生产批次不同混合发货</h3>
<div class="dl clearfix">
<div class="dt">慕课价</div>
<div class="dd"><span class="des_money"><em>¥</em>1999.00</span></div>
</div>
<div class="dl clearfix">
<div class="dt">优惠</div>
<div class="dd"><span class="hg"><i class="hg_icon">满换购</i>购ipad加价优惠够配件或USB充电插座</span></div>
</div>
<div class="des_position">
<div class="hr_20"></div>
<div class="dl clearfix">
<div class="dt">送到</div>
<div class="dd">
<select name="" id="">
<option value="1">北京市 海淀区 五环内</option>
<option value="2">北京市 中关村 五环内</option></select>
<span class="hg_1">有货，可当日出库</span></div>
</div>
<div class="dl clearfix">
<div class="dt">选择颜色</div>
<div class="dd">
<span class="color_1">白色</span>
<span class="color">黑色</span>
<span class="color">灰色</span>
</div>
</div>
<div class="dl clearfix">
<div class="dt">选择规格</div>
<div class="dd ddl clearfix">
<span class="gg_1">WIFI 16G</span>
<span class="gg">WIFI 64G</span>
<span class="gg">WIFI 32G</span>
<span class="gg">WIFI Cellular 32G</span>
<span class="gg">WIFI Cellular 64G</span>
<span class="gg_2">WIFI Cellular 16G</span>
</div>
</div>
<div class="dl clearfix">
<div class="dt">数量</div>
<div class="dd clearfix">
<div class="des_number fl">
<div class="reduction fl">-</div>
<div class="des_input fl">1</div>
<div class="plus fl">+</div>
</div>
<span class="hg_xg">限购<i class="hg_color">9</i>件</span>
</div>
<div class="hr_20"></div>
</div>
</div>
<div class="des_selelct">
已选择 <span >“白色|WIFI 16G”</span>
</div>
<div class="shop_buy fl">
<a href="#" class="shopping_btn"></a>
<span class="line"></span>
<a href="#" class="shopping_btn"></a>
</div>
<span class="des_ts">注意：此商品可提供普通发票，不提供增值税发票。</span>
</div>
</div></div>
</div>
<div class="hr_20"></div>
<div class="des_info comwidth clearfix">
<div class="leftarea fl">
<div class="recommend">
<h3 class="tit">同价位</h3>
<div class="item">
<div class="item_cont">
<div class="img_item">
<a href=""><img src="../img/ds1.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item1">
<a href=""><img src="../img/ds2.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item">
<a href=""><img src="../img/ds3.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item">
<a href=""><img src="../img/ds4.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="hr_20"></div>
</div>
<div class="hr_30"></div>
<div class="recommend re_1">
<h3 class="tit">看了最终买</h3>
<div class="item">
<div class="item_cont">
<div class="img_item">
<a href=""><img src="../img/ds5.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item1">
<a href=""><img src="../img/ds6.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item1">
<a href=""><img src="../img/ds7.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
</div>
</div>
<div class="rightarea fr">
<div class="des_infocontent">
<ul class="des_tit1">
<li class="t1"><span>产品介绍</span></li>
<li class="t2"><span>商品评价(12312)</span></li>
</ul>
<!----<div class="ad">
<a href=""><img src="../img/sd.png" alt=""></a>
</div>
<div class="info_tit">
<h3>强烈推荐</h3>
<h4>货比三家，还选</h4>
</div>
<div class="info_evaluate">
<p>
现在就是买mini的好时候！换代清仓直降，但苹果品质不变！A5双核，内置Lightning闪电接口，正反可插，方便人性。小身材，炫丽的7.9英寸显示屏，7.2mm的厚度，薄如铅笔。女生包包随身携带更时尚！facetime视频通话，与密友24小时畅聊不断线。微信倾力打造，你的智能助理。苹果的牌子就不用我说了，1111补仓，存货不多哦！</p>
</div>
<div class="hr_30"></div>
<div class="info_tit">
<h3>精美图片</h3>
</div>
<div class="info_evaluate">
<p>
苹果iPad7.9 英寸显示屏可带来新的iPad体验，绚丽的显示屏，在每一寸画面中呈现灵动鲜活的美妙影像。<br style="line-height: 40px;">苹果miniMD528CH/A采用500 万像素 iSight 摄像头，清晰记录每一次的幸福。</p>
<div class="hr_30"></div>
<img src="../img/ipad.png" alt="">
</div>
<div class="hr_30"></div>--->
</div>
<div class="des_infocontent">
<h3 class="shopdes_tit">商品评价</h3>
<div class="score_box clearfix">
<div class="score">
<span>4.7</span><em>分</em>
</div>
<div class="score_speed">
<ul class="score_speed_text">
<li>非常不满意</li>
<li>不满意</li>
<li>一般</li>
<li>满意</li>
<li>非常满意</li>
</ul>
<div class="score_num">
4.7
<i></i>
</div>
</div>
<br style="line-height: 40px;">
<span class="fl score_text">共18939位慕课网友参与评分</span>
<div class="hr_100"></div>
</div>
<div class="hr_kuang">
<ul class="review fl">
<li><a href="" class="active">全部</a></li>
<li><a href="">满意(3132)</a></li>
<li><a href="">一般(549)</a></li>
<li><a href="">不满意(743)</a></li>
</ul>
<img src="../img/new.png" alt="" class="new">
<div class="review_sort fr">
<a href="" class="review_time fl">时间排序</a>
<a href="" class="review_reco fl">推荐排序</a>
</div>
</div>
<div class="members">
<div class="members_left fl">
<a href=""><img src="../img/hy.png" alt="" class="hy"></a>
<span class="hy_mc">61***42<br>金色会员</span>
</div>
<div class="members_right fr">
<div class="point_date">
<p class="re_points fl">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
5分 满意
</p>
<span class="date fl">2014-03-07 17:41:44</span></div>
<div class="re_views">
<span class="re_viewspan">挺不错的，信赖慕课</span>
<a href="" class="cd">踩（0）</a>
<a href="" class="cd">顶（0）</a></div>
</div>
</div>
<div class="members">
<div class="members_left fl">
<a href=""><img src="../img/hy.png" alt="" class="hy"></a>
<span class="hy_mc">88***22<br>铜色会员</span>
</div>
<div class="members_right fr">
<div class="point_date">
<p class="re_points fl">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
5分 满意
</p>
<span class="date fl">2014-03-07 17:41:44</span></div>
<div class="re_views">
<span class="re_viewspan">挺不错的，信赖慕课</span>
<a href="" class="cd">踩（0）</a>
<a href="" class="cd">顶（0）</a></div>
</div>
</div>
<div class="hr_10"></div>
<div class="page">
<span class="page_gg page_num1"><上一页</span>
<span class="page_gg page_num2">1</span>
<span class="page_gg page_num">2</span>
<span class="page_gg page_num">3</span>
<span class="page_gg page_num">4</span>
<span class="page_gg page_num">5</span>
<span class="page_numb">...</span>
<span class="page_gg page_num3">1879</span>
<span class="page_gg page_num1 active">下一页></span>
<p class="pagep">到第<span class="page_gg">1</span>页</p>
<input type="submit" name="submit" value="确定" class="queding">
</div>
<div class="hr_40"></div>
</div>
<div class="hr_15"></div>
<div class="cst_infocontent">
<div class="consult">
<h3 class="consult_tit">全部咨询(703)</h3>
<div class="consult_right">
<span class="consult_jy">发表咨询</span></div>
</div>
<div class="cst_instruct">
<span class="instruct">提示:因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知，且每位咨询者购买情况、提问时间等不同，为此以下回复信息仅供参考！若由此给您带来不便请多多谅解，谢谢！</span></div>
<div class="cst_instruct">
<span class="instruct">提示:因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知，且每位咨询者购买情况、提问时间等不同，为此以下回复信息仅供参考！若由此给您带来不便请多多谅解，谢谢！</span></div>
<div class="hr_20"></div>
<div class="members">
<div class="members_left fl">
<a href=""><img src="../img/hy.png" alt="" class="hy"></a>
<span class="hy_mc">12***20<br>土星会员</span>
</div>
<div class="members_right fr">
<div class="point_date">
<p class="re_points fl">
[商品咨询]
</p>
<span class="date fl">2014-04-08 11:23:14</span></div>
<div class="re_views">
<span class="re_viewspan">还能在便宜点么？</span>
<span class="instruct_hf"><strong class="hf_color">慕课网回复</strong>：您好，现在已经是活动价格了</span>
</div>
</div>
</div>
<div class="members">
<div class="members_left fl">
<a href=""><img src="../img/hy.png" alt="" class="hy"></a>
<span class="hy_mc">13***40<br>土星会员</span>
</div>
<div class="members_right fr">
<div class="point_date">
<p class="re_points fl">
[商品咨询]
</p>
<span class="date fl">2014-04-08 11:23:14</span></div>
<div class="re_views">
<span class="re_viewspan">价格还有商量的余地么？</span>
<span class="instruct_hf"><strong class="hf_color">慕课网回复</strong>：您好，现在已经是活动价格了</span>
</div>
</div>
</div>
<div class="hr_10"></div>
<div class="page">
<span class="page_gg page_num1"><上一页</span>
<span class="page_gg page_num2_bgcolor">1</span>
<span class="page_gg page_num_color">2</span>
<span class="page_gg page_num1 active">下一页></span>
<p class="pagep">到第<span class="page_gg">1</span>页</p>
<input type="submit" name="submit" value="确定" class="queding">
</div>
<div class="hr_40"></div>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="">慕课简介</a><i>|</i>
<a href="">慕课公告</a><i>|</i>
<a href="">招纳贤士</a><i>|</i>
<a href="">联系我们</a><i>|</i>
客服热线：400-675-1234</p>
<p>Copyright © 2006 - 2014 慕课版权所有 京ICP备09037834号 京ICP证B1034-8373号 某市公安局XX分局备案编号：123456789123</p>
<p class="web">
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
</p>
</div>
</body>
</html>
5.详情页-2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>详情页-产品介绍</title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<link rel="stylesheet" type="text/css" href="../css/gongyong.css"/>
</head>
<body class="grey">
<div class="headerbar">
<div class="topbar">
<div class="comwidth">
<div id="leftcont">
<a href="" class="collection">收藏慕课</a></div>
<div id="rightcont">
<span>
欢迎来到慕课网！</span>
<a href="">[登录]</a>
<a href="">[免费注册]</a>
</div>
</div>
</div>
<div class="logobar">
<div class="comwidth">
<div class="logo fl">
<a href=""><img src="../img/logo.png" alt="慕课网"/></a>
</div>
<div class="search fl">
<input type="search" name="search_text" id="input_search" value="" />
<input type="button" name="search_btn" id="input_btn" value="搜 索" />
</div>
<div class="shopbar fr">
<span class="shoptext fl">
<a href="">购物车</a></span>
<span class="shopnum fl">100</span>
</div>
</div>
</div>
<div class="navbar">
<div class="comwidth">
<div class="shopclass fl">
<h3>全部商品分类</h3>
<!---- <div class="shopclass_show hide">
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item ">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item /shopclass_active/">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
<dl class="shopclass_item">
<dt ><a href="" class="b">手机 </a><a href="" class="b"> 数码</a>
<a href="" class="yuanquan"> 合约机</a>
</dt>
<dd><a href="">荣耀3X </a>
<a href=""> 单反 </a>
<a href=""> 智能设备</a> </dd>
</dl>
</div>
<div class="shopclass_list hide">
<div class="shoplist_cont">
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
<a href="">台式机</a>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a>
</dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<dl class="shoplist_item">
<dt>电脑整机</dt>
<dd>
<a href="">笔记本</a>
<a href="">超极本</a>
<a href="">上网本</a>
<a href="">平板电脑</a>
<a href="">台式机</a></dd>
</dl>
<div class="shoplist_links">
<a href="">电脑整机频道<span> </span></a>
<a href="">电脑整机频道<span> </span></a>
</div>
</div>
</div>----->
</div>
<ul class="nav fl">
<li><a href="" class="active">数码城</a></li>
<li><a href="">天黑黑</a></li>
<li><a href="">团购</a></li>
<li><a href="">发现</a></li>
<li><a href="">二手特卖</a></li>
<li><a href="">名品会</a></li>
</ul>
</div>
</div>
</div>
<!-----------------------------shangpinjieshao------------------------------------>
<div class="userposition comwidth">
<strong><a href="">首页</a></strong>
<span> > </span>
<a href="">平板电脑</a>
<span> > </span>
<em>MD531CH/A</em>
</div>
<div class="description_info comwidth" contenteditable="true">
<div class="description clearfix">
<div class="leftarea fl">
<div class="description_imgs">
<div class="big"><img src="../img/des.png" alt=""></div>
<ul class="des_smimg">
<li class="active"><a href=""><img src="../img/des1.png" alt=""></a></li>
<li><a href=""><img src="../img/des2.png" alt=""></a></li>
<li><a href=""><img src="../img/des3.png" alt=""></a></li>
<li><a href=""><img src="../img/des4.png" alt=""></a></li>
<li><a href=""><img src="../img/des5.png" alt=""></a></li>
</ul>
</div>
</div>
<div class="rightarea fr">
<div class="des_cont">
<h3>全网底价 Apple 苹果 iPad mini 16G wifi版 平板电脑 前白后银 MD531CH/A 银白两色生产批次不同混合发货</h3>
<div class="dl clearfix">
<div class="dt">慕课价</div>
<div class="dd"><span class="des_money"><em>¥</em>1999.00</span></div>
</div>
<div class="dl clearfix">
<div class="dt">优惠</div>
<div class="dd"><span class="hg"><i class="hg_icon">满换购</i>购ipad加价优惠够配件或USB充电插座</span></div>
</div>
<div class="des_position">
<div class="hr_20"></div>
<div class="dl clearfix">
<div class="dt">送到</div>
<div class="dd">
<select name="" id="">
<option value="1">北京市 海淀区 五环内</option>
<option value="2">北京市 中关村 五环内</option></select>
<span class="hg_1">有货，可当日出库</span></div>
</div>
<div class="dl clearfix">
<div class="dt">选择颜色</div>
<div class="dd">
<span class="color_1">白色</span>
<span class="color">黑色</span>
<span class="color">灰色</span>
</div>
</div>
<div class="dl clearfix">
<div class="dt">选择规格</div>
<div class="dd ddl clearfix">
<span class="gg_1">WIFI 16G</span>
<span class="gg">WIFI 64G</span>
<span class="gg">WIFI 32G</span>
<span class="gg">WIFI Cellular 32G</span>
<span class="gg">WIFI Cellular 64G</span>
<span class="gg_2">WIFI Cellular 16G</span>
</div>
</div>
<div class="dl clearfix">
<div class="dt">数量</div>
<div class="dd clearfix">
<div class="des_number fl">
<div class="reduction fl">-</div>
<div class="des_input fl">1</div>
<div class="plus fl">+</div>
</div>
<span class="hg_xg">限购<i class="hg_color">9</i>件</span>
</div>
<div class="hr_20"></div>
</div>
</div>
<div class="des_selelct">
已选择 <span >“白色|WIFI 16G”</span>
</div>
<div class="shop_buy fl">
<a href="#" class="shopping_btn"></a>
<span class="line"></span>
<a href="#" class="shopping_btn"></a>
</div>
<span class="des_ts">注意：此商品可提供普通发票，不提供增值税发票。</span>
</div>
</div></div>
</div>
<div class="hr_20"></div>
<div class="des_info comwidth clearfix">
<div class="leftarea fl">
<div class="recommend">
<h3 class="tit">同价位</h3>
<div class="item">
<div class="item_cont">
<div class="img_item">
<a href=""><img src="../img/ds1.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item1">
<a href=""><img src="../img/ds2.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item">
<a href=""><img src="../img/ds3.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item">
<a href=""><img src="../img/ds4.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="hr_20"></div>
</div>
<div class="hr_30"></div>
<div class="recommend re_1">
<h3 class="tit">看了最终买</h3>
<div class="item">
<div class="item_cont">
<div class="img_item">
<a href=""><img src="../img/ds5.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item1">
<a href=""><img src="../img/ds6.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
<div class="item">
<div class="item_cont">
<div class="img_item1">
<a href=""><img src="../img/ds7.png" alt=""></a>
</div>
<p class="p_font"><a href="">Samsung 三星 GALAXY Tab 3 8.0 WLAN版本 T310平板电话</a></p>
<p class="money">¥3588.00</p>
</div>
</div>
</div>
</div>
<div class="rightarea fr">
<div class="des_infocontent">
<ul class="des_tit">
<li><span>产品介绍</span></li>
<li><span>商品评价(12312)</span></li>
</ul>
<div class="ad">
<a href=""><img src="../img/sd.png" alt=""></a>
</div>
<div class="info_tit">
<h3>强烈推荐</h3>
<h4>货比三家，还选</h4>
</div>
<div class="info_evaluate">
<p>
现在就是买mini的好时候！换代清仓直降，但苹果品质不变！A5双核，内置Lightning闪电接口，正反可插，方便人性。小身材，炫丽的7.9英寸显示屏，7.2mm的厚度，薄如铅笔。女生包包随身携带更时尚！facetime视频通话，与密友24小时畅聊不断线。微信倾力打造，你的智能助理。苹果的牌子就不用我说了，1111补仓，存货不多哦！</p>
</div>
<div class="hr_30"></div>
<div class="info_tit">
<h3>精美图片</h3>
</div>
<div class="info_evaluate">
<p>
苹果iPad7.9 英寸显示屏可带来新的iPad体验，绚丽的显示屏，在每一寸画面中呈现灵动鲜活的美妙影像。<br style="line-height: 40px;">苹果miniMD528CH/A采用500 万像素 iSight 摄像头，清晰记录每一次的幸福。</p>
<div class="hr_30"></div>
<img src="../img/ipad.png" alt="">
</div>
<div class="hr_30"></div>
</div>
<div class="des_infocontent">
<h3 class="shopdes_tit">商品评价</h3>
<div class="score_box clearfix">
<div class="score">
<span>4.7</span><em>分</em>
</div>
<div class="score_speed">
<ul class="score_speed_text">
<li>非常不满意</li>
<li>不满意</li>
<li>一般</li>
<li>满意</li>
<li>非常满意</li>
</ul>
<div class="score_num">
4.7
<i></i>
</div>
</div>
<br style="line-height: 40px;">
<span class="fl score_text">共18939位慕课网友参与评分</span>
<div class="hr_100"></div>
</div>
<div class="hr_kuang">
<ul class="review fl">
<li><a href="" class="active">全部</a></li>
<li><a href="">满意(3132)</a></li>
<li><a href="">一般(549)</a></li>
<li><a href="">不满意(743)</a></li>
</ul>
<img src="../img/new.png" alt="" class="new">
<div class="review_sort fr">
<a href="" class="review_time fl">时间排序</a>
<a href="" class="review_reco fl">推荐排序</a>
</div>
</div>
<div class="members">
<div class="members_left fl">
<a href=""><img src="../img/hy.png" alt="" class="hy"></a>
<span class="hy_mc">61***42<br>金色会员</span>
</div>
<div class="members_right fr">
<div class="point_date">
<p class="re_points fl">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
5分 满意
</p>
<span class="date fl">2014-03-07 17:41:44</span></div>
<div class="re_views">
<span class="re_viewspan">挺不错的，信赖慕课</span>
<a href="" class="cd">踩（0）</a>
<a href="" class="cd">顶（0）</a></div>
</div>
</div>
<div class="members">
<div class="members_left fl">
<a href=""><img src="../img/hy.png" alt="" class="hy"></a>
<span class="hy_mc">88***22<br>铜色会员</span>
</div>
<div class="members_right fr">
<div class="point_date">
<p class="re_points fl">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
<img src="../img/wjx.png" alt="" class="wjx">
5分 满意
</p>
<span class="date fl">2014-03-07 17:41:44</span></div>
<div class="re_views">
<span class="re_viewspan">挺不错的，信赖慕课</span>
<a href="" class="cd">踩（0）</a>
<a href="" class="cd">顶（0）</a></div>
</div>
</div>
<div class="hr_10"></div>
<div class="page">
<span class="page_gg page_num1"><上一页</span>
<span class="page_gg page_num2">1</span>
<span class="page_gg page_num">2</span>
<span class="page_gg page_num">3</span>
<span class="page_gg page_num">4</span>
<span class="page_gg page_num">5</span>
<span class="page_numb">...</span>
<span class="page_gg page_num3">1879</span>
<span class="page_gg page_num1 active">下一页></span>
<p class="pagep">到第<span class="page_gg">1</span>页</p>
<input type="submit" name="submit" value="确定" class="queding">
</div>
<div class="hr_40"></div>
</div>
<div class="hr_15"></div>
<div class="cst_infocontent">
<div class="consult">
<h3 class="consult_tit">全部咨询(703)</h3>
<div class="consult_right">
<span class="consult_jy">发表咨询</span></div>
</div>
<div class="cst_instruct">
<span class="instruct">提示:因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知，且每位咨询者购买情况、提问时间等不同，为此以下回复信息仅供参考！若由此给您带来不便请多多谅解，谢谢！</span></div>
<div class="cst_instruct">
<span class="instruct">提示:因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知，且每位咨询者购买情况、提问时间等不同，为此以下回复信息仅供参考！若由此给您带来不便请多多谅解，谢谢！</span></div>
<div class="hr_20"></div>
<div class="members">
<div class="members_left fl">
<a href=""><img src="../img/hy.png" alt="" class="hy"></a>
<span class="hy_mc">12***20<br>土星会员</span>
</div>
<div class="members_right fr">
<div class="point_date">
<p class="re_points fl">
[商品咨询]
</p>
<span class="date fl">2014-04-08 11:23:14</span></div>
<div class="re_views">
<span class="re_viewspan">还能在便宜点么？</span>
<span class="instruct_hf"><strong class="hf_color">慕课网回复</strong>：您好，现在已经是活动价格了</span>
</div>
</div>
</div>
<div class="members">
<div class="members_left fl">
<a href=""><img src="../img/hy.png" alt="" class="hy"></a>
<span class="hy_mc">13***40<br>土星会员</span>
</div>
<div class="members_right fr">
<div class="point_date">
<p class="re_points fl">
[商品咨询]
</p>
<span class="date fl">2014-04-08 11:23:14</span></div>
<div class="re_views">
<span class="re_viewspan">价格还有商量的余地么？</span>
<span class="instruct_hf"><strong class="hf_color">慕课网回复</strong>：您好，现在已经是活动价格了</span>
</div>
</div>
</div>
<div class="hr_10"></div>
<div class="page">
<span class="page_gg page_num1"><上一页</span>
<span class="page_gg page_num2_bgcolor">1</span>
<span class="page_gg page_num_color">2</span>
<span class="page_gg page_num1 active">下一页></span>
<p class="pagep">到第<span class="page_gg">1</span>页</p>
<input type="submit" name="submit" value="确定" class="queding">
</div>
<div class="hr_40"></div>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="">慕课简介</a><i>|</i>
<a href="">慕课公告</a><i>|</i>
<a href="">招纳贤士</a><i>|</i>
<a href="">联系我们</a><i>|</i>
客服热线：400-675-1234</p>
<p>Copyright © 2006 - 2014 慕课版权所有 京ICP备09037834号 京ICP证B1034-8373号 某市公安局XX分局备案编号：123456789123</p>
<p class="web">
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
</p>
</div>
</body>
<html>
6.购物车——结算页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车-结算页</title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<link rel="stylesheet" type="text/css" href="../css/gongyong.css"/>
</head>
<body>
<div class="headerbar">
<div class="topbar">
<div class="comwidth">
<div id="leftcont">
<a href="" class="collection">收藏慕课</a></div>
<div id="rightcont">
<span>
欢迎来到慕课网！</span>
<a href="">[登录]</a>
<a href="">[免费注册]</a>
</div>
</div>
</div>
<div class="logobar">
<div class="comwidth">
<div class="logo fl">
<a href=""><img src="../img/logo.png" alt="慕课网"/></a>
</div>
<div class="shopbar_1 fl">
</div>
</div>
</div>
</div>
<!-----------------------------banner------------------------------------>
<div class="hr_20"></div>
<div class="comwidth_1">
<div class="jiesuan">收货信息</div>
<div class="information">
<font style="color: red;">*</font> 选择地区：
<select name="" id="">
<option value="1">北京市 海淀区 五环内</option>
<option value="2"></option>
</select><br>
<font style="color: red;">*</font> 详细地址： <input type="text" class="info_1" value="最多输入26个汉字"><br>
<font style="color: red;">*</font> 收 货 人： <input type="text" class="info_2" value="最多10个汉字"><br>
<font style="color: red;">*</font> 手 机： <input type="text" class="info_2" value="如13543253577">
或固定电话： <input type="text" class="info_3" value="区号">-<input type="text" class="info_3_1" value="电话号码">-<input type="text" class="info_3_1" value="分机号(可选)"><br>
<div class="hr_10"></div>
<input type="submit" name="submit" value="确认收货地址" class="submitt">
</div>
<div class="hr_20"></div>
</div>
<div class="hr_20"></div>
<div class="comwidth_1">
<div class="jiesuan">支付方式</div>
<div class="information">
<input type="radio" name="zf" value="1" class="radio"> <span class="pay">微信支付</span> <span class="pay1"> 用微信扫一扫就能支付</span><br>
<input type="radio" name="zf" value="1" class="radio"> <span class="pay">货到付款</span> <span class="pay2">送货上门后在付款，使用现金或刷银行卡</span>
</div>
<div class="hr_20"></div>
</div>
<div class="hr_20"></div>
<div class="comwidth_1">
<div class="jiesuan">发票信息</div>
<div class="information">
<input type="checkbox" name="checkbox" class="checkbox"> 需要发票<br>
<font style="color: red;">*</font> 发票类型 <select name="" id="">
<option value="1">商业零售发票</option>
<option value="2"></option>
</select><br>
<font style="color: red;">*</font> 发票抬头 <select name="" id="">
<option value="1">个人</option>
<option value="2"></option>
</select> <input type="text" class="info_2" value="阿斯顿"><br><div class="hr_10"></div>
<input type="submit" name="submit_1" value="保存" class="submitt1">
<input type="submit" name="submit_2" value="取消" class="submitt2">
</div>
<div class="hr_20"></div>
</div>
<div class="hr_20"></div>
<div class="comwidth_1">
<div class="jiesuan">送货清单</div>
<div class="information_1">
<div class="shopname">
<span class="shop_name">商品名称</span>
<span class="shop_namexx">单价</span>
<span class="shop_namexx">返现</span>
<span class="shop_namexx">数量</span>
<span class="shop_namexx">小计</span>
</div>
<div class="shopimg">
<div class="shop_img">
<img src="../img/bx.png" alt="">
<span class="shop_imgxx">Hisense 海信 BCD-202D 202升 三门冰箱 （银色）<br>
<i class="shop_zp">[赠品] 保鲜盒.抽真空保鲜盒-海信冰洗赠品</i></span>
</div>
<div class="shop_img1">
<span class="shop_namexx1">￥1459.00</span>
<span class="shop_namexx">￥0.00</span>
<span class="shop_namexx">1</span>
<span class="shop_namexx color_red">￥1459.00</span></div>
</div>
<div class="shop_talk">
<span class="talk_blue">若你对包裹有特殊要求，请在此留言</span><br>
<span class="talk_red"> 抱歉，以下商品暂时不能购买，已帮你在本次结算中剔除并扣减相应金额，你可以先购买其他商品：）</span>
<div class="shopimg">
<div class="shop_img">
<img src="../img/zhi.png" alt="">
<span class="shop_imgxx lh">清风 欧院系列 清香型 100抽3...<br>数量： 1件<br>￥4.90<i class="color_red i_wh">(无货)</i>
</span>
</div>
</div>
</div>
</div>
<div class="hr_20"></div>
<div class="comwidth_1">
<div class="jiesuan">订单结算</div>
<div class="dingdan">
<div class="dd_left"></div>
<div class="dd_jiesuan">
<span class="zj_je">总计 <strong class="red_strong">￥1459.00</strong></span><br><br>
<input type="submit" value="提交订单" class="tjdd">
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="">慕课简介</a><i>|</i>
<a href="">慕课公告</a><i>|</i>
<a href="">招纳贤士</a><i>|</i>
<a href="">联系我们</a><i>|</i>
客服热线：400-675-1234</p>
<p>Copyright © 2006 - 2014 慕课版权所有 京ICP备09037834号 京ICP证B1034-8373号 某市公安局XX分局备案编号：123456789123</p>
<p class="web">
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
<a href=""><img src="../img/web.png" alt="logo"></a>
</p>
</div>
</body>
</html>
7.登录页
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<link rel="stylesheet" type="text/css" href="../css/gongyong.css"/>
</head>
<body>
<div class="denglu">
<div class="comwidth">
<div class="denglu_dl">
<div class="dl_left fl">
<a href=""><img src="../img/logo.png" alt="慕课网"/></a></div>
<span class="huanying fl">欢迎登陆</span>
</div>
<div class="dl_form">
<div class="form_tab">
邮箱/用户名/已验证手机<br>
<input type="text" class="dl_yh" value="[email protected]"><br>
密码<br>
<input type="password" class="dl_ps"><br>
<input type="checkbox" class="dl_check"><span class="color_gray">自动登录</span>
<input type="checkbox" class="dl_check"><span class="color_gray">安全控件登录</span>
<a href="" class="dl_wjmm">忘记密码？</a>
<div class="hr_30"></div>
<input type="submit" name="submit" value="登录" class="dl_sub">
<div class="hr_30"></div>
<span class="dl_shuoming">使用合作网站账号登录：<br>
<i class="dlsm">QQ|网易|人人|奇虎360|开心| 豆瓣 |搜狐| 更多> </i>
</span>
<div class="hr_20"></div>
</div>
</div>
<button class="dl_btn">立即注册</button>
</div>
</div>
</body>
</html>
8.注册页
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<link rel="stylesheet" type="text/css" href="../css/gongyong.css"/>
</head>
<body>
<div class="denglu">
<div class="comwidth">
<div class="denglu_dl">
<div class="dl_left fl">
<a href=""><img src="../img/logo.png" alt="慕课网"/></a></div>
<span class="huanying fl">欢迎注册</span>
</div>
<div class="dl_form_zhuce">
<div class="form_tab_zhuce">
<div class="zhuce_ipt"><i class="color_red zc_red">*</i> 账户名：
<input type="text" class="dl_yh1" value="邮箱/用户名/手机号"><br></div>
<div class="zhuce_ipt"><i class="color_red zc_red">*</i> 请设置密码：
<input type="password" class="dl_ps1"><br></div>
<div class="zhuce_ipt"><i class="color_red zc_red">*</i> 请确认密码：
<input type="password" class="dl_ps1"><br></div>
<div class="zhuce_ipt"><i class="color_red zc_red">*</i> 邮箱：
<input type="password" class="dl_ps1"><br></div>
<div class="zhuce_ipt"><i class="color_red zc_red">*</i> 地址：
<input type="password" class="dl_ps2"><br></div>
<div class="hr_30"></div>
<div class="dl_zcty"><input type="checkbox"><i class="zc_ty">我已阅读并同意</i><i class="color_blue">《用户注册协议》</i></div>
<input type="submit" name="submit" value="注册" class="dl_subzc">
<div class="hr_40"></div>
</div>
</div>
</div>
</div>
</body>
</html>
通用css样式——main.css
/*公用*/
.comwidth {
width: 1000px;
margin: 0 auto;
}
#leftcont {
float: left;
}
#rightcont {float: right;color: #666666;}
.hide {display: none;}
.show {display: block;}
ul {margin: 0;padding: 0;}
/*topbar*/
.topbar {
height: 30px;
background-color: #f7f7f7;
line-height: 30px;
}
.collection {
background: url(../img/wujiaoxing.png) left center no-repeat;
padding-left: 18px;
font-weight: bold;
}
.topbar a:hover {
color: red;
}
/*logobar*/
.logobar {
background-color: #1d7ad9;
height: 86px;
line-height: 86px;
}
.logobar .logo {
padding-left: 40px;
padding-top: 12px;
width: 190px;
height: 74px;
}
.logobar .search {
margin-left: 110px;
width: 445px;
}
.search #input_search[type="search"] {
width: 368px;
background-color: white;
border: 0px solid white;
height: 36px;
text-indent: 1em;
color: green;
}
.search #input_btn[type="button"] {
width: 73px;
height: 36px;
background-color: #ff8c00;
border: 0px solid white;
margin-left: -4px;
cursor: pointer;
color: white;
}
.logobar .shopbar {
margin-right: 40px;
width: 145px;
height: 36px;
color: white;
margin-top: 24px;
background-color: #ff8c00;
display: inline;
}
.shopbar .shoptext {
width:75px;
height: 36px;
display: inline-block;
border: 2px solid orange;
padding-left: 5px;
border-width: 0px 2px 0px 0px;
}
.shopbar .shopnum {
width: 35px;
height: 36px;
color: white;
text-align: right;
display: block;
line-height: 36px;
background: url(../img/jiantou.png) 40px center no-repeat;
padding-right: 25px;
margin-left: -5px;
}
.shoptext > a {
color: white;
background: url(../img/gouwu-car.png) left center no-repeat;
background-size: 19px;
text-align: center;
width: 65px;
height: 36px;
display: block;
line-height: 36px;
padding-left: 15px;
font-size: 13px;
}
.shoptext > a:hover {
color: red;
}
/*navbar*/
.navbar {
height: 35px;
background: #1369c0;
color: white;
}
.navbar .shopclass{width: 190px;}
.shopclass h3 {width: 190px;height: 35px;font-size: 17px;text-align: center;font-weight: 120px;line-height: 35px;
background: url(../img/sanjiao.png) 155px center no-repeat;cursor: pointer;
}
/*导航*/
.navbar .nav {
width: 586px;
height: 35px;
margin: 0;
padding: 0;
line-height: 35px;
}
.nav,.shopclass {font-family: "微软雅黑";position: relative;}
.nav .hover {background-color: #4593fd;}
.nav li {float: left;}
.nav a {height: 35px;display: inline-block;padding: 0 29px;color: #fff;font-size: 14px;font-weight: 400;font-family: "微软雅黑";}
.nav a:hover {color: orange;background: white;}
.nav .active {background-color: #4593fd;}
/*商品列表*/
.shopclass_show {width:190px;background-color: #4593fd;position: absolute;left: 0;top: 35px;}
.shopclass_show ul {display: none;}
.shopclass_show ul.block {display: block;}
.shopclass_item{padding: 12px 10px;border-bottom: #3487e2 solid 1px;border-top: #5aa1fe solid 1px;}
.shopclass_item a {color: white;}
.shopclass_item a:hover,.shoplist_item1 dd a:hover {color: #90EE90;border-bottom: 1px solid orange;}
.shopclass_item dt {height: 24px;background: url(../img/l-jt.png) right center no-repeat;}
.shopclass_item .yuanquan {margin-left:5px;width: 48px;height: 20px;background: url(../img/yuanquan.png) left center no-repeat;display: inline-block;text-align: center;line-height: 20px;text-decoration: underline;}
.shopclass_item .b{font-family: "微软雅黑";font-size: 14px;font-weight: 100;}
/*shopclass 的 active状态*/
.shopclass_active {background: #fff;border-left: 1px solid #4593fd;}
.shopclass_active dt {background: none;}
.shopclass_active a {color: #000;}
.shopclass_active .yuanquan {text-decoration: none;color: #fff;display: inline-block;}
/*弹出的菜单*/
.shopclass_list {width: 584px;border: #ccc solid 1px;position: absolute;left: 190px;top: 35px;z-index: 10;background: #fff;}
.shopclass_list1 {width: 584px;border: #ccc solid 1px;position: absolute;left: 190px;top: 0px;z-index: 10;background: #fff;display: none;}
.shoplist_cont {padding: 0 20px;}
.shoplist_item,.shoplist_item1 {padding: 12px 0;border-bottom:#ccc solid 1px;}
.shoplist_item dt,.shoplist_item1 dt {color: #4b87d9;font-weight: bold;font-size: 13px;}
.shoplist_item dd {padding-left: 68px;margin-top: -21px;}
.shoplist_item1 dd {padding-left: 68px;margin-top: -28px;}
.shoplist_item dd a {margin-right: 10px;line-height: 28px;}
.shoplist_item1 dd a {margin-right: 10px;line-height: 28px;}
.shoplist_links {padding: 12px 0;}
.shoplist_links a {margin-right:10px;color: #fff;background-color: #2785e6;height: 26px;line-height: 26px;font-size: 13px;display: inline-block;padding: 0 14px 0 10px; }
.shoplist_links span {width: 11px;height: 7px;background: url(../img/jt-1.png) left center no-repeat;display: inline-block;margin-left: 7px;}
/*banner*/
.banner {margin-bottom: 15px;}
.banner_bar {float: right;position: relative;overflow: hidden;}
.imgbox {position: absolute;left: 0px;top: 0;}/*诺将left改成-810px，则是第二张图片*/
.imgbox li {float: left;}
.imgbox img {display: block;z-index: 5;}
.imgnum {position: absolute;left: 0;bottom: 15px;width:100%;text-align: center;}
.imgnum a {width: 20px;height: 5px;overflow: hidden;background-color: #fff;display: inline-block;margin: 0 3px;}
.imgnum .active {background-color: #ff7700;}
.banner_big,.banner_big img {width: 810px;height: 328px;}
.banner_big .imgbox {width: 1620px;height: 328px;}
.banner_sm,.banner_sm img {width: 194px;height: 400px;padding-right: 4px;}
.banner_sm .imgbox {width: 190px;height: 400px;}
/*商品标题*/
.shoptit {height: 44px;font-family: "微软雅黑";line-height: 44px;margin-bottom: 15px;}
.shoptit h3 {font-size: 24px;float: left;font-weight: normal;padding-left: 15px;}
.icon {width: 44px;height: 44px;display: inline-block;background: url("../img/tp.png") left center no-repeat;float: left;}
.more {float: right;font-family: "宋体";}
.more:hover {text-decoration: underline;}
/*商品列表*/
.shoplist {margin-bottom: 15px;width: 1000px;}
.shoplist .leftarea {width: 190px;}
.shoplist .rightarea {width: 808px; border: #999 solid 1px;border-bottom: #ff7201 solid 3.5px;height: 396px;border-width: 1px 1px 3.5px 0px;overflow: hidden;}
.shoplist .leftarea .banner_bar {width: 190px;height: 400px;}
/*商品列表右侧*/
.shop_item {width: 201px;height: 279px;border-right: #999 solid 1px;border-bottom: #999 solid 1px;text-align: center;font-family:"微软雅黑";}
.shop_item:last-child {width: 202px;height: 279px;border-right: #999 solid 0px;border-bottom: #999 solid 1px;text-align: center;font-family:"微软雅黑";}
.shop_img {height: 218px;}
.shop_img img {width: 140px;height: 218px;display: inline-block;}
.shop_item h3 ,.shopitem_text h3 {font-size: 16px;}
.shop_item p,.shopitem_text p {font-size: 14px;color: #ff7300;line-height: 21px;}
/*商品列表-小*/
.shopitem_sm {width: 201px;height: 116px;border-right: #999 solid 1px;text-align: center;font-family:"微软雅黑";}
.shopitem_sm:last-child {width: 202px;height: 116px;border-right: #999 solid 0px;text-align: center;font-family:"微软雅黑";}
.shopitem_smimg {width: 92px;height: 96px;text-align: center;float: left;line-height: 160px;}
.shopitem_smimg img {display: inline-block;}
.shopitem_text {padding-top: 28px;width: 100px;float: left;}
.shopitem_text p {font-size: 12px;}
.shopitem_text h3 {font-weight: normal;font-family: "微软雅黑";color: #181818;line-height: 30px;}
.img2 {line-height: 185px;}
.text2 p{color: black;font-weight: 400;font-size: 14px;}
/*底部*/
.footer {text-align: center;background-color: #d4d4d4;line-height: 24px;padding: 50px 0;margin-top: 30px;}
.footer i {font-style: normal;margin: 0 5px;}
.footer a {color: #000;}
.footer a:hover {color: #f60;}
.web {padding-top: 30px;}
.web img {margin: 0 12px;}
/*产品页*/
.products .leftarea {width: 185px;}
.products .leftarea_sx {width: 190px;}
.products .rightarea {width: 810px;}
.products .rightarea_sx {width: 800px;padding-left: 10px;}
.products .banner_bar {float: none;}
.products .item {width: 192.5px;}
.leftnav {background-color: #f3f3f3;border: 1px solid #d7d7d7;}
.nav_title {height: 34px;line-height: 34px;font-size: 14px;border-bottom: 1px solid #d7d7d7;text-align: center;}
.nav_cont,.nav_contsx {padding: 0 18px 4px;border-bottom: 1px dotted #d7d7d7;margin-bottom: -1px;}/*margin-bottom: -1px;用来消去最后一个的底部虚线*/
.nav_white {background: white;border-bottom: 0px solid #d7d7d7;}
.nav_cont h3 {font-size: 12px; height: 28px; line-height: 28px;}
.nav_contsx h3 {font-size: 12.4px;height: 28px; line-height: 28px;}
.navcont_list,.navcont_listsx {line-height: 24px;}
.navcont_list li {float: left; width: 50%;}
.navcont_listsx li {float: none;margin-left: 10px;}
.navcont_img {width: 190px;height: 395px;margin-top: 10px;}
.navcont_img img {width: 188px;height: 395px;overflow: hidden;}
/*标题*/
.hr_7 {height: 7px;overflow: hidden;}
.hr_20 {height: 20px;overflow: hidden;}
.hr_15 {height: 15px;overflow: hidden;}
.hr_60 {height: 60px;overflow: hidden;}
.hr_30 {height: 30px;overflow: hidden;}
.products_title {height: 34px;border-bottom: #cccccc solid 2px;}
.products_title h3 {width: 180px;border-bottom: #096dba solid 2px;height: 34px;line-height: 34px;text-indent: 9px;margin-bottom: -2px;position: relative;}
/*商品*/
.item {float: left;margin-bottom: 10px;padding-left: 10px;height: 265px;}
.img_item {height: 170px;}
.img_item img {height: 170px;}
.item p {line-height: 20px; font-size: 13px;padding-left: 8px;}
.item a {color: #000;font-size: 13px;}
.item a:hover {text-decoration: underline;}
.money,.money2 {color: #d4105a;font-weight: bold;padding-top: 10px;}
.money2 {padding-top: 20px;}
.item .stars {width: 13px;height: 12px;overflow: hidden;background: url("../img/h-sj.png") left top no-repeat;display: inline-block;}
/*筛选*/
.screening {border-bottom: 1px solid #ccc;font-family: "Verdana";}
.screening dt {width: 74px;line-height: 32px;text-align: right;float: left;margin-right: 42px;}
.limit,.limitsx {width: 60px;float: left;line-height: 32px;}
.limitsx {width: 70px;margin-right: 100px;}
.screening .active {background-color: #1d7ad9;padding: 2px; color: #fff;}
.screening a {padding: 2px;color: #1d7ad9;}
.screening .more_sx {color: black;background: url("../img/sx_sj.png") right center no-repeat;}
.screening_list {line-height: 32px;width: 500px;float: left;}
.screening_list li {width: 125px; float: left;}
.screening_listsx {line-height: 32px;width: 115px;float: left;}
.screening_list .sx_pm {float: left;width: 166px;}
.screening_listsx .sx_pmsx {float: left;width: 115px;text-align: center;}
.screen_more {border: #ccc 1px solid;height: 23px;line-height: 23px;margin-top: 4px;float: left;padding-right: 10px;padding-left: 10px;margin-left: 2px;margin-right: 10px;}
.screen_more a {background: url("../img/sx_sj.png") right center no-repeat;padding-right: 15px;}
/**/
.screen_cont {background: #f5f5f5;height: 32px;border: 1px #f5f5f5 solid;width: 800px;margin-top: 10px;font-size: 15px;line-height: 32px;}
.screen_cont select,span {margin-left: 8px;}
.screen_cont .shuju {margin-left: 360px;}
.red_shuju {color: red;font-weight: bold;display: inline-block;}
.blue_shuju {color: deepskyblue;}
.black {color: black;}
/*商品列表*/
.shoplb {width: 800px;}
.shoplb .shoplb_kuang {width: 720px;padding: 0 20px 0 60px;}
.shoplb .shoplb_list {width: 210px;height: 360px;float: left;margin-right: 30px;}
.shoplb .shoplb_list:last-child {width: 210px;height: 360px;float: left;}
.shoplb .shoplb_img,.shoplb .shoplb_img img{height: 260px;width: 210px;}
.shoplb .shoplb_cont {height: 100px;line-height: 18px;}
.shoplb_cont p {margin-top: 5px;}
.shoplb_cont .shop_gwc {border: 1px solid #c3d5e7;}
/*页码*/
.yema {width: 800px;height: 32px;float: left;}
.yema .yemafooter {height: 30px;line-height: 30px;display: inline-block;text-align: center;border: 1px solid #c3d5e7;padding: 0 12px;font-size: 15px;margin: 0 2px 0 0;cursor: pointer;}
.yema .yemafooter_2{background-color: #2266bb;color: white;}
.yema .yemafooter_3{width:15px;}
.yema .yemafoot {margin-left: 30px;font-size: 12px;line-height: 30px;}
.yema .yemafoot_1 {font-size: 12px;line-height: 30px;margin-left: -3px;}
.btn {width: 48px;height: 30px;background: none;background: #e8e8e8;border: 1px solid #c9c9c9;line-height: 30px;text-align: center;margin-left: 5px;}
/*商品介绍*/
.grey {background-color: #f0f0f0;}
.userposition {font-size: 0;font-family:Verdana;margin-top: 25px;margin-bottom: 15px;}
.userposition em,.userposition strong,.userposition a,.userposition span {font-size: 12px;}
.userposition em {font-style: normal;}
.userposition a:hover {text-decoration: underline;}
.description_info {background-color: #fff;}
.description {border: #ccc solid 1px;}
.description .leftarea {width: 309px;}
.description .rightarea {width: 688px;border-left: #ccc solid 1px;}
/*图片展示*/
.description_imgs .big {height: 340px;text-align: center;}
.des_smimg {padding-left: 1px;width: 265px;margin: 0 auto;}
.des_smimg li {float: left;text-align: center;margin-left: -1px;border: 1px #ccc solid;width: 52px;}
.des_smimg .active {border-color: #317ee7;position: relative;}
.des_cont {padding: 10px;}
.des_cont h3 {font-size: 16px;line-height: 22px;font-weight: bold;font-family: "微软雅黑";padding: 13px 20px;}
.des_cont .dl {margin-bottom: 8px;}
.des_position .dl {margin-bottom: 12px;}
.des_cont .dt {width: 75px;float: left;color: #666;text-indent: 17px;line-height: 30px;}
.des_cont .dd {padding-left: 75px;}
.des_money {font-size: 20px;color: #f30;}
.des_money em {font-style: normal;font-size: 12px;}
/*换购*/
.hg {line-height: 30px;color: #b3b3b3;display: inline-block;}
.hg_1 {line-height: 30px;color: #666;display: inline-block;}
.hg .hg_icon {width: 55px;height: 18px;display: inline-block;background: url("../img/h-jt.png") left top no-repeat;color: #fff;font-style: normal;text-indent: 15px;line-height: 18px;margin-right: 10px;}
/*送货*/
.des_position {background-color: #f2f2f2;margin-top: 10px;}
.dd select {height: 22px;border: 1px solid #b2b2b2;}
.dd .color,.dd .color_1 {display: inline-block;width: 80px;height: 30px;margin-right: 8px;border: 1px solid #b2b2b2;text-align: center;line-height: 30px;font-family: "微软雅黑";font-size: 14px;background: white;cursor: pointer;}
.ddl {margin-top: 40px;}
.dd .gg,.dd .gg_1,.dd .gg_2 {border: 1px solid #b2b2b2;padding: 4px 10px;text-align: center;display: inline-block;float: left;margin: -20px 10px 35px 0;background: white;}
.dd .color_1,.dd .gg_1 {border: 1px solid #317ee7;}
.dd .color_1 {margin-left: 0px;}
.dd .gg_2 {margin-bottom: 6px;}
/*数量*/
.des_number {border: #b2b2b2 solid 1px;height: 30px;width: 84px;background: white;text-align: center;line-height: 30px;}
.des_number .reduction,.des_number .plus {border-right: #b2b2b2 1px solid;height: 30px;width: 16px;background: #f3f3f3;}
.des_number .des_input {width: 50px;height: 30px;overflow: hidden;}
.des_number .plus {border-left: #b2b2b2 1px solid;border-right: #b2b2b2 0px solid;}
.hg_xg {font-size: 14px;color: #666;float: left;line-height: 30px;height: 30px;}
.hg_xg .hg_color {color: #fc7700;font-style: normal;}
/*已选择*/
.des_selelct {font-weight: bold;margin: 22px 0 12px;text-indent: 17px;color: #666;}
.des_selelct span {color: #0479c9;}
.shop_buy {margin-left: 35px;line-height: 90px;height: 90px;margin-top: 5px;}
.shopping_btn {display: inline-block;width: 184px;height: 90px;background: url("../img/buy1.png") left center no-repeat;margin: 0 40px;}
.line {width: 1px;height: 90px; overflow: hidden;background-color: #ccc;display: inline-block;margin: 0;}
.des_ts {margin: 18px 0;color: #999;display: inline-block;text-indent: 17px;}
/*产品介绍*/
.des_info .leftarea {width: 190px;}
.des_info .rightarea {width: 790px;}
.recommend {border: 1px solid #ccc;border-width: 4px 1px 1px 1px;border-top-color: #1d86cf;background: white;}
.re_1 {border-width: 1px 1px 1px 1px;border-top-color: #ccc;}
.recommend .tit {height: 39px;border-bottom: 1px solid #ccc;line-height: 39px;text-indent: 15px;font-size: 14px;background-color: #f3f3f3;}
.recommend .item {float: none;height: 205px;margin-bottom: 0;}
.recommend .img_item {text-align: center;padding: 14px 0 5px 0;width: 150px;height: 110px;}
.recommend .img_item1 {text-align: center;padding: 12px 0;width: 150px;height: 90px;}
.img_item img {width: 50px;height: 100px;text-align: left;}
.img_item1 img {width: 120px;height: 80px;text-align: left;}
.recommend .money {padding-top: 0;}
.item_cont p {line-height: 20px;}
.p_font a {font-family: "新宋体";text-align: left;color: #999;}
/*详细介绍*/
.des_infocontent {border: #ccc solid 1px;background-color: white;}
.des_tit,.des_tit1 {height: 39px;background-color: #f0f0f0;}
.des_tit li {float: left;width: 50%;background: url("../img/pj.png") 115px center no-repeat;line-height: 39px;font: 15px/39px "宋体";text-align: center;font-weight: bold;border-bottom: #ccc solid 1px;}
.des_tit li:first-child {color: white;background: url("../img/cpjs.png") 140px center no-repeat #0479ca;border-bottom: #0479ca solid 1px;}
.des_tit1 .t1 {text-align: center;float: left;background: url("../img/cpjs1.png") 140px center no-repeat;border-bottom: #ccc solid 1px;line-height: 39px;font: 15px/39px "宋体";width: 50%;font-weight: bold;}
.des_tit1 .t2 {float: left;color: white;width: 50%;background: url("../img/pj1.png") 115px center no-repeat #0479ca;line-height: 39px;font: 15px/39px "宋体";text-align: center;font-weight: bold;border-bottom: #0479ca solid 1px;}
.ad {padding: 30px 0 30px 60px;text-align: center;}
.info_tit {height: 26px;border-bottom: #ccc 2px solid;margin: 0 20px;}
.info_tit h3 {float: left;font-size: 16px;color: #2357a5;border-bottom: #2357a5 solid 2px;height: 26px;position: relative;padding: 0 10px 0 0;}
.info_tit h4 {font-size: 12px;line-height: 26px;float: left;margin-left: 15px;color: #666;}
.info_evaluate {margin: 15px 20px;color: #666;line-height: 20px;overflow: hidden;}
.info_evaluate img {padding-left: 7px;}
/*商品评价*/
.shopdes_tit {line-height: 38px;height: 38px;font-size: 14px;color: #656565;padding-left: 15px;}
.score_box {padding-left: 10px;}
.score {font-family: "微软雅黑";float: left;}
.score em {font-size: 18px;color: #65657d;font-style: normal;}
.score span {font-size: 50px;color: #ff8f00;}
.score_speed {float: left;width: 470px;height: 16px;background-color: #bdbdbd;color: #fff;line-height: 16px;margin-top: 12px;position: relative;margin-left: 10px;}
.score_speed_text {height: 100%;overflow: hidden;}
.score_speed_text li {float: left;width: 85px;}
.score_speed_text li:first-child {width: 90px;padding-left: 24px;}
.score_text {color: #b3b3b3;font-size: 12px;}
.score_num {position: absolute;left: 430px;top: -20px;width: 25px;height: 14px;background-color: #7f7f7f;text-align: center;}
.score_num i {border-width: 4px;border-style: dashed dashed dashed dashed;border-color: #7f7f7f transparent transparent transparent;width: 0;height: 0;position: absolute;left: 8px;top: 14px;}
.hr_100 {height: 100px;overflow: hidden;}
/*满意切换*/
.hr_kuang {height: 36px;background-color: #f2f2f2;margin-bottom: 20px;position: relative;}
.hr_kuang .new {left: 745px;top: -8px;position: absolute;}
.review {line-height: 36px;height: 36px;padding-left: 20px;}
.review li {float: left;height: 36px;margin-right: 40px;}
.review li a {display: inline-block;height: 36px;padding: 0 5px;}
.review .active {color: #317de6;font-weight: bold;border-bottom: solid 2px #317de6;height: 34px;}
.review_sort {padding: 5px 5px 0 0;}
.review_sort a {display: inline-block;line-height: 22px;border: solid 1px #ccc;height: 22px;padding: 0 20px 0 6px;border-width: 1px 0 0 2px; background: url("../img/xbjt.png")58px center no-repeat;}
/*会员评价*/
.members {width: 100%;height: 105px;margin-bottom: 40px;}
.members_left {margin-left: 40px;height: 105px;width: 70px;text-align: center;line-height: 20px;}
.members_left .hy_mc {display: inline-block;margin: 0 auto;color: #9898a7;}
.members_right {margin-left: 65px;height: 105px;width: 600px;}
.members_right .point_date {height: 30px;width: 100%;line-height: 30px;}
.point_date .re_points {font-size: 14px;font-family: "微软雅黑";font-weight: bold;width: 400px;}
.point_date .date {font-size: 10px;color: #ababab;width: 200px;text-align: center;display: block;margin: 0;}
.re_views {height: 75px;width: 160px;line-height: 30px;}
.re_viewspan {padding: 20px 0;flex-size: 14px;color: #ababab;margin: 0;}
.cd {margin-right: 5px;display: inline-block;margin: 0;flex-size: 15px;color: #317de6;}
.hr_10 {height: 10px;overflow: hidden;}
.hr_40 {height: 40px;overflow: hidden;}
.hr_15 {height: 15px;overflow: hidden;}
/*页码*/
.page {padding-left: 290px;height: 26px;line-height: 24px;text-align: center;}
.page .page_gg {border: 1px solid #d3d3d3;display: inline-block;height: 24px;font-size: 15px;margin:0 1px;}
.page .page_num {width: 22px;}
.page_num1 {color: #d9d9d9;width: 60px;}
.page .active {color: #085c9b;}
.page_num2 {color: red;width: 22px;}
.page_num2_bgcolor {color: red;width: 24px;background: #e9e9e9;}
.page_num_color {color: #085c9b;width: 24px;}
.page .page_numb {display: inline-block;font-size: 14px;text-align: left;margin:0px;}
.page_num3 {color: #085c9b;width: 40px;}
.pagep {color: #666666;display: inline-block;font-size: 15px;}
.pagep .page_gg {border: 1px solid #d3d3d3;display: inline-block;height: 24px;font-size: 15px;width: 26px;margin: 0 5px;}
.queding {border: 1px solid #707070;border-radius: 3px;width: 40px;height: 24px;background: #d2d2d2;margin-left: 5px;}
/*商品咨询*/
.cst_infocontent {border: none;background-color: white;}
.consult {height: 33px;line-height: 32px;color: #076ebb;font-family: "宋体";width: 790px;}
.consult_tit {width: 130px;height: 32px;border: 1px solid #076ebb;font-size: 15px;border-width: 1px 1px 0 1px;text-align: center;float: left;}
.consult_right{float: right;width: 658px;height: 32px;border: 1px solid #076ebb;border-width: 0 0 1px 0;}
.consult_right .consult_jy {display: inline-block;font-size: 13px;height: 32px;margin-left: 570px;}
.cst_instruct {margin: 10px 10px 30px 20px;background:#f3f3f3;width: 760px;height: 50px;}
.cst_instruct .instruct {margin: 8px 15px 12px 15px; font-size: 12px;color: #777777;height: 30px;width: 740px;display: inline-block;line-height: 20px;}
/*商品回复*/
.instruct_hf {margin: 10px 0 30px 0;background:#f3f3f3;width: 540px;height: 50px;display: inline-block;line-height: 50px;padding-left: 20px;color: #777777;}
.hf_color {color: black;font-size: 13px;}
/*信息*/
.shopbar_1 {width: 400px;height: 45px;background: url("../img/gw-lc.png") left center no-repeat;margin-top: 20px;margin-left: 340px;}
.comwidth_1 {width: 998px;border: 1px solid #ccc;margin: 0 auto;background: white;}
.jiesuan {height: 36px;width: 985px;background: #f4f4f4;padding-left: 15px;line-height: 36px;color: #444;font-size: 15px;}
.information,.information_1 {margin-left: 32px;line-height: 38px;padding-top: 15px;}
.information input {font-size: 12px;height: 22px;border: 1px solid #666;line-height: 22px;}
.info_1 {width: 395px;color: #888;text-indent: 1em;}
.info_2 {color: #888;text-indent: 1em;}
.info_3,.info_3_1 {text-indent: 0;text-align: left;width: 60px;}
.info_3_1 {width: 98px;}
.information >.submitt {background: #4391fc;border: 1px solid #4391fc;width: 115px;color: white;text-align: center;height: 30px;line-height: 30px;font-size: 13px;}
.information >.submitt1 {background: #4391fc;border: 1px solid #4391fc;width: 65px;color: white;text-align: center;height: 30px;line-height: 30px;font-size: 13px;margin-left: 16px;}
.information >.submitt2 {background: #666;border: 1px solid #f5f5f5;width: 65px;color: white;text-align: center;height: 30px;line-height: 30px;font-size: 13px;margin-left: 12px;}
.radio,.checkbox {vertical-align:middle; margin-top:-2px; margin-bottom:1px; }
.pay {height: 30px;width: 50px;font-size: 12px;line-height: 30px;display: inline-block;}
.pay1 {height: 30px;width: 340px;font-size: 12px;line-height: 30px;display: inline-block;background: url("../img/wx.png") left center no-repeat;padding-left: 25px;}
.pay2 {height: 30px;width: 340px;font-size: 12px;line-height: 20px;display: inline-block;}
/*商品信息*/
.information_1 {margin: 0;}
.shopname {border-bottom: 1px solid #e6e6e6;height: 36px;}
.shop_name {width: 438px;height: 36px;display: inline-block;padding-left: 32px;margin: 0;line-height: 30px;}
.shop_namexx,.shop_namexx1 {width: 132px;height: 30px;line-height: 30px;display: inline-block;margin: 0 0 0 -4px;padding: 0;}
.shopimg {border-bottom: 1px solid #e6e6e6;height: 100px;}
.shop_img {width: 438px;padding-left: 32px;margin: 0;height: 100px;float: left;}
.shop_img img {width: 80px;height: 100px;float: left;display: inline-block;}
.shop_imgxx {width: 350px;height: 100px;display: inline-block;float: left;margin: 0;padding-left: 8px;}
.lh {line-height: 20px;padding-top: 16px;color: #797878;}
.shop_zp {color: #444;font-style: normal;display: inline-block;margin-top: 20px;}
.shop_img1 {height: 100px;width: 528px;float: left;}
.shop_namexx1 {margin: 0;}
.color_red {color: red;}
.i_wh {font-style: normal;}
.talk_blue {color: #3377ff;display: inline-block;padding-left: 32px;}
.talk_red {color: red;display: inline-block;background: url("../img/jg.png") 30px center no-repeat;padding-left: 50px;}
.dingdan {height: 145px;}
.dd_left {width: 770px;height: 145px;float: left;}
.dd_jiesuan {width: 228px;height: 79px;float: left;padding: 33px 0;text-align: center;display: inline-block;}
.dd_jiesuan .zj_je {color: #929292;}
.dd_jiesuan .red_strong {color: red;font-weight: bold;font-size: 24px;}
.tjdd {background: red;color: white;text-align: center;display: inline-block;width: 165px;height: 34px;;border: 0px solid red;}
/*登录*/
.denglu {background: #1d7ad9;width: 100%;height: 86px;text-align: center;}
.denglu_dl {width: 470px;height: 86px;margin: 0 auto;}
.dl_left {width: 120px;height: 86px;}
.dl_left img {width: 120px;height: 60px;margin: 13px 0;}
.huanying {width: 320px;height: 86px;font-size: 20px;color: white;font-family: "宋体";font-weight: bold;display: block;line-height: 100px;margin-left: 30px;text-align: left;}
.dl_form,.dl_form_zhuce {width: 466px;border: 1px solid #ccc;margin: 8px auto;}
.form_tab {width: 380px;text-align: left;padding: 30px 0 0 86px;color: #ccc;}
.dl_yh,.dl_ps,.dl_sub,.dl_subzc {width: 308px;height: 30px;border: 1px solid #ccc;margin: 4px 0 10px 0;color: #333;text-indent: 4px;}
.dl_yh1,.dl_ps1,.dl_ps2 {width: 278px;height: 30px;border: 1px solid #ccc;margin: 4px 0 10px 0;color: #ccc;text-indent: 4px;}
.dl_yh,.dl_yh1 {background: url("../img/yh.png") right center no-repeat;}
.dl_ps,.dl_ps1 {background: url("../img/ps.png") right center no-repeat;}
.dl_check {display: inline-block;padding-left: 5px;color: #333;margin: -2px 4px 1px 4px;vertical-align:middle;}
.color_gray {color: #333;margin: 0;}
.dl_wjmm {display: inline-block;color: #333;}
.dl_sub,.dl_subzc {border-radius: 4px;background: #d0d0d0;color: #606060;font-size: 16px;font-weight: bold;font-family: "黑体";}
.dlsm {color: #666;font-style: normal;padding-left: 4px;}
.dl_btn {background: #7ebc56;color: white;font-size: 16px;text-align: center;height: 28px;width: 110px;margin: 0;border: 1px solid #7ebc56;margin-top: -20px;margin-left: 240px;}
/*注册*/
.dl_form_zhuce {width: 636px;}
.form_tab_zhuce {width: 500px;text-align: left;padding: 50px 0 0 136px;color: #ccc;}
.zhuce_ipt {width: 376px;height: 66px;line-height: 60px;text-align: right;}
.dl_zcty {width: 200px;margin-left: 86px;height: 30px;margin: 4px 0 10px 0;color: #333;padding-left: 86px;}
.color_blue {color: #1d7ad9;}
.zc_red {vertical-align:middle;padding-top: 2px;}
.dl_subzc {margin-left: 86px;width: 278px;height: 36px;}
/*js操作,不在一起，只能使用js来调用显示与隐藏*/
js代码（外部js，用于首页.html）
// JavaScript Document
function Navbar() {
var dhl=document.getElementById('mulu');
dhl.style.display="block";
}
function Navnone() {
var dhln=document.getElementById('mulu');
dhln.style.display="none";
}
function setTab(m,n){ //虽然该m可以知道是一个常数1，但是在函数中参数是不能已知的，故只能写成变量m，但是"menus"+m <=> "menus1"
var tli=document.getElementById("nav"+m).getElementsByTagName("li");//控制悬浮标题的显示与遮盖
var mli=document.getElementById("main"+m).getElementsByTagName("ul");//控制悬浮标题时，对应内容的显示与遮盖
for(i=0;i<tli.length;i++){
tli[i].className=(i==n)?"hover":"";
mli[i].style.display=(i==n)?"block":"none";
}
}
备注：
图片资源可以自己上慕课网搜索下载对应的psd文件
就首页而言，我添加了一些js代码，实现了一些效果，当然，其他页面的效果你可以自己去实现。
仅用于学习参考，切勿…