HTML源码
1. index.html
2.register.html
3.login.html
4.list.html
5.details.html
6.settlement.html
7.submit.html
css源代码
1.base.css
2.common.css
3.index.css
4.register.css
5.login.css
6.list.css
7.detial.css
8.settlement.css
9.submit.css
HTML源码
1. index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>优质购物中心-正品低价，质量保证，及时配送，购物方便！</title> <!</title> <!-- 网站说明 --> <meta name="description" content="京东JD.COM-专业综合网购商城，为您提供正品低价购物选择，优质便捷的服务体验。来自世界各地数十万品牌的商品，包括家电、手机、电脑、服装、家居、母婴、美容、个人护理、食品、新鲜食品等丰富类别，以满足各种购物需求。" /> <!-- 关键字 --> <meta name="Keywords" content="网购、网购、网购、家电、手机、电脑、服装、家居、母婴、美容、个人护理、食品、生鲜食品、京东" /> <!-- favicon图标 --> <link rel="shortcut icon" href="favicon.ico" /> <!-- 初始化样式 --> <link rel="stylesheet" href="css/base.css"> <!-- 公共样式 --> <link rel="stylesheet" href="css/common.css"> <!-- 主页专有风格 --> <link rel="stylesheet" href="css/index.css"> <style> .nav .dropdown { float: left; width: 210px; height: 45px; background-color: #b1191a; } </style> </head> <body> <!-- 快速导航模块 --> <section class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>欢迎品优购！ </li> <li> <a href="login.html">请登录</a> <a href="register.html" class="style_red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li></li> <li class="arrow-icon"><a href="#">我的品优购</a></li> <li></li> <li><a href="#">品优购会员</a></li> <li></li> <li><a href="#">企业采购</a></li> <li></li> <li class="arrow-icon"><a href="#">关注品优购</a></li> <li></li> <li class="arrow-icon"><a href="#">客户服务</a></li> <li></li> <li class="arrow-icon"><a href="#">网站导航</a></li> </ul> </div> </div> </section> <!-- header 头部模块 --> <header class="header w"> <!-- logo 模块 --> <div class="logo"> <h1> <a href="index.html" title="品优购商城">品优购商城</a> </h1> </div> <!-- search 模块 --> <div class="search"> <input type="search" name="" id="" placeholder="语言开发"> <button>搜索</button> </div> <!-- hotwords 模块 --> <div class="hotwords"> <a href="#" class="style_red">优惠购首发</a> <a href="#">亿元优惠</a> <a href="#">9.9元团购</a> <a href="#">美满99减30</a> < href="#">办公用品</a>
<a href="#">电脑</a>
<a href="#">通信</a>
</div>
<!-- 购物车模块 -->
<div href="#" class="shopcar">
<a href="settlement.html">我的购物车</a>
<i class="count">8</i>
</div>
</header>
<!-- nav 导航模块 -->
<nav class="nav">
<div class="w">
<div class="dropdown">
<div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="list.html">手机</a>、<a href="#">数码</a>、<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>
<li><a href="#">图书、音像、电子书</a> </li>
<li><a href="#">彩票、旅行、充值、票务</a> </li>
<li><a href="#">理财、众筹、白条、保险</a> </li>
</a>
</li>
</ul>
</div>
</div>
<div class="navitems">
<ul>
<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>
</nav>
<!-- 侧栏模块 -->
<div class="sidebar">
<ul>
<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>
<!-- main 首页专有模块 -->
<div class="w">
<div class="main">
<div class="focus">
<a href="#" class="arrow-l"><</a>
<a href="#" class="arrow-r">></a>
<ul>
<li>
<img src="upload/focus1.png" alt="">
</li>
</ul>
<ol class="circle">
<li></li>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div class="newsflash">
<div class="news">
<div class="news-hd">
<h5>品优购快报</h5>
<a href="#" class="more">更多</a>
</div>
<div class="news-bd">
<ul>
<li><a href="#"><label>[特惠]</label> 备战开学季 全民半价购数码</a></li>
<li><a href="#"><label>[公告]</label> 品优稳占家电网购六成份额</a></li>
<li><a href="#"><label>[特惠]</label> 百元中秋全品类礼券限量领</a></li>
<li><a href="#"><label>[公告]</label> 上品优生鲜 享阳澄湖大闸蟹</a></li>
<li><a href="#"><label>[特惠]</label> 每日享折扣品优品质游</a></li>
</ul>
</div>
</div>
<div class="lifeservice">
<ul>
<li>
<i class="tb_1"></i>
<p>话费</p>
</li>
<li>
<div class="triangle1"></div>
<div class="triangle2"></div>
<h6>减</h6>
<i class="tb_2"></i>
<p>机票</p>
</li>
<li>
<i class="tb_3"></i>
<p>电影票</p>
</li>
<li>
<i class="tb_4"></i>
<p>游戏</p>
</li>
<li>
<i class="tb_5"></i>
<p>彩票</p>
</li>
<li>
<i class="tb_6"></i>
<p>加油卡</p>
</li>
<li>
<i class="tb_7"></i>
<p>酒店</p>
</li>
<li>
<i class="tb_8"></i>
<p>火车票</p>
</li>
<li>
<i class="tb_9"></i>
<p>众筹</p>
</li>
<li>
<i class="tb_10"></i>
<p>理财</p>
</li>
<li>
<i class="tb_11"></i>
<p>礼品卡</p>
</li>
<li>
<i class="tb_12"></i>
<p>白条</p>
</li>
</ul>
</div>
<div class="bargain">
<img src="upload/bargain.png" alt="">
</div>
</div>
</div>
</div>
<!-- recommend 推荐模块 -->
<div class="w recom">
<div class="recom_hd">
<img src="images/recom.png" alt="">
</div>
<div class="recom_bd">
<ul>
<li>
<a href="#"><img src="upload/recom_01.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/recom_02.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/recom_03.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/recom_04.jpg" alt=""></a>
</li>
</ul>
</div>
</div>
<!-- guess 猜你喜欢 -->
<div class="w guess">
<div class="guess_hd">
<h4>猜你喜欢</h4>
<a href=""><span>换一批</span></a>
</div>
<div class="guess_bd">
<ul>
<li>
<a href="#">
<img src="upload/guess_01.png" alt="">
<div class="innner">
阳光美包新款单肩包女<br>包时尚子母包四件套女
<span class="gue_price">￥<i class="price">116.00</i></span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="upload/guess_02.png" alt="">
<div class="innner">
爱仕达 30CM炒锅不粘<br>锅NWG8330E电磁炉炒
<span class="gue_price">￥<i class="price">99.00</i></span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="upload/guess_03.png" alt="">
<div class="innner">
捷波朗<br>（jabra）BOOSI劲步
<span class="gue_price">￥<i class="price">245.00</i></span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="upload/guess_04.png" alt="">
<div class="innner">
欧普<br>JYLZ08面板灯平板灯铝
<span class="gue_price">￥<i class="price">238.00</i></span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="upload/guess_05.png" alt="">
<div class="innner">
三星<br>（G5500）移动联
<span class="gue_price">￥<i class="price">649.00</i></span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="upload/guess_06.png" alt="">
<div class="innner">
韩国所望<br>紧致湿润精华露400ml
<span class="gue_price">￥<i class="price">649.00</i></span>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- fun 有趣 -->
<div class="fun">
<div class="py-container">
<div class="title">
<h4>传智播客•有趣区</h4>
</div>
<div class="Interest">
<!-- <span class="x-line"></span> -->
<div class="Interest-conver">
<img src="upload/interest01.jpg" />
</div>
<div class="Interest-conver-split">
<h5>好东西</h5>
<img src="upload/interest02.jpg" />
<img src="upload/interest03.jpg" />
</div>
<div class="Interest-conver-split blockgary">
<h5>品牌街</h5>
<div class="split-bt">
<img src="upload/interest04.jpg" />
</div>
<div class="x-img fl">
<img src="upload/interest05.jpg" />
</div>
<div class="x-img fr">
<img src="upload/interest06.jpg" />
</div>
</div>
<div class="Interest-conver-split brandArea">
<span class="brand-yline"></span>
<ul class="yui3-g brand-list">
<li>
<img src="upload/brand01.jpg" />
<img src="upload/brand02.jpg" />
<img src="upload/brand03.jpg" />
<img src="upload/brand04.jpg" />
<img src="upload/brand05.jpg" />
<img src="upload/brand06.jpg" />
<img src="upload/brand07.jpg" />
</li>
<li>
<img src="upload/brand08.jpg" />
<img src="upload/brand09.jpg" />
<img src="upload/brand10.jpg" />
<img src="upload/brand11.jpg" />
<img src="upload/brand12.jpg" />
<img src="upload/brand13.jpg" />
<img src="upload/brand14.jpg" />
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- floor 楼层模块 -->
<div class="floor">
<!-- 1楼：家用电器 -->
<div class="w jiadian">
<div class="box_hd">
<h3>家用电器</h3>
<div class="tab_list">
<ul>
<li><a id="hot" href="" class="style_red">热门</a></li>
<li>|</li>
<li><a href="product.html">大家电</a></li>
<li>|</li>
<li><a href="product.html">生活电器</a></li>
<li>|</li>
<li><a href="product.html">厨房电器</a></li>
<li>|</li>
<li><a href="product.html">个护健康</a></li>
<li>|</li>
<li><a href="product.html">应季电器</a></li>
<li>|</li>
<li><a href="product.html">空气/净水</a></li>
<li>|</li>
<li><a href="product.html">新奇特</a></li>
<li>|</li>
<li><a href="product.html">高端电器</a></li>
</ul>
</div>
</div>
<div class="box_bd">
<div class="tab_content">
<div class="tab_list_item">
<div class="col_210">
<ul>
<li><a href="#">节能补贴</a></li>
<li><a href="#">4K电视</a></li>
<li><a href="#">空气净化器</a></li>
<li><a href="#">IH电饭煲</a></li>
<li><a href="#">滚筒洗衣机</a></li>
<li><a href="#">电热水器</a></li>
</ul>
<a href="#">
<img src="upload/floor-1-1.png" alt="">
</a>
</div>
<div class="col_329">
<a href="">
<img src="upload/floor-1-b01.png" alt="">
</a>
</div>
<div class="col_221">
<a href="#" class="bb">
<img src="upload/floor-1-2.png" alt="">
</a>
<a href="#">
<img src="upload/floor-1-3.png" alt="">
</a>
</div>
<div class="col_221">
<a href="#">
<img src="upload/floor-1-4.png" alt="">
</a>
</div>
<div class="col_219">
<a href="#" class="bb">
<img src="upload/floor-1-5.png" alt="">
</a>
<a href="#">
<img src="upload/floor-1-6.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 2楼：手机通讯 -->
<div class="w phone">
<div class="box_hd">
<h3>手机通讯</h3>
<div class="tab_list">
<ul>
<li><a id="hot" href="" class="style_red">热门</a></li>
<li>|</li>
<li><a href="product.html">品质优选</a></li>
<li>|</li>
<li><a href="product.html">新机尝鲜</a></li>
<li>|</li>
<li><a href="product.html">高性价比</a></li>
<li>|</li>
<li><a href="product.html">口碑推荐</a></li>
<li>|</li>
<li><a href="product.html">合约机</a></li>
<li>|</li>
<li><a href="product.html">手机卡</a></li>
<li>|</li>
<li><a href="product.html">店铺精选</a></li>
<li>|</li>
<li><a href="product.html">手机配件</a></li>
</ul>
</div>
</div>
<div class="box_bd">
<div class="tab_content">
<div class="tab_list_item">
<div class="col_210">
<ul>
<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>
<a href="#">
<img src="upload/floor-2-1.jpg" alt="">
</a>
</div>
<div class="col_329">
<a href="">
<img src="upload/floor-2-b01.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="#" class="bb">
<img src="upload/floor-2-2.jpg" alt="">
</a>
<a href="#">
<img src="upload/floor-2-3.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="#">
<img src="upload/floor-2-4.jpg" alt="">
</a>
</div>
<div class="col_219">
<a href="#" class="bb">
<img src="upload/floor-2-5.jpg" alt="">
</a>
<a href="#">
<img src="upload/floor-2-6.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="dibulogo">
<img src="upload/logo-dibu1.jpg" alt="">
</div>
<!-- 3楼：电脑办公 -->
<div class="w diannao">
<div class="box_hd">
<h3>电脑办公</h3>
<div class="tab_list">
<ul>
<li><a id="hot" href="" class="style_red">热门</a></li>
<li>|</li>
<li><a href="product.html">电脑/平板</a></li>
<li>|</li>
<li><a href="product.html">潮流影音</a></li>
<li>|</li>
<li><a href="product.html">智能/外设</a></li>
<li>|</li>
<li><a href="product.html">DIY硬件</a></li>
<li>|</li>
<li><a href="product.html">电竞游戏</a></li>
<li>|</li>
<li><a href="product.html">办公/网络</a></li>
<li>|</li>
<li><a href="product.html">文具电教</a></li>
<li>|</li>
<li><a href="product.html">精选配件</a></li>
</ul>
</div>
</div>
<div class="box_bd">
<div class="tab_content">
<div class="tab_list_item">
<div class="col_210">
<ul>
<li><a href="#">SSD硬盘</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>
<a href="#">
<img src="upload/floor-3-1.jpg" alt="">
</a>
</div>
<div class="col_329">
<a href="">
<img src="upload/floor-3-b01.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="#" class="bb">
<img src="upload/floor-3-2.jpg" alt="">
</a>
<a href="#">
<img src="upload/floor-2-3.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="#">
<img src="upload/floor-3-4.jpg" alt="">
</a>
</div>
<div class="col_219">
<a href="#" class="bb">
<img src="upload/floor-3-5.jpg" alt="">
</a>
<a href="#">
<img src="upload/floor-3-6.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="dibulogo">
<img src="upload/logo-dibu2.jpg" alt="">
</div>
<!-- 4楼：热门专区 -->
<div class="w remen">
<div class="box_rhd">
<h3>热门专区</h3>
</div>
<div class="box_rd">
<div class="tab_content">
<div class="tab_list_item1">
<div class="col_211">
<a href="#">
<img src="upload/floor-4-1.jpg" alt="">
</a>
</div>
<div class="col_330">
<a href="#" class="bb">
<img src="upload/floor-4-2.jpg" alt="">
</a>
<a href="#">
<img src="upload/floor-4-3.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="#" class="bb">
<img src="upload/floor-4-4.jpg" alt="">
</a>
<a href="#">
<img src="upload/floor-4-5.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="#">
<img src="upload/floor-4-6.jpg" alt="">
</a>
<a href="#">
<img src="upload/floor-4-7.jpg" alt="">
</a>
</div>
<div class="col_229">
<a href="#" class="bb">
<img src="upload/floor-4-8.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- footer 底部模块 -->
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5 class="h5_1"></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5 class="h5_2"></h5>
<div class="service_txt">
<h4>急速物流</h4>
<p>急速物流，急速送达</p>
</div>
</li>
<li>
<h5 class="h5_3"></h5>
<div class="service_txt">
<h4>无忧售后</h4>
<p>7天无理由退换货</p>
</div>
</li>
<li>
<h5 class="h5_4"></h5>
<div class="service_txt">
<h4>特色服务</h4>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<h5 class="h5_5"></h5>
<div class="service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd><a href="#">上门自提</a></dd>
<dd><a href="#">211限时达</a></dd>
<dd><a href="#">配送服务查询</a></dd>
<dd><a href="#">配送费收取标准</a></dd>
<dd><a href="#">海外配送</a></dd>
</dl>
<dl>
<dt>支付方式</dt>
<dd><a href="#">货到付款</a></dd>
<dd><a href="#">在线支付</a></dd>
<dd><a href="#">分期付款</a></dd>
<dd><a href="#">邮局汇款</a></dd>
<dd><a href="#">公司转账</a></dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">价格保护</a></dd>
<dd><a href="#">退款说明</a></dd>
<dd><a href="#">返修/退换货</a></dd>
<dd><a href="#">取消订单</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="#">夺宝岛</a></dd>
<dd><a href="#">DIY装机</a></dd>
<dd><a href="#">延保服务</a></dd>
<dd><a href="#">品优购E卡</a></dd>
<dd><a href="#">品优购通信</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd>
<img src="images/wx_cz.jpg" alt=""> 品优购客户端
</dd>
</dl>
</div>
<div class="mod_copyright">
<div class="links">
<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="#">English Site</a> |
<a href="#">Contact U</a>
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
</div>
</div>
</div>
</footer>
</body>
</html>2.register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人注册</title>
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 初始化样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入注册页面样式 -->
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<div class="w">
<header>
<a href="index.html"><img src="images/logo.png" alt=""></a>
</header>
<div class="registerarea">
<h3>
注册新用户
<i class="login">
我有账号，
<a href="login.html" class="style-red">登录</a>
</i>
</h3>
<div class="reg-form">
<form action="">
<ul>
<li>
<label for="">手机号：</label>
<input type="text" class="inp">
<span class="error">
<i class="error_icon"></i>
手机号码格式不正确，请从新输入
</span>
</li>
<li>
<label for="">短信验证码：</label>
<input type="text" class="inp">
<!-- <span class="success">
<i class="success_icon"></i>
验证码输入正确
</span> -->
</li>
<li>
<label for="">登录密码：</label>
<input type="password" class="inp">
<span class="error">
<i class="error_icon"></i>
密码不少于六位数，请重新输入
</span>
</li>
<li class="safe">
安全程度：<em class="r">弱</em> <em class="z">中</em> <em class="q">强</em>
</li>
<li>
<label for="">确认密码：</label>
<input type="password" class="inp">
<span class="error">
<i class="error_icon"></i>
密码不一致，请重新输入
</span>
</li>
<li class="agree">
<input type="checkbox" name="" id="" checked="checked"> 同意协议并注册
<a href="#">《知果果用户协议》</a>
</li>
<li>
<input type="submit" value="完成注册" class="btn">
</li>
</ul>
</form>
</div>
</div>
<footer>
<div class="mod_copyright">
<div class="links">
<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="#">English Site</a> | <a href="#">Contact U</a>
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
</div>
</div>
</footer>
</div>
</body>
</html>3.login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人登录</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/register.css">
<!-- 最后的bd底部部分用到register.css(注册页面重新写的) -->
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="w">
<div class="register-hd hd-restart">
<img src="upload/logo.png" alt="">
</div>
</div>
<div class="login-md">
<div class="w">
<div class="login-md-hd fl">
<img src="upload/电商-登录_03.jpg" alt="">
</div>
<div class="login-md-bd fl">
<div class="login-md-bd-top">
<div class="top-left">扫描登陆</div>
<div class="top-right">账户登陆</div>
</div>
<div class="huangse-wenzi">
公共场所不建议自动登录，以免账号丢失
</div>
<div class="login-main">
<ul>
<li>
<span class="login-main-icon icon-person_search"></span>
<input type="text" value="邮箱/用户名/手机号">
</li>
<!-- input与文字图标都开启了定位给背景色，必须给li高，否则挤在一起 -->
<li>
<span class="login-main-icon icon-phonelink_lock"></span>
<input type="text" value="请输入密码">
</li>
</ul>
</div>
<div class="bottom-last2">
<div class="bottom-last2-left">
<input type="checkbox" name="" id="">
<span>自动登录</span>
<span class="bottom-last2-right-wz">忘记密码？</span>
</div>
</div>
<div class="bottom-end1">
<a href="">登 录</a>
</div>
<div class="login-items">
<ul>
<li>
<a href="" class="login-item1"></a>
</li>
<li>
<a href="" class="login-item2"></a>
</li>
<li>
<a href="" class="login-item3"></a>
</li>
<li>
<a href="" class="login-item4"></a>
</li>
<li class="login-item5">
<a href=""> 立即注册 </a>
</li>
</ul>
<span></span>
</div>
</div>
</div>
</div>
<div class="w">
<div class="register-bd">
<!-- footer部分 start -->
<div class="mod_copyright">
<div class="links">
<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="#">English Site</a> |
<a href="#">Contact U</a>
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
</div>
</div>
<!-- footer部分 end -->
</div>
</div>
</body>
</html>4.list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品列表-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站说明 -->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
<!-- 关键字 -->
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 初始化样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 公共样式 -->
<link rel="stylesheet" href="css/common.css">
<!-- 列表页专有样式 -->
<link rel="stylesheet" href="css/list.css">
</head>
<body>
<!-- 快捷导航模块 -->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！ </li>
<li>
<a href="#">请登录</a> <a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li></li>
<li class="arrow-icon"><a href="#">我的品优购</a></li>
<li></li>
<li><a href="#">品优购会员</a></li>
<li></li>
<li><a href="#">企业采购</a></li>
<li></li>
<li class="arrow-icon"><a href="#">关注品优购</a></li>
<li></li>
<li class="arrow-icon"><a href="#">客户服务</a></li>
<li></li>
<li class="arrow-icon"><a href="#">网站导航</a></li>
</ul>
</div>
</div>
</section>
<!-- header 头部模块 -->
<header class="header w">
<!-- logo 模块 -->
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
</h1>
</div>
<!-- 秒杀模块 -->
<div class="sk">
<img src="images/sk.png" alt="">
</div>
<!-- search 模块 -->
<div class="search">
<input type="search" name="" id="" placeholder="语言开发">
<button>搜索</button>
</div>
<!-- hotwords 模块 -->
<div class="hotwords">
<a href="#" class="style_red">品优购首发</a>
<a href="#">亿元优惠</a>
<a href="#">9.9元团购</a>
<a href="#">美满99减30</a>
<a href="#">办公用品</a>
<a href="#">电脑</a>
<a href="#">通信</a>
</div>
<!-- 购物车模块 -->
<div href="#" class="shopcar">
<a href="settlement.html">我的购物车</a>
<i class="count">8</i>
</div>
</header>
<!-- nav 导航模块 -->
<nav class="nav">
<div class="w">
<div class="sk_list">
<ul>
<li><a href="#">品优秒杀</a></li>
<li><a href="#">即将告罄</a></li>
<li><a href="#">超值低价</a></li>
</ul>
</div>
<div class="sk_con">
<ul>
<li><a href="#">女装</a></li>
<li><a href="#" class="style_red">女鞋</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>
</nav>
<!-- main 主体模块 -->
<div class="w sk_container">
<div class="sk_hd">
<img src="upload/bg_03.png" alt="">
</div>
<!-- 商品items部分 start-->
<div class="items ">
<div class="w">
<ul>
<li>
<div class="items-hd">
<div class="items-hd-img">
<a href="details.html">
<img src="upload/list_01.jpg" alt="">
</a>
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/list_01.jpg" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/list_01.jpg" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/list_01.jpg" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/list_01.jpg" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>