HTML5期末大作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<title>门店惊喜--金银猫CSmall</title>
<meta name="keywords" content="{$metaKeywords}" />
<meta name="description" content="{$metaDesc}" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Bookmark" href="favicon.ico">
<link rel="Shortcut Icon" href="favicon.ico">
<script src="http://js.spcrm.com/jQuery-1.7.1.min.js" type="text/javascript"></script>
<script charset="utf-8" src="http://js.spcrm.com/jquery.qrcode.min.js" type="text/javascript"></script>
<script charset="utf-8" src="../api/smallslider/rs/js/jquery.smallslider.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="../css/common.css">
<link type="text/css" rel="stylesheet" href="../css/raise.css">
<link type="text/css" rel="stylesheet" href="../api/smallslider/rs/css/smallslider.css">
</head>
<body>
<div class="topbar">
<div class="wrap iconlist">
<div class="memberbox width-6">嗨！欢迎来到金猫银猫 <a href="#">请登录</a> <a href="#">免费注册</a> </div>
<div class="width-6">
<a href="#"><i class="icon_heart icon_topbar"></i>我关注的品牌</a>
<a href="#">金猫银猫会员</a>
<a href="#"><i class="icon_shopcart icon_topbar"></i>购物车<span id="shopcart_count">0</span>件</a>
<span class="fav">收藏夹<i class="icon icon_dropdown"></i></span> |
<span><i class="icon_phone icon_topbar"></i>手机版</span>
<span class="fav">商家支持<i class="icon icon_dropdown"></i></span>
<span class="fav"><i class="icon_shopcart icon_topbar"></i>网站导航<i class="icon icon_dropdown"></i></span>
</div>
</div>
</div>
<div id="header">
<div class="wrap">
<div class="logobar width-3">
<a href="../" title="返回首页" class="logo_raise "></a>
</div>
<div id="searchbar" class="width-6">
<form method="get" action="/product/">
<input type="text" name="keywords" class="txt" value="" placeholder="站内搜索"/>
<input type="submit" class="bt" value="搜索"/>
<div class="clear"></div>
</form>
</div>
</div>
</div>
<div id="nav" >
<ul class="wrap">
<li class="width-2"><a href="#" class="pronava">商品服务分类</a>
<div class="nav1">
<dl>
<dt class=" hidden-md">
<i class="icon_nav icon_1"></i>
<a href="#">钻石首饰</a>
</dt>
<dd class=" hidden-sm">
<a href="#">手链</a>
<a href="#">戒指</a>
<a href="#">项链/吊坠</a>
</dd>
<dt class=" hidden-md">
<i class="icon_nav icon_1"></i>
<a href="#">钻石首饰</a>
</dt>
<dd class=" hidden-sm">
<a href="#">手链</a>
<a href="#">戒指</a>
<a href="#">项链/吊坠</a>
</dd>
<dt class=" hidden-md">
<i class="icon_nav icon_1"></i>
<a href="#">钻石首饰</a>
</dt>
<dd class=" hidden-sm">
<a href="#">手链</a>
<a href="#">戒指</a>
<a href="#">项链/吊坠</a>
</dd>
<dt class=" hidden-md">
<i class="icon_nav icon_1"></i>
<a href="#">钻石首饰</a>
</dt>
<dd class=" hidden-sm">
<a href="#">手链</a>
<a href="#">戒指</a>
<a href="#">项链/吊坠</a>
</dd>
<dt class=" hidden-md">
<i class="icon_nav icon_1"></i>
<a href="#">钻石首饰</a>
</dt>
<dd class=" hidden-sm">
<a href="#">手链</a>
<a href="#">戒指</a>
<a href="#">项链/吊坠</a>
</dd>
</dl>
</div>
</li>
<li class="width-1"><a href="brand.html" class="nava">品牌街</a></li>
<li class="width-1"><a href="member.html" class="nava">会员尊享</a></li>
<li class="width-1"><a href="offline.html" class="nava">门店惊喜</a></li>
<li class="width-1"><a href="raise.html" class="nava">珠宝众筹</a></li>
<li class="width-1"><a href="gold.html" class="nava">金银投资</a></li>
<li class="width-1"><a href="design.html" class="nava">设计定制</a></li>
<li class="width-1"><a href="vip.html" class="nava">搭配资讯</a></li>
</ul>
<div class="clear"></div>
</div>
<div style="clear:both"></div>
<div id="mainer">
<div class="wrap">
<div id="flashbox" class="smallslider">
<ul>
<li style="background: url(../pic/raise_06.jpg) center">
<a href="#" target="_blank">
</a></li>
</ul>
</div>
<div class="small_box">
<a><img src="../pic/raise_08.jpg"></a>
<a><img src="../pic/raise_10.jpg"></a>
</div>
</div>
<div class="clear"></div>
<div class="wrap">
<div class="raise_left">
<div class=" hang hang1 box">
<div class="t">精品项目</div>
<div class="c">
<a class="pic"><img src="../pic/raise_18.jpg"></a>
<div class="info">
<h2>天然淡水珍珠</h2>
<p class="desc">淡水珍珠是指江、河中产出的珍珠。
我国的淡水珠主要养殖区在诸暨、常德、苏州、江西、湖北、安徽，
产淡水珍珠的目前多采用三角帆蚌。</p>
<div class="line"></div>
<span class="hightlight">预付定金 ￥270</span> 已有<font color="red">70</font>人购买
<div class="pricelist">
<ul>
<li>原价<br>￥3321</li>
<li>满20人<br>￥429</li>
<li>满50人<br>￥389</li>
<li>满100人<br>￥369</li>
</ul>
<div class="clear"></div>
</div>
还剩： 11天01时55分30秒 <a class="redbtn">参与购买</a>
</div>
<div class="clear"></div>
</div>
<div class="c">
<a class="pic"><img src="../pic/raise_18.jpg"></a>
<div class="info">
<h2>天然淡水珍珠</h2>
<p class="desc">淡水珍珠是指江、河中产出的珍珠。
我国的淡水珠主要养殖区在诸暨、常德、苏州、江西、湖北、安徽，
产淡水珍珠的目前多采用三角帆蚌。</p>
<div class="line"></div>
<span class="hightlight">预付定金 ￥270</span> 已有<font color="red">70</font>人购买
<div class="pricelist">
<ul>
<li>原价<br>￥3321</li>
<li>满20人<br>￥429</li>
<li>满50人<br>￥389</li>
<li>满100人<br>￥369</li>
</ul>
<div class="clear"></div>
</div>
还剩： 11天01时55分30秒 <a class="redbtn">参与购买</a>
</div>
<div class="clear"></div>
</div>
<div class="c">
<a class="pic"><img src="../pic/raise_18.jpg"></a>
<div class="info">
<h2>天然淡水珍珠</h2>
<p class="desc">淡水珍珠是指江、河中产出的珍珠。
我国的淡水珠主要养殖区在诸暨、常德、苏州、江西、湖北、安徽，
产淡水珍珠的目前多采用三角帆蚌。</p>
<div class="line"></div>
<span class="hightlight">预付定金 ￥270</span> 已有<font color="red">70</font>人购买
<div class="pricelist">
<ul>
<li>原价<br>￥3321</li>
<li>满20人<br>￥429</li>
<li>满50人<br>￥389</li>
<li>满100人<br>￥369</li>
</ul>
<div class="clear"></div>
</div>
还剩： 11天01时55分30秒 <a class="redbtn">参与购买</a>
</div>
<div class="clear"></div>
</div>
<div class="c">
<a class="pic"><img src="../pic/raise_18.jpg"></a>
<div class="info">
<h2>天然淡水珍珠</h2>
<p class="desc">淡水珍珠是指江、河中产出的珍珠。
我国的淡水珠主要养殖区在诸暨、常德、苏州、江西、湖北、安徽，
产淡水珍珠的目前多采用三角帆蚌。</p>
<div class="line"></div>
<span class="hightlight">预付定金 ￥270</span> 已有<font color="red">70</font>人购买
<div class="pricelist">
<ul>
<li>原价<br>￥3321</li>
<li>满20人<br>￥429</li>
<li>满50人<br>￥389</li>
<li>满100人<br>￥369</li>
</ul>
<div class="clear"></div>
</div>
还剩： 11天01时55分30秒 <a class="redbtn">参与购买</a>
</div>
<div class="clear"></div>
</div>
<div class="c">
<a class="pic"><img src="../pic/raise_18.jpg"></a>
<div class="info">
<h2>天然淡水珍珠</h2>
<p class="desc">淡水珍珠是指江、河中产出的珍珠。
我国的淡水珠主要养殖区在诸暨、常德、苏州、江西、湖北、安徽，
产淡水珍珠的目前多采用三角帆蚌。</p>
<div class="line"></div>
<span class="hightlight">预付定金 ￥270</span> 已有<font color="red">70</font>人购买
<div class="pricelist">
<ul>
<li>原价<br>￥3321</li>
<li>满20人<br>￥429</li>
<li>满50人<br>￥389</li>
<li>满100人<br>￥369</li>
</ul>
<div class="clear"></div>
</div>
还剩： 11天01时55分30秒 <a class="redbtn">参与购买</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="raise_right">
<div class="hang hang2 box">
<div class="t">中国白银集体众筹开始</div>
<div class="c">有创意!有项目!缺资金?众筹网来帮你,发起你的项目,展示你的创意,获得大家的支持!也可以支持别人项目获得丰厚回报!</div>
</div>
<div class=" hang hang3">
<a href="#"><img src="../pic/raise_22.jpg"></a>
<a href="#"><img src="../pic/raise_24.jpg"></a>
<a href="#"><img src="../pic/raise_26.jpg"></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer" >
<div class="wrap">
<div class="line"></div>
<div class="help">
<dl class="width-2">
<dt>购物指南</dt>
<dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
<dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
</dl>
<dl class="width-2">
<dt>购物保障</dt>
<dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
<dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
</dl>
<dl class="width-2">
<dt>售后服务</dt>
<dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
<dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
</dl>
<dl class="width-2">
<dt>关于我们</dt>
<dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
<dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
</dl>
<dl class="width-4">
<dt>手机上金猫银猫</dt>
<dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
<dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
</dl>
<div style="clear:both"></div>
</div>
<!-- help -->
</div>
<!-- copyright -->
<div class="copyright">
<p class="copy wrap">
<a href="#">关于金猫银猫</a>
<a href="#">帮助中心</a>
<a href="#">诚聘英才</a>
<a href="#">联系我们</a>
<a href="#">网站合作</a>
<a href="#">法律声明</a>
<a href="#">廉政举报</a><br>
<a href="#">京东商城</a> |
<a href="#">中国白银网</a> |
<a href="#">央视网</a> |
<a href="#">1号店</a> |
<a href="#">京东商城</a> |
<a href="#">中国白银网</a> |
<a href="#">央视网</a> |
<a href="#">1号店</a> <br>
<a href="http://www.csmall.com/help.do?page=help_help_icp" target="_blank" >中国增值电信业务经营许可证 B2-20140169号</a>
<span style="line-height:1.5;"> | ©2014深圳银瑞吉文化发展有限公司 All Rights Reserved | 国家信息产业部粤ICP备14018586号</span>
<span class="powerby">技术支持：<a href="http://www.jentian.com/" target="_blank" title="广东井田云科技有限公司">井田云</a>
<br>
<a href="http://si.trustutn.org/info?sn=131141223010513021410" target="_blank"><img src="http://v.trustutn.org/images/cert/bottom_small_img.png" alt="实名认证" title="实名认证"></a>
</span>
</p>
</div>
<div class="clear"></div>
</div>
<script>
(function () {
$('.nav_list dl:odd').addClass("odd");
$('#flashbox').smallslider();
})();
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
