页面框架：
1.首页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>品优购商城-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站的说明 -->
<meta name="description"
content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
<!-- 网站的关键词 -->
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜" />
<!-- 引入favion图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入初始化样式 -->
<link rel="stylesheet" type="text/css" href="css/base.css" />
<!-- 引入公共样式属性 -->
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<!-- 快捷导航栏区域star -->
<!-- 定义一个区域为快捷导航栏 -->
<section class="shotcult">
<!-- 导航栏里放版心盒子 -->
<div class="w">
<!-- 版心盒子里放一个做盒子，一个右盒子 -->
<div class="fl">
<!-- 左侧盒子里ul下放两个li,实现两部分分离，注册和免费登录通常是一起的所以放在一个li里面 -->
<ul>
<li>品优购欢迎您！ </li>
<li>
<a href="#">请登录</a>
<!-- 免费注册红色字体实现调用公共类 -->
<a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<!-- 右侧盒子里放13个li -->
<ul>
<li>我的订单</li>
<li></li>
<!-- 定义一个公共的类，通过after伪元素添加一个箭头图标 -->
<li class="arrow-icon">我的品优购</li>
<li></li>
<li>品优购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arrow-icon">关注品优购</li>
<li></li>
<li class="arrow-icon">客户服务</li>
<li></li>
<li class="arrow-icon">网站导航</li>
</ul>
</div>
</div>
</section>
<!-- 快捷导航栏区域end -->
<!-- header区域star -->
<!-- 定义一个大盒子，版心居中对齐 -->
<div class="header w">
<!-- logo模块-->
<div class="logo">
<!-- 给a一个title属性，鼠标放到logo上可以看到提示文字 -->
<h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
</div>
<!-- search模块 -->
<!-- 定义一个search的大盒子 -->
<div class="search">
<!-- search里面放一个input搜索功能的表单和一个button按钮 -->
<!-- input表单里面有文字，通过placeholder属性来实现 -->
<input type="search" name="" id="" value="" placeholder="语言开发" />
<button type="button">搜索</button>
<!-- 去除表单的边框和button的边框，在设定的基础样式表里面修改 -->
</div>
<!-- 搜索热词模块 -->
<!-- 创建一个hotwords的大盒子，然后里面的每个热词通过a链接实现 -->
<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>
<!-- 购物车模块 -->
<!-- 先创建一个盒子,里面放文字,通过before和after伪元素加入两个字体图标 -->
<div class="shopcar">我的购物车
<!-- 定义一个li的盒子 -->
<li class="cont">8</li>
</div>
</div>
<!-- header区域end -->
<!-- nav导航模块开始 -->
<!-- 布局先定义一个通栏的nav大盒子，给下边框 -->
<div class="nav">
<!-- 然后定义一个版心的盒子 -->
<div class="w">
<!-- 版心的盒子里面左右各放一个盒子 -->
<div class="dropdown">
<!-- 全部商品分类和下面的家用电器等等是一个组合，应该放在一起写 -->
<!-- 所以在dropdown的盒子里面放一个dt标题盒子，加一个dd分类描述的盒子 -->
<div class="dt">全部商品分类</div>
<div class="dd">
<!-- dd盒子里放ul下的li盒子，每个li盒子里放链接，因为点击有跳转 -->
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="list.html">手机</a>、<a href="#">数码</a>、<a href="#">通信</a></li>
<li><a href="#">电脑</a>、<a href="#">办公</a></li>
<li><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a></li>
<li><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">童装</a>、<a href="#">内衣</a></li>
<li><a href="#">个户化妆</a>、<a href="#">清洁用品</a>、<a href="#">宠物</a></li>
<li><a href="#">鞋靴</a>、<a href="#">箱包</a>、<a href="#">珠宝</a>、<a href="#">奢侈品</a></li>
<li><a href="#">运动户外</a>、<a href="#">钟表</a></li>
<li><a href="#">汽车</a>、<a href="#">汽车用品</a></li>
<li><a href="#">母婴</a>、<a href="#">玩具乐器</a></li>
<li><a href="#">食品</a>、<a href="#">酒类</a>、<a href="#">生鲜</a>、<a href="#">特产</a></li>
<li><a href="#">医药保健</a></li>
<li><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">电子书</a></li>
<li><a href="#">彩票</a>、<a href="#">旅行</a>、<a href="#">充值</a>、<a href="#">票务</a></li>
<li><a href="#">理财</a>、<a href="#">众筹</a>、<a href="#">白条</a>、<a href="#">保险</a></li>
</ul>
</div>
</div>
<div class="navitems">
<!-- 侧边导航栏可以用li+a来实现 -->
<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>
</div>
<!-- nav导航模块结束 -->
<!-- 首页main模块制作开始 -->
<!-- 首先定义一个版心的盒子 -->
<div class="w">
<!-- 版心的盒子里放一个main盒子 -->
<div class="main">
<!-- main盒子里左侧放焦点图，右侧盒子放快报 -->
<div class="focus">
<!-- 焦点图，轮播图放ul里的li里面，方便后面设置滚动效果 -->
<ul>
<li><img src="upload/轮播图.png"></li>
</ul>
</div>
<div class="newsflash">
<!-- 快爆部分分3个模块组成 -->
<div class="news">
<!-- 分为上下两部分，hd和bd组成，hd部分放一个h5的盒子，右侧放一个链接，一个左浮，一个右浮 -->
<div class="news-hd">
<h5>品优购快报</h5>
<a href="#" class="more">更多</a>
</div>
<div class="news-bd">
<ul>
<li><a href="#"><strong>[特惠]</strong>备战开学季开爱卡看看看看 全民半价购数码</a></li>
</ul>
<ul>
<li><a href="#"><strong>[公告]</strong>品优稳占家电网购六成份额</a></li>
</ul>
<ul>
<li><a href="#"><strong>[特惠]</strong>百元中秋全品类礼券限量领</a></li>
</ul>
<ul>
<li><a href="#"><strong>[公告]</strong>上品优生鲜 享阳澄湖大闸蟹</a></li>
</ul>
<ul>
<li><a href="#"><strong>[特惠]</strong>每日享折扣品优品质游</a></li>
</ul>
</div>
</div>
<div class="lifeservice">
<!-- 生活信息模块用12个li，加浮动来实现 -->
<ul>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="one"></i>
<p>话费</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="two">
<!-- i盒子里放一个盒子，用于放减图标 -->
<span class="jian">减</span>
</i>
<p>机票</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="three"></i>
<p>电影票</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="fore"></i>
<p>游戏</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="five"></i>
<p>彩票</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="six"></i>
<p>加油卡</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="seven"></i>
<p>酒店</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="eight"></i>
<p>火车票</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="nine"></i>
<p>众筹</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="ten"></i>
<p>理财</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="eleven"></i>
<p>礼品卡</p>
</li>
<li>
<!-- 里面用一个盒子装精灵图，放一个p写文字 -->
<i class="twe"></i>
<p>百条</p>
</li>
</ul>
</div>
<div class="bargain">
<img src="upload/快爆图.png">
</div>
</div>
</div>
</div>
<!-- 首页main模块制作结束 -->
<!-- 精品推荐模块开始 -->
<!-- 定义一个大盒子recom,里面放左右两个盒子，recom_hd 和 recom_bd -->
<div class="recom w">
<div class="recom_hd"><img src="images/recom.png"></div>
<div class="recom_bd">
<!-- 左侧盒子用4个li加浮动实现,每个li插入图片 -->
<ul>
<li><img src="images/优质好货.png"></li>
<li><img src="images/0点上新.png"></li>
<li><img src="images/优质好货.png"></li>
<li><img src="images/0点上新.png"></li>
</ul>
</div>
</div>
<!-- 精品推荐模块结束 -->
<!-- 猜你喜欢部分开始 -->
<!-- 定义一个like的大盒子，盒子分上下两部分，上面标题，下面内容 -->
<div class="like w">
<div class="like_hd">
<h3>猜你喜欢</h3>
<div class="change">
<p>换一批</p>
<span></span>
</div>
</div>
<div class="like_bd">
<ul>
<li>
<i><img src="images/bao.png"></i>
<p>阳光美包新款单肩包女
包时尚子母包四件套女</p>
<h4>¥116.00</h4>
</li>
<li>
<i><img src="images/guo.png"></i>
<p>爱仕达 30CM炒锅不粘
锅NWG8330E电磁炉炒</p>
<h4>¥99.00</h4>
</li>
<li>
<i><img src="images/suo.png"></i>
<p>捷波朗 <br>
（jabra）BOOSI劲步</p>
<h4>¥245.00</h4>
</li>
<li>
<i><img src="images/deng.png"></i>
<p>欧普 <br>
JYLZ08面板灯平板灯铝</p>
<h4>¥238.00</h4>
</li>
<li>
<i><img src="images/shouji.png"></i>
<p>三星<br>
（G5500）移动联</p>
<h4>¥649.00</h4>
</li>
<li>
<i><img src="images/xifa.png"></i>
<p>韩国所望<br>
紧致湿润精华露400ml</p>
<h4>¥649.00</h4>
</li>
</ul>
</div>
</div>
<!-- 猜你喜欢部分结束 -->
<!-- 楼层区域开始 ,定义楼层区域，不给高度，让里面的内容自然撑开盒子-->
<div class="floor">
<!-- 第一部分：家用电器部分,定义一个家电的盒子，分为上下两部分：头部和主体，套用版心 -->
<div class="jiadian w">
<div class="box_hd">
<!-- 头部区域分两部分，左侧h3左浮动，右侧table_list盒子里放ul，li里面放a，table_list右浮动 -->
<h3>家用电器</h3>
<div class="table_list">
<ul>
<!-- 热门调用公共类，红色样式 -->
<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>
<li><a href="#">高端电器</a></li>
</ul>
</div>
</div>
<div class="box_bd">
<!-- 主体里面放一个内容的盒子，因为内容会随着每个li的不同而切换，所以这里嵌套了多个盒子 -->
<div class="table_content">
<!-- 主体里面的内容，随着table_list里面每个选项li的不同而不同 ,这里定义一个table_list_item的盒子，盒子里的内容和table_list每个li对应-->
<div class="table_list_item">
<!-- 盒子里面划分为5部分，可用5个div或者5个ul>li -->
<div class="col_210">
<!-- 第一个盒子里面分上下两部分，上面用ul>li>a来实现，下方插入一张图片 -->
<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="images/三星电视.png"></a>
</div>
<div class="col_329">
<!-- 第二个盒子里放一个a里面放一张图 -->
<a href="#"><img src="images/水壶.png"></a>
</div>
<div class="col_221">
<a href="#" class="bb"><img src="images/微波炉.png"></a>
<a href="#" class="bb"><img src="images/乐视.png"></a>
</div>
<div class="col_221">
<a href="#" class="bb"><img src="images/电视.png"></a>
</div>
<div class="col_219">
<a href="#" class="bb"><img src="images/空调.png"></a>
<a href="#" class="bb"><img src="images/风扇.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 二楼手机通讯区域开始 -->
<div class="shouji w">
<div class="box_hd">
<!-- 头部区域分两部分，左侧h3左浮动，右侧table_list盒子里放ul，li里面放a，table_list右浮动 -->
<h3>手机通讯</h3>
<div class="table_list">
<ul>
<!-- 热门调用公共类，红色样式 -->
<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>
<li><a href="#">手机配件</a></li>
</ul>
</div>
</div>
<div class="box_bd">
<!-- 主体里面放一个内容的盒子，因为内容会随着每个li的不同而切换，所以这里嵌套了多个盒子 -->
<div class="table_content">
<!-- 主体里面的内容，随着table_list里面每个选项li的不同而不同 ,这里定义一个table_list_item的盒子，盒子里的内容和table_list每个li对应-->
<div class="table_list_item">
<!-- 盒子里面划分为5部分，可用5个div或者5个ul>li -->
<div class="col_210">
<!-- 第一个盒子里面分上下两部分，上面用ul>li>a来实现，下方插入一张图片 -->
<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="images/三星电视.png"></a>
</div>
<div class="col_329">
<!-- 第二个盒子里放一个a里面放一张图 -->
<a href="#"><img src="images/水壶.png"></a>
</div>
<div class="col_221">
<a href="#" class="bb"><img src="images/微波炉.png"></a>
<a href="#" class="bb"><img src="images/乐视.png"></a>
</div>
<div class="col_221">
<a href="#" class="bb"><img src="images/电视.png"></a>
</div>
<div class="col_219">
<a href="#" class="bb"><img src="images/空调.png"></a>
<a href="#" class="bb"><img src="images/风扇.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 二楼手机通讯区域结束 -->
<!-- 三楼电脑办公区域开始 -->
<div class="diannao w">
<div class="box_hd">
<!-- 头部区域分两部分，左侧h3左浮动，右侧table_list盒子里放ul，li里面放a，table_list右浮动 -->
<h3>电脑办公</h3>
<div class="table_list">
<ul>
<!-- 热门调用公共类，红色样式 -->
<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>
<li><a href="#">手机配件</a></li>
</ul>
</div>
</div>
<div class="box_bd">
<!-- 主体里面放一个内容的盒子，因为内容会随着每个li的不同而切换，所以这里嵌套了多个盒子 -->
<div class="table_content">
<!-- 主体里面的内容，随着table_list里面每个选项li的不同而不同 ,这里定义一个table_list_item的盒子，盒子里的内容和table_list每个li对应-->
<div class="table_list_item">
<!-- 盒子里面划分为5部分，可用5个div或者5个ul>li -->
<div class="col_210">
<!-- 第一个盒子里面分上下两部分，上面用ul>li>a来实现，下方插入一张图片 -->
<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="images/三星电视.png"></a>
</div>
<div class="col_329">
<!-- 第二个盒子里放一个a里面放一张图 -->
<a href="#"><img src="images/水壶.png"></a>
</div>
<div class="col_221">
<a href="#" class="bb"><img src="images/微波炉.png"></a>
<a href="#" class="bb"><img src="images/乐视.png"></a>
</div>
<div class="col_221">
<a href="#" class="bb"><img src="images/电视.png"></a>
</div>
<div class="col_219">
<a href="#" class="bb"><img src="images/空调.png"></a>
<a href="#" class="bb"><img src="images/风扇.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 三楼电脑办公区域结束 -->
<!-- 楼层区域结束 -->
<!-- 底部公共样式开始 -->
<!-- 先做一个通栏的大盒子，给高度和背景色 -->
<div class="footer">
<!-- footer盒子里放一个版心盒子 -->
<div class="w">
<!-- 版心里面第一行模块盒子 -->
<div class="mod_service">
<!-- 第一布局盒子里，通过4个li划分为4部分 -->
<ul>
<!-- 每个li里面，h5盒子里面放图标，定义一个新的盒子，里面放标题和段落文本 -->
<!-- 图标引入通过精灵图来实现 -->
<li>
<h5 class="one"></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5 class="two"></h5>
<div class="service_txt">
<h4>极速物流</h4>
<p>急速物流，急速送达</p>
</div>
</li>
<li>
<h5 class="three"></h5>
<div class="service_txt">
<h4>无忧售后</h4>
<p>7天无理由退换货</p>
</div>
</li>
<li>
<h5 class="fore"></h5>
<div class="service_txt">
<h4>特色服务</h4>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<h5 class="five"></h5>
<div class="service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<!-- 底部盒子第二模块 ，首先放一个大盒子，取高度和底部边框-->
<div class="mod_help">
<!-- 盒子里的6个模块用dl普通列表里面的dt上层项目和dd下层项目来实现 -->
<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="#">会员介绍</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>
<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>
<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>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<img src="./images/wx_cz.jpg">
品优购客户端
</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="#">品优购公益</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>
</div>
<!-- 底部公共样式结束 -->
</body>
</html>
2.列表页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>列表页-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站的说明 -->
<meta name="description"
content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
<!-- 网站的关键词 -->
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜" />
<!-- 引入favion图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入初始化样式 -->
<link rel="stylesheet" type="text/css" href="css/base.css" />
<!-- 引入公共样式属性 -->
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/list.css" />
</head>
</html>
<body>
<!-- 快捷导航栏区域star -->
<!-- 定义一个区域为快捷导航栏 -->
<section class="shotcult">
<!-- 导航栏里放版心盒子 -->
<div class="w">
<!-- 版心盒子里放一个做盒子，一个右盒子 -->
<div class="fl">
<!-- 左侧盒子里ul下放两个li,实现两部分分离，注册和免费登录通常是一起的所以放在一个li里面 -->
<ul>
<li>品优购欢迎您！ </li>
<li>
<a href="#">请登录</a>
<!-- 免费注册红色字体实现调用公共类 -->
<a href="#" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<!-- 右侧盒子里放13个li -->
<ul>
<li>我的订单</li>
<li></li>
<!-- 定义一个公共的类，通过after伪元素添加一个箭头图标 -->
<li class="arrow-icon">我的品优购</li>
<li></li>
<li>品优购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arrow-icon">关注品优购</li>
<li></li>
<li class="arrow-icon">客户服务</li>
<li></li>
<li class="arrow-icon">网站导航</li>
</ul>
</div>
</div>
</section>
<!-- 快捷导航栏区域end -->
<!-- header区域star -->
<!-- 定义一个大盒子，版心居中对齐 -->
<div class="header w">
<!-- logo模块-->
<div class="logo">
<!-- 给a一个title属性，鼠标放到logo上可以看到提示文字 -->
<h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
</div>
<!-- 在header盒子里面定义一个秒杀sk的盒子，里面放一张图片 -->
<div class="sk">
<img src="upload/秒杀拷贝.png">
</div>
<!-- search模块 -->
<!-- 定义一个search的大盒子 -->
<div class="search">
<!-- search里面放一个input搜索功能的表单和一个button按钮 -->
<!-- input表单里面有文字，通过placeholder属性来实现 -->
<input type="search" name="" id="" value="" placeholder="语言开发" />
<button type="button">搜索</button>
<!-- 去除表单的边框和button的边框，在设定的基础样式表里面修改 -->
</div>
<!-- 搜索热词模块 -->
<!-- 创建一个hotwords的大盒子，然后里面的每个热词通过a链接实现 -->
<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>
<!-- 购物车模块 -->
<!-- 先创建一个盒子,里面放文字,通过before和after伪元素加入两个字体图标 -->
<div class="shopcar">我的购物车
<!-- 定义一个li的盒子 -->
<li class="cont">8</li>
</div>
</div>
<!-- header区域end -->
<!-- nav导航模块开始 -->
<!-- 布局先定义一个通栏的nav大盒子，给下边框 -->
<div class="nav">
<!-- 然后定义一个版心的盒子 -->
<div class="w">
<!-- 版心的盒子里面左右各放一个盒子 -->
<!-- 布局同主页布局类似，只是里面的内容不同。可以套用主页布局，将导航栏分为左右两部分，重新定义盒子，左侧为sk_list 右边sk_con -->
<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>
</div>
<!-- nav导航模块结束 -->
<!-- 列表页主体部分开始 -->
<!-- 主体部分用一个大盒子sk_container包裹，分为上下两部分，上面sk_hd,下面sk_bd,上面插入一张图片，下面通过ul li来实现 -->
<div class="sk_container w">
<div class="sk_hd">
<img src="upload/女鞋.png">
</div>
<div class="sk_bd">
<ul>
<li>
<img src="upload/苹果手机.png">
<p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
<h3>¥6088 <i>￥6988</i></h3>
<div class="shouchu">已售87%
<div class="bar">
<div class="sons">
</div>
</div>
剩余<span>29</span>件
</div>
<div class="qianggou">立即抢购</div>
</li>
<li>
<img src="upload/苹果手机.png">
<p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
<h3>¥6088 <i>￥6988</i></h3>
<div class="shouchu">已售87%
<div class="bar">
<div class="sons">
</div>
</div>
剩余<span>29</span>件
</div>
<div class="qianggou">立即抢购</div>
</li>
<li>
<img src="upload/苹果手机.png">
<p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
<h3>¥6088 <i>￥6988</i></h3>
<div class="shouchu">已售87%
<div class="bar">
<div class="sons">
</div>
</div>
剩余<span>29</span>件
</div>
<div class="qianggou">立即抢购</div>
</li>
<li>
<img src="upload/苹果手机.png">
<p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
<h3>¥6088 <i>￥6988</i></h3>
<div class="shouchu">已售87%
<div class="bar">
<div class="sons">
</div>
</div>
剩余<span>29</span>件
</div>
<div class="qianggou">立即抢购</div>
</li>
<li>
<img src="upload/苹果手机.png">
<p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
<h3>¥6088 <i>￥6988</i></h3>
<div class="shouchu">已售87%
<div class="bar">
<div class="sons">
</div>
</div>
剩余<span>29</span>件
</div>
<div class="qianggou">立即抢购</div>
</li>
<li>
<img src="upload/苹果手机.png">
<p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
<h3>¥6088 <i>￥6988</i></h3>
<div class="shouchu">已售87%
<div class="bar">
<div class="sons">
</div>
</div>
剩余<span>29</span>件
</div>
<div class="qianggou">立即抢购</div>
</li>
<li>
<img src="upload/苹果手机.png">
<p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
<h3>¥6088 <i>￥6988</i></h3>
<div class="shouchu">已售87%
<div class="bar">
<div class="sons">
</div>
</div>
剩余<span>29</span>件
</div>
<div class="qianggou">立即抢购</div>
</li>
<li>
<img src="upload/苹果手机.png">
<p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
<h3>¥6088 <i>￥6988</i></h3>
<div class="shouchu">已售87%
<div class="bar">
<div class="sons">
</div>
</div>
剩余<span>29</span>件
</div>
<div class="qianggou">立即抢购</div>
</li>
<li>
<img src="upload/苹果手机.png">
<p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
<h3>¥6088 <i>￥6988</i></h3>
<div class="shouchu">已售87%
<div class="bar">
<div class="sons">
</div>
</div>
剩余<span>29</span>件
</div>
<div class="qianggou">立即抢购</div>
</li>
</ul>
</div>
</div>
<!-- 列表页主体部分结束 -->
<!-- 底部公共样式开始 -->
<!-- 先做一个通栏的大盒子，给高度和背景色 -->
<div class="footer">
<!-- footer盒子里放一个版心盒子 -->
<div class="w">
<!-- 版心里面第一行模块盒子 -->
<div class="mod_service">
<!-- 第一布局盒子里，通过4个li划分为4部分 -->
<ul>
<!-- 每个li里面，h5盒子里面放图标，定义一个新的盒子，里面放标题和段落文本 -->
<!-- 图标引入通过精灵图来实现 -->
<li>
<h5 class="one"></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5 class="two"></h5>
<div class="service_txt">
<h4>极速物流</h4>
<p>急速物流，急速送达</p>
</div>
</li>
<li>
<h5 class="three"></h5>
<div class="service_txt">
<h4>无忧售后</h4>
<p>7天无理由退换货</p>
</div>
</li>
<li>
<h5 class="fore"></h5>
<div class="service_txt">
<h4>特色服务</h4>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<h5 class="five"></h5>
<div class="service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<!-- 底部盒子第二模块 ，首先放一个大盒子，取高度和底部边框-->
<div class="mod_help">
<!-- 盒子里的6个模块用dl普通列表里面的dt上层项目和dd下层项目来实现 -->
<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="#">会员介绍</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>
<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>
<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>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<img src="./images/wx_cz.jpg">
品优购客户端
</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="#">品优购公益</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>
</div>
<!-- 底部公共样式结束 -->
</body>
3.注册页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人注册页</title>
<!-- 引入favion图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入初始化样式 -->
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/register.css" />
</head>
<body>
<!-- 注册页在版心，先写一个版心的盒子，版心的盒子在common.css里面定义的，样式没有引入需要单独写一下 -->
<div class="w">
<!-- 品优购注册页分为上，中，下三部分，分别定义三个盒子，header,registerarea,footer -->
<div class="header">
<!-- 定义一个logo的盒子，里面链接里放一张图片，方便点击图片回主页 -->
<div class="logo">
<a href="index.html"><img src="images/logo.png"></a>
</div>
</div>
<div class="registerarea">
<!-- 主体部分分两部分组成，上面用h3的盒子，下面定义一个注册区域盒子reg_form -->
<!-- h3里面左侧直接写文字，右侧放一个logi登陆的盒子，里面写文字，让盒子有浮动 -->
<h3>注册新用户
<div class="logi">我有账号，去<a href="#">登陆</a></div>
</h3>
<div class="reg_form">
<!-- 里面的注册信息用li来实现 -->
<!-- 表单用form表单域包裹 -->
<form action="" method="">
<ul>
<!-- 每个li里面分三部分，一个label标签放文字，一个input表单，一个span的盒子 -->
<li><label>手机号：</label><input type="text" name="" id="" value="" class="inp" />
<span class="error">
<i class="error_icon"></i> 手机号码格式不正确，请重新输入
</span>
</li>
<li><label>短信验证码：</label><input type="text" name="" id="" value="" class="inp" />
</li>
<li><label>登陆密码：</label><input type="password" name="" id="" value="" class="inp" />
<span class="error">
<i class="error_icon"></i> 密码不少于6位数，请重新输入
</span>
</li>
<!-- 安全程度制作，用li加em -->
<li class="safe">安全程度
<em class="ruo">弱</em>
<em class="zhong">中</em>
<em class="qiang">强</em>
</li>
<li><label>确认密码：</label><input type="password" name="" id="" value="" class="inp" />
<span class="success">
<i class="success_icon"></i> 密码正确
</span>
</li>
<!-- 同意协议和完成注册也用两个li来包裹，一个是复选框加文字，一个提交按钮 -->
<li class="agree"><input type="checkbox" name="" id="" value="" /> 同意协议并注册<a
href="#">《知果果用户协议》</a></li>
<li><input type="submit" id="" name="" value="完成注册" class="btn" /></li>
</ul>
</form>
</div>
</div>
<div class="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="#">品优购公益</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>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
