首页可转至品优购静态首页制作查看，接下来继续制作品优购静态页面（列表页、详情页、登录页）。
一、列表页
品优购列表页制作准备工作
- 列表页面是新的页面，我们需要新建页面文件 list.html
- 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来
- 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css
- 需要新的 list.css 样式文件，这是列表页专门的样式文件
1、效果图
2、实现思路
1）列表页 header 和 nav 修改
- 秒杀盒子 sk（ second kill ） 定位即可
- 1 号盒子左侧浮动
sk_list里面包含ul和li- 2 号盒子左侧浮动
sk_con里面包含ul和li
2）列表页主体 sk_container
a、1 号盒子
sk_container给宽度 1200，不要给高度b、2 号盒子
sk_hd，插入图片即可c、3 号盒子
sk_bd，里面包含很多的ul和li
当鼠标移入到
li上面的时候显示红色的边框，在这里先给li设置透明的边框，当鼠标移入的时候 设置为红色即可由于给每个
li都设置了外边距，导致一行的最后一个li掉了下来，在这里我们利用nth-child(4n)来选择出来每一行最后一个li，去掉外边距就好了
3、结构实现
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>列表页-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><!-- 网站说明 --><meta name="description"content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><!-- 关键字 --><meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><!-- 引入我们初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入我们公共的样式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入我们列表页的css文件 --><link rel="stylesheet" href="css/list.css"> </head><body><!-- 快捷导航模块 start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="#">请登录</a> <a href="#" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><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头部模块制作 start --><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 class="shopcar">我的购物车<i class="count">8</i></div></header><!-- header头部模块制作 end --><!-- nav模块制作 start --><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><!-- nav模块制作 end --><!-- 列表页主体部分 --><div class="w sk_container"><div class="sk_hd"><img src="uploads/bg_03.png" alt=""></div><div class="sk_bd"><ul class="clearfix"><li><img src="uploads/1.jpg" alt=""><p>7or9山楂红色空气棉高跟鞋女2024新款气质结婚单鞋尖头细跟鞋</p><div class="price"><span class="discount_price">¥1088</span><span class="original_price">¥1988</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/1.jpg" alt=""><p>7or9山楂红色空气棉高跟鞋女2024新款气质结婚单鞋尖头细跟鞋</p><div class="price"><span class="discount_price">¥1088</span><span class="original_price">¥1988</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/1.jpg" alt=""><p>7or9山楂红色空气棉高跟鞋女2024新款气质结婚单鞋尖头细跟鞋</p><div class="price"><span class="discount_price">¥1088</span><span class="original_price">¥1988</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/1.jpg" alt=""><p>7or9山楂红色空气棉高跟鞋女2024新款气质结婚单鞋尖头细跟鞋</p><div class="price"><span class="discount_price">¥1088</span><span class="original_price">¥1988</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/2.jpg" alt=""><p>爱丽拉绝美婚鞋女款2024新款禾秀主婚纱两穿新娘水晶高跟鞋不累脚</p><div class="price"><span class="discount_price">¥688</span><span class="original_price">¥998</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/2.jpg" alt=""><p>爱丽拉绝美婚鞋女款2024新款禾秀主婚纱两穿新娘水晶高跟鞋不累脚</p><div class="price"><span class="discount_price">¥688</span><span class="original_price">¥998</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/2.jpg" alt=""><p>爱丽拉绝美婚鞋女款2024新款禾秀主婚纱两穿新娘水晶高跟鞋不累脚</p><div class="price"><span class="discount_price">¥688</span><span class="original_price">¥998</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/2.jpg" alt=""><p>爱丽拉绝美婚鞋女款2024新款禾秀主婚纱两穿新娘水晶高跟鞋不累脚</p><div class="price"><span class="discount_price">¥688</span><span class="original_price">¥998</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/3.jpg" alt=""><p>水钻红底高跟鞋女细跟秋冬2024新款绝美性感婚鞋黑色漆皮尖头单鞋</p><div class="price"><span class="discount_price">¥988</span><span class="original_price">¥1269</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/3.jpg" alt=""><p>水钻红底高跟鞋女细跟秋冬2024新款绝美性感婚鞋黑色漆皮尖头单鞋</p><div class="price"><span class="discount_price">¥988</span><span class="original_price">¥1269</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/3.jpg" alt=""><p>水钻红底高跟鞋女细跟秋冬2024新款绝美性感婚鞋黑色漆皮尖头单鞋</p><div class="price"><span class="discount_price">¥988</span><span class="original_price">¥1269</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li><li><img src="uploads/3.jpg" alt=""><p>水钻红底高跟鞋女细跟秋冬2024新款绝美性感婚鞋黑色漆皮尖头单鞋</p><div class="price"><span class="discount_price">¥988</span><span class="original_price">¥1269</span></div><div class="cargo_quantity"><div style="font-size: 14px; line-height: 18px;">已售87%</div><div class="progress_bar"><div class="jindu"></div></div><div style="font-size: 14px; line-height: 15px;">剩余<span class="style_red">29</span>件</div></div></li></ul></div></div><!-- 底部模块的制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></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="#">会员介绍</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><img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |品优购公益 | English Site | Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块的制作 end --> </body></html>
4、样式实现
/* 列表页专有的css */ .nav {overflow: hidden; }.sk {position: absolute;left: 190px;top: 40px;border-left: 1px solid #c81523;padding: 3px 0 0 14px; }.sk_list {float: left; }.sk_list ul li {float: left; }.sk_list ul li a {display: block;line-height: 47px;padding: 0 30px;font-size: 16px;font-weight: 700;color: #000; }.sk_con {float: left; }.sk_con ul li {float: left; }.sk_con ul li a {display: block;line-height: 49px;padding: 0 20px;font-size: 14px;}.sk_con ul li:last-child a::after {content: '\e91e';font-family: 'icomoon'; }.sk_bd ul li {float: left;margin-right: 13px;width: 290px;height: 460px; }.sk_bd ul li img {width: 283px;height: 290px;padding: 30px 50px; }.sk_bd ul li p {font-size: 14px; }.price {margin: 15px 0px; }.discount_price {color: #c81523;font-size: 22px;font-weight: 700; }.original_price {text-decoration: line-through;font-size: 14px; }.cargo_quantity div {float: left; }.progress_bar {width: 133px;height: 15px;border: 1px solid #c81523;border-radius: 8px;margin-top: 1px;float: left;margin: 0px 10px 0px 8px; }.jindu {width: 100px;height: 14px;background-color: #c81523;border-top-left-radius: 5px;border-bottom-left-radius: 6px; }.sk_bd ul li:nth-child(4n) {margin-right: 0; }.sk_bd ul li:hover {border: 2px solid #c81523; }
二、详情页
1、效果图
2、实现思路
1）商品详细模块完成
a、拷贝好之前写的 header 区域和 footer 区域
- 把 之前写好的
header结构 和footer结构拷贝进来- 拷贝
base.css文件 和common.css文件到项目的css目录下
b、首先有个最大的盒子来包裹，取名为 de_container，给这个盒子设置版心，让内容能够居中显示，然后把内容区域分为上下结构，如下图
- 给这个大盒子设置
20px的上外边距，这样让内容距离header有一定的间隙
c、1 号盒子里面放面包屑导航
- crumb_wrap 面包屑导航
- 关于面包屑导航的由来是源于一则童话故事的一个词语：汉泽尔和格蕾特尔两个人在穿过森林是，为了避免找不到回家的路，他们在沿途走过的地方都会撒下面包屑以便于根据这些面包屑找到回家的路。
- 里面布局比较简单，直接包裹 a 标签即可
- 给 crumb_wrap 设置
d、2 号盒子里面放预览区域盒子和产品介绍的盒子
- 1号盒子 本模块 命名为产品模块
product_intro（ introduction介绍）- 此模块不要给高度 因为右侧的模块内容高度不固定
- 里面有2个盒子 分为是2号盒子 和 3号盒子
- 2号盒子为 预览区域
preview_wrap给宽度，给高度， 左浮动- 3号盒子为 产品详细信息区域
itemInfo_wrap给宽度 ，不要给高度 左侧浮动
预览区域盒子
a、1号盒子 为 图片预览 命名为
preview_img注意里面的图片，我们切图的时候是 398*398 像素的b、2号盒子 为 预览列表 命名为
preview_list
盒子 有左右按钮
arrow_prevarrow_next用定位即可中间 用
ul命名为list-item 给宽度和高度 然后margin: 0 auto; 水平居中对齐即可
产品介绍的盒子
a、此盒子命名为
itemInfob、1 号盒子 为 头部
sku_namec、2 号盒子 为 最新新闻
newsd、3号盒子 为 产品详细摘要 我们命名为
summary（摘要的意思） 之所以下面都是摘要部分，因为里面格式基本相同
- 里面的布局，每一行用自定义列表来实现（
dl > dt + dd）- 给
dt和dd设置浮动，设置dt高度为 60px- 里面的 累积评价 用定位的方式定在右侧
2）产品细节模块完成
- 大盒子 product_detail 包裹两个盒子，不要给高度 ，别忘记清除浮动
- 1 号盒子 左侧浮动 命名为 aside 有宽度 不给高度
- 2号盒子 右侧浮动 命名为 detail 有宽度不给高度
1号盒子
- 1 号盒子 命名为 tab_list 给高度就好了 ，里面 放
ul和li注意这是 tab栏切换布局- 注意一下 左侧的
li宽度是 104px，右侧的li是 103px 然后加一个 1px 的左边框- 2 号盒子 命名为 tab_con 里面还包含 很多个
ul.item和 上面的tab_list里面的li一一对应- 在
li里面的文字 是单行进行显示，如果文字过长，可能会超出盒子的宽度，所以我们需要对这个盒子设置 溢出省略号显示
2号盒子
- 1 号盒子 命名为
detail_tab_list给高度就好了 ，里面 放ul和li注意这是 tab栏切换布局- 设置1px 的边框，选中的
li设置current的类名，让背景变红，文字变白- 2 号盒子 命名为
detail_tab_con里面还包含 很多个ul.item和 上面的tab_list里面的li一一对应- 下面文字内容用
ul > li > 文字内容，下面的直接插入图片即可
3、结构实现
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><!-- 网站说明 --><meta name="description"content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><!-- 关键字 --><meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><!-- 引入初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共的样式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入详情页面的css文件 --><link rel="stylesheet" href="css/detail.css"> </head><body><!-- 1、shortcut 快捷导航模块 start --><section class="shortcut"><div class="w"><!-- 左侧盒子 --><div class="fl"><ul><li><a href="#">品优购欢迎您！ </a></li><li><a href="#">请登录 </a><a href="#" class="style_red">免费注册</a></li></ul></div><!-- 右侧盒子 --><div class="fr"><ul><li><a href="#">我的订单</a></li><li></li><li><a href="#" class="arrow-icon">我的品优购</a></li><li></li><li><a href="#">品优购会员</a></li><li></li><li><a href="#">企业采购</a></li><li></li><li><a href="#" class="arrow-icon">关注品优购</a></li><li></li><li><a href="#" class="arrow-icon">客户服务</a></li><li></li><li><a href="#" class="arrow-icon">网站导航</a></li></ul></div></div></section><!-- 1、shortcut 快捷导航模块 end --><!-- 2、header 头部模块 start --><header class="header w"><!-- logo部分 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- search部分 --><div class="search"><input type="search" placeholder="语言开发"><button>搜索</button></div><!-- hotwords部分 --><div class="hotwords"><a href="#">优惠购首发</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 class="shopcar">我的购物车<i class="count">8</i></div></header><!-- 2、header 头部模块 end --><!-- 3、nav start --><div class="nav"><div class="w"><div class="dropdown fl"><div class="dt"> 全部商品分类 </div><div class="dd" style="display: none;"><ul><li class="menu_item"><a href="#">家用电器</a> <i> </i> </li><li class="menu_item"><a href="list.html">手机</a> 、<a href="#">数码</a> 、<a href="#">通信</a><i> </i></li><li class="menu_item"><a href="#">电脑、办公</a> <i> </i> </li><li class="menu_item"><a href="#">家居、家具、家装、厨具</a> <i> </i> </li><li class="menu_item"><a href="#">男装、女装、童装、内衣</a> <i> </i> </li><li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a> <i> </i> </li><li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a> <i> </i> </li><li class="menu_item"><a href="#">运动户外、钟表</a> <i> </i> </li><li class="menu_item"><a href="#">汽车、汽车用品</a> <i> </i> </li><li class="menu_item"><a href="#">母婴、玩具乐器</a> <i> </i> </li><li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a> <i> </i> </li><li class="menu_item"><a href="#">医药保健</a> <i> </i> </li><li class="menu_item"><a href="#">图书、音像、电子书</a> <i> </i> </li><li class="menu_item"><a href="#">彩票、旅行、充值、票务</a> <i> </i> </li><li class="menu_item"><a href="#">理财、众筹、白条、保险</a> <i> </i> </li></ul></div></div><!-- 右侧导航 --><div class="navitems fl"><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><!-- 3、nav end --><!-- 4、详情页内容部分 start --><div class="de_container w"><!-- 面包屑导航 --><div class="crumb_wrap"><a href="#">手机、数码、通讯</a> 〉 <a href="#">手机 </a> 〉 <a href="#">Apple苹果 </a> 〉 <a href="#">iphone 6S Plus系类</a></div><!-- 产品介绍模块 --><div class="product_intro clearfix"><!-- 预览区域 --><div class="preview_wrap fl"><div class="preview_img"><img src="uploads/s3.png" alt=""></div><div class="preview_list"><a href="#" class="arrow_prev"></a><a href="#" class="arrow_next"></a><ul class="list_item"><li><img src="uploads/pre.jpg" alt=""></li><li class="current"><img src="uploads/pre.jpg" alt=""></li><li><img src="uploads/pre.jpg" alt=""></li><li><img src="uploads/pre.jpg" alt=""></li><li><img src="uploads/pre.jpg" alt=""></li></ul></div></div><!-- 产品详细信息 --><div class="itemInfo_wrap fr"><div class="sku_name">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</div><div class="news">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</div><div class="summary"><dl class="summary_price"><dt>价格</dt><dd><i class="price">￥5299.00 </i><a href="#">降价通知</a><div class="remark">累计评价612188</div></dd></dl><dl class="summary_promotion"><dt>促销</dt><dd><em>加购价</em> 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换 购热销商品 详情 》</dd></dl><dl class="summary_support"><dt>支持</dt><dd>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</dd></dl><dl class="choose_color"><dt>选择颜色</dt><dd><a href="javascript:;" class="current">玫瑰金</a><a href="javascript:;">金色</a><a href="javascript:;">白色</a><a href="javascript:;">土豪色</a></dd></dl><dl class="choose_version"><dt>选择版本</dt><dd><a href="javascript:;" class="current">公开版</a><a href="javascript:;">移动4G</a></dd></dl><dl class="choose_type"><dt>购买方式</dt><dd><a href="javascript:;" class="current">官方标配</a><a href="javascript:;">移动优惠购</a><a href="javascript:;">电信优惠购</a></dd></dl><div class="choose_btns"><div class="choose_amount"><input type="text" value="1"><a href="javascript:;" class="add">+</a><a href="javascript:;" class="reduce">-</a></div><a href="#" class="addcar">加入购物车</a></div></div></div></div><!-- 产品细节模块 product_detail --><div class="product_detail clearfix"><!-- aside --><div class="aside fl"><div class="tab_list"><ul><li class="first_tab ">相关分类</li><li class="second_tab current">推荐品牌</li></ul></div><div class="tab_con"><ul><li><img src="uploads/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="uploads/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="uploads/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="uploads/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="uploads/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="uploads/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li></ul></div></div><!-- detail --><div class="detail fr"><div class="detail_tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（50000）</li><li>手机社区</li></ul></div><div class="detail_tab_con"><div class="item"><ul class="item_info"><li>分辨率：1920*1080(FHD)</li><li>后置摄像头：1200万像素</li><li>前置摄像头：500万像素</li><li>核 数：其他</li><li>频 率：以官网信息为准</li><li>品牌： Apple ♥关注</li><li>商品名称：APPLEiPhone 6s Plus</li><li>商品编号：1861098</li><li>商品毛重：0.51kg</li><li>商品产地：中国大陆</li><li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li><li>系统：苹果（IOS）</li><li>像素：1000-1600万</li><li>机身内存：64GB</li></ul><p><a href="#" class="more">查看更多参数</a></p><img src="uploads/detail_img1.jpg" alt=""><img src="uploads/detail_img2.jpg" alt=""><img src="uploads/detail_img3.jpg" alt=""></div><!-- <div class="item">规格与包装</div><div class="item">售后保障</div> --></div></div></div></div><!-- 4、详情页内容部分 end --><!-- 5、footer 底部模块 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></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> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |品优购公益 | English Site | Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 5、footer 底部模块end --> </body></html>
4、样式实现
/*详情页的样式文件*/ .de_container {margin-top: 20px; }.crumb_wrap {height: 25px; }.crumb_wrap a {margin-right: 10px; }.preview_wrap {width: 400px;height: 590px; }.preview_img {height: 400px;border: 1px solid #ccc; }.preview_list {position: relative;height: 60px;margin-top: 60px; }.list_item {width: 320px;height: 60px;margin: 0 auto; }.list_item li {float: left;width: 56px;height: 56px;border: 2px solid transparent;margin: 0 2px; }.list_item li img {width: 52px;height: 52px; }.list_item li.current {border-color: #c81623; }.arrow_prev, .arrow_next {position: absolute;top: 15px;width: 22px;height: 32px;background-color: purple; }.arrow_prev {left: 0;background: url(../images/arrow-prev.png) no-repeat; }.arrow_next {right: 0;background: url(../images/arrow-next.png) no-repeat; }.itemInfo_wrap {width: 718px; }.sku_name {height: 30px;font-size: 16px;font-weight: 700; }.news {height: 32px;color: #e12228; }.summary dl {overflow: hidden; }.summary dt, .summary dd {float: left; }.summary dt {width: 60px;padding-left: 10px;line-height: 36px; }.summary_price, .summary_promotion {position: relative;padding: 10px 0;background-color: #fee9eb; }.price {font-size: 24px;color: #e12228; }.summary_price a {color: #c81623; }.remark {position: absolute;right: 10px;top: 20px; }.summary_promotion {padding-top: 0; }.summary_promotion dd {width: 450px;line-height: 36px; }.summary_promotion em {display: inline-block;width: 40px;height: 22px;background-color: #c81623;text-align: center;line-height: 22px;color: #fff; }.summary_support dd {line-height: 36px; }.choose_color a {display: inline-block;width: 80px;height: 41px;background-color: #f7f7f7;border: 1px solid #ededed;text-align: center;line-height: 41px; }.summary a.current {border-color: #c81623; }.choose_version {margin: 10px 0; }.choose_version a, .choose_type a {display: inline-block;height: 32px;padding: 0 12px;background-color: #f7f7f7;border: 1px solid #ededed;text-align: center;line-height: 32px; }.choose_btns {margin-top: 20px; }.choose_amount {position: relative;float: left;width: 50px;height: 46px;background-color: pink; }.choose_amount input {width: 33px;height: 44px;border: 1px solid #ccc;text-align: center; }.add, .reduce {position: absolute;right: 0;width: 15px;height: 22px;border: 1px solid #ccc;background-color: #f1f1f1;text-align: center;line-height: 22px; }.add {top: 0;}.reduce {bottom: 0;/*禁止鼠标样式*/cursor: not-allowed;/* pointer 小手 move 移动 */ }.addcar {float: left;width: 142px;height: 46px;background-color: #c81623;text-align: center;line-height: 46px;font-size: 18px;color: #fff;margin-left: 10px;font-weight: 700; }.product_detail {margin-bottom: 50px; }.aside {width: 208px;border: 1px solid #ccc; }.tab_list {/* overflow: hidden; */height: 34px; }/*把背景颜色 底边框都给 li*/ .tab_list li {float: left;background-color: #f1f1f1;border-bottom: 1px solid #ccc;height: 33px;text-align: center;line-height: 33px; }.tab_list .first_tab {width: 104px; }.tab_list .second_tab {width: 102px;border-left: 1px solid #ccc; }/*鼠标单击 li 变化样式 背景变白色 去掉下边框 文字变颜色*/ .tab_list .current {background-color: #fff;border-bottom: 0;color: red; }.tab_con {padding: 0 10px; }.tab_con li {border-bottom: 1px solid #ccc; }.tab_con li h5 {/*超出的文字省略号显示*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 400; }.aside_price {font-weight: 700;margin: 10px 0; }.as_addcar {display: block;width: 88px;height: 26px;border: 1px solid #ccc;background-color: #f7f7f7;margin: 10px auto;text-align: center;line-height: 26px; }.detail {width: 978px; }.detail_tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1; }.detail_tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer; }.detail_tab_list .current {background-color: #c81623;color: #fff; }.item_info {padding: 20px 0 0 20px; }.item_info li {line-height: 22px; }.more {float: right;font-weight: 700;font-family: 'icomoon'; }
三、登录页
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化
准备工作：
创建register.html，引入 base.css，引入favicon图标
创建register.css ，在html页面进行引入
1、效果图
2、实现思路
1）header 头部实现
- 整个内容用 版心 进行包裹
- 第一个头部区域怎么简单怎么来，用一个header盒子包裹链接，链接里面放图片即可
2）registerarea 主体模块实现
a、整个大盒子 高度为 522px，设置4个边框
b、1号盒子 是一个 h3 标签，放标题
里面放 注册新用户 的文字，然后包一个 div的标签，让div标签右浮动
c、2号盒子 里面放注册的内容
先用一个盒子，把整个内容包裹起来，设置盒子宽度（600px），让这个盒子距上边50px，水平居中显示
里面的内容利用
ul包含li来实现的（不需要用表格）每个
li里面，左侧放label标签， 中间放input标签， 右侧放span提示信息左侧
label里面的文字都是右对齐，我们可以给label设置一个宽度（88px），然后利用text-align来设置右对齐input 表单设置 宽度 242px，高度 37px，设置边框
右侧 span修饰一下文字颜色
提示信息的样式优化
定义一个 错误的样式，定义一个 正确的样式，然后给对应的盒子设置类名
在span里面放一个小盒子，这个小盒子用来显示 图标的，设置一下宽高 （20x20）
插入图片了之后，默认与文字是基线对齐，通过
vertical-algin来设置 图片与文字对齐方式安装程度的布局，在第4个小 li 里面放 三个盒子，分别放 弱、中、强
设置
em的 左右 12px 的内边距，设置一下文字颜色分别设置 背景颜色
同意协议 和 完成注册 都是用
li进行包裹
3）footer底部实现
3、结构实现
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>个人注册</title><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><!-- 引入我们初始化的css --><link rel="stylesheet" href="css/base.css"><!-- 引入我们自己的注册页面的css --><link rel="stylesheet" href="css/register.css"> </head><body><div class="w"><header><div class="logo"><a href="index.html"> <img src="images/logo.png" alt=""></a></div></header><div class="registerarea"><h3>注册新用户<div class="login">我有账号，去<a href="#">登陆</a></div></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="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</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=""> 同意协议并注册 <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> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |品优购公益 | English Site | Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>京ICP备08001421号京公网安备110108007702</div></div></footer></div> </body></html>
4、样式实现
.w {width: 1200px;margin: 0 auto; } header {height: 84px;border-bottom: 2px solid #c81523; } .logo {padding-top: 18px; } .registerarea {height: 522px;border: 1px solid #ccc;margin-top: 20px; } .registerarea h3 {height: 42px;border-bottom: 1px solid #ccc;background-color: #ececec;line-height: 42px;padding: 0 10px;font-size: 18px;font-weight: 400; } .login {float: right;font-size: 14px; } .login a {color: #c81523; } .reg_form {width: 600px;margin: 50px auto 0; } .reg_form ul li {margin-bottom: 20px; } .reg_form ul li label {display: inline-block;width: 88px;text-align: right; } .reg_form ul li .inp {width: 242px;height: 37px;border: 1px solid #ccc; } .error {color: #c81523; } .error_icon, .success_icon {display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url(../images/error.png) no-repeat;margin-top: -2px; } .success {color: green; } .success_icon {background: url(../images/success.png) no-repeat; } .safe {padding-left: 170px; } .safe em {padding: 0 12px;color: #fff; } .ruo {background-color: #de1111; } .zhong {background-color: #40b83f; }.qiang {background-color: #f79100; } .agree {padding-left: 95px; } .agree input {vertical-align: middle; } .agree a {color: #1ba1e6; } .btn {width: 200px;height: 34px;background-color: #c81623;font-size: 14px;color: #fff;margin: 30px 0 0 70px; } .mod_copyright {text-align: center;padding-top: 20px; } .links {margin-bottom: 15px; } .links a {margin: 0 3px; } .copyright {line-height: 20px; }
有一天你将破茧而出，成长得比别人期待的还要美丽，但这个过程会很痛很辛苦，有时候还会觉得灰心，面对汹涌而来的现实，觉得自己渺小无力，但这也是生活里的一部分，做好你现在能做的，然后相信一切都会好的。
