品优购页面制作过程与方法（笔记）（三）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="description" content="品优购-专业的综合网上购物商城销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" /><meta name="keywords" content="网上购物，网上商城手机,笔记本,电脑,MP3,CD,VCD,DV，相机,数码配件,手表存储卡,品优购" /><title>品优购-综合网购首选-正品低价、品质保障、配送快捷！</title><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="edition_heart1"><div class="fl"><ul><li>品优购欢迎你！&nbsp;</li><li><a href="#">请登入 &nbsp;</a><a href="#" class="redword">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="list-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="list-icon">关注品优购</li><li></li><li class="list-icon">客户服务</li><li></li><li class="list-icon">网站导航</li></ul></div></div></section><header class="header edition_heart1"><!-- logo部分 开始 --><div class="twologo"><div class="logo"><h1><a href="index.html" title="好物就找品优购，质量有保证！">品优购-综合网购首选-正品低价、品质保障、配送快捷！</a></h1></div><span class="sk-png"> <img src="data:images/sk.png" alt="" ></span></div><!-- logo部分 结束 --><!-- 搜索框开始 --><div class="search"><input type="search" name="" id="" value="语音开发"><button>搜索</button></div><!-- 搜索框结束 --><!-- 搜索框底部热点词区域 --><div class="hotword"><a href="#" class="redword">优惠购首发</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"><!-- 利用伪类元素制作了一系列样式在css结构中 -->我的购物车<i><!-- 右上角图标 -->8</i></div><!-- 购物车模块结束 --><!-- 中间通栏导航区 开始 --><!-- 中间通栏导航区 结束 --></header><!-- 内页主题部分 --><div class="main"><div class="edition_heart1"><!-- 顶部导航选项区 --><nav class="list-topnav"><ul><li class="special-1"><a href="">品优秒杀</a></li><li class="special-1"><a href="">即将售罄</a></li><li class="special-1"><a href="">超值低价</a></li><li class="special-2"><a href="">女装</a></li><li class="special-2"><a href="" class="redword">女鞋</a></li><li class="special-2"><a href="">男装</a></li><li class="special-2"><a href="">男鞋</a></li><li class="special-2"><a href="">食品</a></li><li class="special-2"><a href="">母婴童装</a></li><li class="special-2"><a href="">智能数码运动户外</a></li><li class="special-2 special-3"><a href="">更多分类</a></li></ul></nav><!-- 顶部导航下图 --><img src="data:images/bg_03.png" alt=""></div></div><div></div><footer class="footer"><!-- 大框中间到版心 --><div class="edition_heart1"><!-- 第一个服务模块 --><div class="mod-service1"><ul><li><div class="service-picture1 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">正品保障</h4><p style="font-size: 12px;">正品保障，提供发票</p></div></li><li><div class="service-picture2 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;"> 极速物流</h4><p style="font-size: 12px;"> 急速物流，急速送达</p></div></li><li><div class="service-picture3 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">无忧售后</h4><p style="font-size: 12px;">7天无理由退货</p></div></li><li><div class="service-picture4 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">特色服务</h4><p style="font-size: 12px;">私人定制家电套餐</p></div></li><li><div class="service-picture5 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">帮助中心</h4><p style="font-size: 12px;">您的购物指南</p></div></li></ul></div><!-- 底部模块第一部分 结束 --><!-- 底部模块第二部分 开始 --><div class="mod-help"><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">帮助中心</dd><dt><img src="data:images/wx_cz.jpg" alt="" ><p>品牌优购客户端</p></dt></dl></div><!-- 底部模块第二部分 结束 --><!-- 底部模块第三部分 开始--><div class="mod-copyright"><div class="link"><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="area"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</div><div class="areanumber">京ICP备08001421号京公网安备11010800770</div></div><!-- 底部模块第三部分 结束--></div></footer></body></html>@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?tomleg');src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?tomleg') format('truetype'), url('../fonts/icomoon.woff?tomleg') format('woff'), url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.main {height: 455px;width: 981px;margin-left: 220px;margin-top: 10px;}.index-picture {position: relative;float: left;width: 720px;height: 100%;text-align: center;}.navflash {float: right;width: 250px;height: 100%;}/* 轮播图制作 */.leftmove {position: absolute;left: 0px;bottom: 50%;margin-top: -17px;border-top-right-radius: 17px;border-bottom-right-radius: 17px;}.move span>a {color: white;}.move {display: inline-block;height: 35px;width: 26px;line-height: 35px;color: white !important;font-size: 19px;background-color: rgb(111, 121, 127);}.rightmove {position: absolute;right: 0px;bottom: 50%;margin-top: -17px;border-top-left-radius: 17px;border-bottom-left-radius: 17px;}.index-picture ul {position: absolute;bottom: 20px;left: 50%;margin-left: -67px;width: 135px;height: 16px;text-align: center;background-color: rgb(111, 121, 127);border-top-left-radius: 8px;border-bottom-left-radius: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.movebutton li {float: left;width: 10px;height: 11px;background-color: #fff;border-radius: 50%;margin: 3px;}/* 通告栏的右侧navflash头部 */.navflash {float: right;width: 250px;height: 100%;}.navflash-1 {width: 250px;height: 164px;border: 1px solid #e4e4e4;/* background-color: pink; */}.navflash-2 {height: 34px;line-height: 34px;border-bottom: 1px dotted #e8e8e7;}.navflash-3 {height: 131px;text-align: center;/* line-height: 131px; *//* text-align: center; */}.navflash2-leftword {float: left;font-size: 14px;margin-left: 18px;}.navflash2-rightword {float: right;font-size: 12px;margin-right: 33px;}.navflash2-rightword::after {content: "\e920";font-family: "icomoon";font-size: 14px;vertical-align: bottom;}.navflash-3word {font-weight: 600;padding-left: 18px;color: black;}.navflash-3 ul li {padding-top: 6px;}.liveservice {width: 250px;height: 210px;border: 1px solid #e4e4e4;/* background-color: pink; */}.liveservice ul li {float: left;width: 62px;height: 70px;text-align: center;border-bottom: 1px solid #e4e4e4;border-right: 1px solid #e4e4e4;}.liveservice ul li i {display: inline-block;background: url("../images/icons.png") no-repeat -16px -14px;margin-top: 10px;width: 24px;height: 27px;/* background-color: greenyellow; */}.recommend {height: 163px;/* background-color: pink; */margin-top: 12px;}.rec-hd {float: left;height: 163px;width: 206px;background-color: #5c5251;text-align: center;line-height: 163px;}.rec-bd {float: left;}.rec-bd ul li {float: left;width: 248px;border-right: 1px solid #dddddd;}.rec-bd ul li img {width: 251px;height: 164px;}/* 猜你喜欢模块 */.likehd {height: 60px;line-height: 70px;font-size: 18px;}.like {height: 232px;/* background-color: pink; */border: 1px solid #e4e4e4;}.likearea {width: 1300px;height: 232px;}.like .likearea li {float: left;/* text-align: center; */width: 200px;height: 232px;border-right: 1px solid #e4e4e4;/* background-color: skyblue; */}.like .likearea li img {word-wrap: 200px;height: 160px;}.like .likearea li div {width: 125px;height: 60px;margin: 0 auto;/* background-color: blue; */}.like .likearea li:last-child i {font-size: 12px;color: #666666;}.spanone {font-size: 14px;}.spantwo {font-size: 18px;}.box-hd {height: 60px;line-height: 55px;/* background-color: pink; */border-bottom: 3px solid #c81623;}.hd-1 {float: left;font-size: 18px;font-weight: 400;margin-left: 20px;}.hd-2 {float: right;margin-right: 20px;}.hd-2 ul li a {font-size: 12px;color: #666666;}.hd-2 ul li:nth-child(even) {width: 1px;height: 12px;margin: 22px 10px;background-color: rgb(102, 102, 102);}a:hover {color: red !important;}/* 选项卡区域主题部分 */.box-bd {height: 361px;background-color: #f9f9f9;}.box-bd>div {text-align: center;height: 361px;float: left;}.bd1 {width: 210px;}.bd1 ul {padding-left: 12px;}.bd1 ul li {float: left;width: 85px;height: 34px;border-bottom: 1px solid #ccc;text-align: center;line-height: 33px;margin-right: 10px;}.bd2 {position: relative;width: 329px;}.bd2 .lunbotu {position: absolute;bottom: 20px;left: 50%;margin-left: -25px;width: 50px;height: 13px;/* background-color: wheat; */}.bd2 .lunbotu li {margin: 2px 3px;width: 10px;height: 10px;background-color: #3e3e3e;border-radius: 50%;}.bd3 {width: 221px;}.bd4 {width: 221px;}.shortcut {background-color: rgb(241, 241, 241);height: 31px;}.edition_heart1 {width: 1200px;margin: 0 auto;}.fl,.fr {float: left;width: 400px;height: 31px;line-height: 31px;}.fr {float: right;width: 606px;}.edition_heart1 ul li {float: left;}.redword {color: rgb(208, 22, 35) !important;}.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;margin: 9px 15px;background-color: rgb(102, 102, 102);}/*调用特殊字符声明，此为初始代码子使用过程需对路径进行修改@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?tomleg');src:  url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?tomleg') format('truetype'),url('fonts/icomoon.woff?tomleg') format('woff'),url('fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;} */@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?tomleg');src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?tomleg') format('truetype'), url('../fonts/icomoon.woff?tomleg') format('woff'), url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.list-icon::after {content: "\e91e";font-family: 'icomoon';}/* 快捷导航模块 end  */.header {position: relative;height: 105px;/* background-color: skyblue; */}.logo {width: 171px;height: 61px;background-color: pink;background: url("../images/logo.png") no-repeat;}.logo h1 {display: inline-block;width: 300px;text-indent: -9999px;overflow: hidden;}/* logo部分结束 *//* 搜索框部分 开始 */.search {position: absolute;top: 25px;left: 346px;width: 538px;height: 36px;border: 2px solid #b1191a;}.search input {float: left;width: 455px;height: 32px;padding-left: 15px;}.search button {float: left;width: 79px;height: 32px;background-color: #b1191a;}/* <!-- 搜索框结束 --> */.hotword {position: absolute;top: 66px;left: 346px;}.hotword>a {margin: 0 10px;}/* <!-- 搜索框底部热点词区域 结束--> */.shopcar {position: absolute;left: 996px;top: 25px;text-align: center;line-height: 34px;color: #666666;font-size: 15px;height: 37px;width: 140px;background-color: #f7f7f7;border: 2px solid #dfdfdf;}.shopcar::before {content: "\e93a";font-family: "icomoon";color: #b1191a;margin-right: 5px;}.shopcar::after {content: "\e920";font-family: "icomoon";vertical-align: initial;margin-left: 10px;}.shopcar i {position: absolute;top: -5px;left: 105px;height: 14px;padding: 0 5px;line-height: 14px;background-color: #b1191a;border-radius: 7px 7px 7px 0px;color: white;}/* <!-- 中间通栏导航区 开始 --> */.indexnav {width: 100%;height: 45px;border-bottom: 2px solid #b1191a;/* text-align: center; */}.nav-left {float: left;width: 210px;height: 45px;background-color: #b1191a;}.nav-right {float: right;width: 980px;height: 45px;}.nav-left dt {width: 100%;height: 100%;text-align: center;line-height: 45px;font-size: 14px;color: #f6eaea;}.nav-left dd {width: 210px;height: 465px;/* cursor: pointer; */background-color: #c81623;}.nav-left dd:hover {display: block;}.nav-left dd ul li {height: 31px;width: 210px;line-height: 31px;margin-left: 3px;padding-left: 10px;}.nav-left dd ul li:hover {background-color: #fff;}.nav-left dd ul li a {color: #fff;font-size: 14px;}.nav-left dd ul li:hover a {color: #c81623;}.nav-left dd ul {position: relative;}.nav-left dd ul li::after {/* 利用伪元素去制作箭头让其定位到最右边 */position: absolute;right: 5px;/* top: 5px; */content: "\e920";font-family: "icomoon";color: white;}.nav-right ul li {width: 100px;height: 45px;color: #333333;font-size: 16px;text-align: center;line-height: 45px;}.nav-right ul li a {display: inline-block;width: 100px;height: 45px;}/* <!-- 中间通栏导航区 结束 --> *//* <!-- 底部模块 开始 --> */.footer {height: 415px;background-color: #f5f5f5;padding-top: 30px;}.mod-service1 {height: 80px;border-bottom: 2px solid #ededed;}.mod-service1 ul li {height: 50px;width: 240px;/* background-color: skyblue; */padding-left: 37px;}.pic {height: 50px;width: 50px;float: left;margin-right: 6px;}.service-picture1 {background: url("../images/icons.png") no-repeat -252px -2px;}.service-picture2 {background: url("../images/icons.png") no-repeat -255px -53px;}.service-picture3 {background: url("../images/icons.png") no-repeat -256px -106px;}.service-picture4 {background: url("../images/icons.png") no-repeat -257px -157px;}.service-picture5 {background: url("../images/icons.png") no-repeat -256px -106px;}/* <!-- 底部模块第一部分 结束 --> *//* <!-- 底部模块第二部分 开始 --> */.mod-help {height: 188px;border-bottom: 2px solid #ededed;}.mod-help dd {margin-bottom: 10px;}.mod-help dd dt {font-size: 12px;}.mod-help dl {float: left;width: 200px;}.mod-help dl:last-child {width: 200px;text-align: center;}/* <!-- 底部模块第二部分 结束 --> *//* <!-- 底部模块第三部分 开始--> */.mod-copyright {height: 120px;text-align: center;}.area {padding: 5px 0;}.link>a {padding: 0px 10px;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="description" content="品优购-专业的综合网上购物商城销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" /><meta name="keywords" content="网上购物，网上商城手机,笔记本,电脑,MP3,CD,VCD,DV，相机,数码配件,手表存储卡,品优购" /><title>品优购-综合网购首选-正品低价、品质保障、配送快捷！</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><!-- 标题栏图标引入 --><link rel="shortcut icon" href="title_logo.ico" type="image/x-icon"><link rel="stylesheet" href="css/index.css"></head><body><!-- 快捷导航模块 start--><section class="shortcut"><!-- 版心模块 --><div class="edition_heart1"><div class="fl"><ul><li>品优购欢迎你！&nbsp;</li><li><a href="#">请登入 &nbsp;</a><a href="#" class="redword">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="list-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="list-icon">关注品优购</li><li></li><li class="list-icon">客户服务</li><li></li><li class="list-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end--><!-- 中间搜索框区域（logo、hotword）--><header class="header edition_heart1"><!-- logo部分 开始 --><div class="logo"><h1><a href="index.html" title="好物就找品优购，质量有保证！">品优购-综合网购首选-正品低价、品质保障、配送快捷！</a></h1></div><!-- logo部分 结束 --><!-- 搜索框开始 --><div class="search"><input type="search" name="" id="" value="语音开发"><button>搜索</button></div><!-- 搜索框结束 --><!-- 搜索框底部热点词区域 --><div class="hotword"><a href="#" class="redword">优惠购首发</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"><!-- 利用伪类元素制作了一系列样式在css结构中 -->我的购物车<i><!-- 右上角图标 -->8</i></div><!-- 购物车模块结束 --><!-- 中间通栏导航区 开始 --><!-- 中间通栏导航区 结束 --></header><!-- 左侧与上面通告导航栏 开始 --><nav class="indexnav"><div class="edition_heart1"><div class="nav-left"><dt>全部商品分类</dt><dd><ul><li><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></li><li><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></li><li><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><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></li><li><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></li></ul></dd><!-- 中间通告栏的picture/部分 --></div><div class="nav-right"><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><!-- 主体部分main部分 --><div class="edition_heart1"><div class="main"><div class="index-picture"><img src="data:images/focus.png" alt=""><!-- 轮播图     --><span class="leftmove move"><a href="" style="color: white;">&lt;</a></span><span class="rightmove move">  <a href="" style="color: white;">&gt;</a></span><ul class="movebutton"><li style="margin-left: 6px;"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><!-- 右侧的字体部分 --><div class="navflash"><div class="navflash-1"><div class="navflash-2"><span class="navflash2-leftword">品优购快报</span><span class="navflash2-rightword">更多</span></div><div class="navflash-3"><ul><li> <span class="navflash-3word">[特惠]</span>备战开学季全民半价购数码</li><li><span class="navflash-3word">[公告]</span>品优稳占家电网购六成份额</li><li><span class="navflash-3word">[特惠]</span>百元中秋全品类礼券限量领</li><li><span class="navflash-3word">[公告]</span>上品优生鲜享阳澄湖大闸蟹</li><li><span class="navflash-3word">[待惠]</span>每日享折扣品优品质游</li></ul></div></div><!-- 生活模块16个图标区 --><div class="liveservice"><ul class="pictureicon"><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li></ul></div><div class="lastservice"><img src="data:images/bargain.png" alt="" style="height: 79px;width: 250px;"></div></div></div><!-- 推荐模块 --><div class="recommend"><div class="rec-hd"><img src="data:images/recom.png" alt=""></div><div class="rec-bd"><ul><li><a href=""><img src="data:images/recom1.png" alt=""></a></li><li><a href=""><img src="data:images/recom2.png" alt=""></a></li><li><a href=""><img src="data:images/recom3.png" alt=""></a></li><li><a href=""> <img src="data:images/recom4.png" alt=""></a></li></ul></div></div><!-- 猜你喜欢模块制作  start--><div class="likehd">猜你喜欢</div><div class="like"><ul class="likearea"><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li></ul></div><!-- 猜你喜欢模块制作 end--><!-- 家用电器选项栏制作 start --><div class="floor"><div class="editong_heart1" style="border-color: coral;"><div class="box-hd"><div class="hd-1 redword">家用电器</div><div class="hd-2"><ul><li><a href="https://www.baidu.com/?tn=44004473_35_oem_dg">热门</a></li><li></li><li><a href="">大家电</a></li><li></li><li><a href="">生活电器</a></li><li></li><li><a href="">厨房电器</a></li><li></li><li><a href="">个护健康</a></li><li></li><li><a href="">应季电器</a></li><li></li><li><a href="">空气/净水</a></li><li></li><li><a href="">新奇特</a></li><li></li><li><a href="">高端电器</a></li></ul></div></div><!-- /* 选项卡区域主题部分 */ --><div class="box-bd"><div class="bd1"><ul><li><a href="">节能补贴</a></li><li><a href="">4K电视</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=" https://www.baidu.com/?tn=44004473_35_oem_dg" target="_blank"><img src="data:images/floor-1-1.png" alt=""></a></div><div class="bd2"><img src="data:images/floor-1-b01.png" alt=""><ul class="lunbotu"><li style="background-color:white;"></li><li></li><li></li></ul></div><div class="bd3"><img src="data:images/floor-1-2.png" alt=""><img src="data:images/floor-1-3.png" alt=""></div><div class="bd4"><img src="data:images/floor-1-4.png" alt=""></div><div class="bd5"><img src="data:images/floor-1-5.png" alt=""><img src="data:images/floor-1-6.png" alt=""></div></div></div></div><div class="floor"><div class="editong_heart1" style="border-color: coral;"><div class="box-hd"><div class="hd-1 redword">家用电器</div><div class="hd-2"><ul><li><a href="">热门</a></li><li></li><li><a href="">大家电</a></li><li></li><li><a href="">生活电器</a></li><li></li><li><a href="">厨房电器</a></li><li></li><li><a href="">个护健康</a></li><li></li><li><a href="">应季电器</a></li><li></li><li><a href="">空气/净水</a></li><li></li><li><a href="">新奇特</a></li><li></li><li><a href="">高端电器</a></li></ul></div></div><!-- /* 选项卡区域主题部分 */ --><div class="box-bd"><div class="bd1"><ul><li><a href="">节能补贴</a></li><li><a href="">4K电视</a></li><li><a href="">空气净化器</a></li><li><a href="">电饭煲</a></li><li><a href="">洗衣机</a></li><li><a href="">热水器</a></li></ul><img src="data:images/floor-1-1.png" alt=""></div><div class="bd2"><img src="data:images/floor-1-b01.png" alt=""><ul class="lunbotu"><li style="background-color:white;"></li><li></li><li></li></ul></div><div class="bd3"><img src="data:images/floor-1-2.png" alt=""><img src="data:images/floor-1-3.png" alt=""></div><div class="bd4"><img src="data:images/floor-1-4.png" alt=""></div><div class="bd5"><img src="data:images/floor-1-5.png" alt=""><img src="data:images/floor-1-6.png" alt=""></div></div></div></div><div class="floor"><div class="editong_heart1" style="border-color: coral;"><div class="box-hd"><div class="hd-1 redword">家用电器</div><div class="hd-2"><ul><li><a href="">热门</a></li><li></li><li><a href="">大家电</a></li><li></li><li><a href="">生活电器</a></li><li></li><li><a href="">厨房电器</a></li><li></li><li><a href="">个护健康</a></li><li></li><li><a href="">应季电器</a></li><li></li><li><a href="">空气/净水</a></li><li></li><li><a href="">新奇特</a></li><li></li><li><a href="">高端电器</a></li></ul></div></div><!-- /* 选项卡区域主题部分 */ --><div class="box-bd"><div class="bd1"><ul><li><a href="">节能补贴</a></li><li><a href="">4K电视</a></li><li><a href="">空气净化器</a></li><li><a href="">电饭煲</a></li><li><a href="">洗衣机</a></li><li><a href="">热水器</a></li></ul><img src="data:images/floor-1-1.png" alt=""></div><div class="bd2"><img src="data:images/floor-1-b01.png" alt=""><ul class="lunbotu"><li style="background-color:white;"></li><li></li><li></li></ul></div><div class="bd3"><img src="data:images/floor-1-2.png" alt=""><img src="data:images/floor-1-3.png" alt=""></div><div class="bd4"><img src="data:images/floor-1-4.png" alt=""></div><div class="bd5"><img src="data:images/floor-1-5.png" alt=""><img src="data:images/floor-1-6.png" alt=""></div></div></div></div></div><!-- 家用电器选项栏制作 end --></div><!-- 左侧与上面通告导航栏 结束 --><!-- 底部模块第一部分 开始 --><footer class="footer"><!-- 大框中间到版心 --><div class="edition_heart1"><!-- 第一个服务模块 --><div class="mod-service1"><ul><li><div class="service-picture1 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">正品保障</h4><p style="font-size: 12px;">正品保障，提供发票</p></div></li><li><div class="service-picture2 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;"> 极速物流</h4><p style="font-size: 12px;"> 急速物流，急速送达</p></div></li><li><div class="service-picture3 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">无忧售后</h4><p style="font-size: 12px;">7天无理由退货</p></div></li><li><div class="service-picture4 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">特色服务</h4><p style="font-size: 12px;">私人定制家电套餐</p></div></li><li><div class="service-picture5 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">帮助中心</h4><p style="font-size: 12px;">您的购物指南</p></div></li></ul></div><!-- 底部模块第一部分 结束 --><!-- 底部模块第二部分 开始 --><div class="mod-help"><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">帮助中心</dd><dt><img src="data:images/wx_cz.jpg" alt="" ><p>品牌优购客户端</p></dt></dl></div><!-- 底部模块第二部分 结束 --><!-- 底部模块第三部分 开始--><div class="mod-copyright"><div class="link"><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="area"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</div><div class="areanumber">京ICP备08001421号京公网安备11010800770</div></div><!-- 底部模块第三部分 结束--></div></footer></body></html>/* <!-- 底部模块第三部分 结束--> */.bd5 {width: 219px;}
品优购页面制作过程与方法（笔记）（三）相关推荐

品优购页面制作过程与方法（笔记）
一.搜索导航模块区 1.对类名的定义名称说明快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwords 导航 nav ...
品优购页面制作过程与方法（笔记）（二）
一.对于单独段落文字垂直居中方法采取如下设置(盒子独占一行文字位置可通过line-height去随意更值) 二.在无序列表当中遇到ul盒子容纳不下li盒子导致部分空间另起一行,实际上与li盒子的边框有 ...
三、品优购首页制作_快捷导航区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一.品优购首页制作网站的首页一般都是使用index命名,比如in ...
HTML5 和 CSS3 的新特性--品优购首页制作
网站的首页一般都是使用 index 命名,比如 index.html 或者 index.php . 我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面. 以下是我们 ...
PC端品优购网页制作（common.css）
制作网页前的基础学习品优购项目规划 1.1网站制作流程客户沟通制定方案签订合同预付定金不能退初稿审核网页美工会制作原型图和PSD效果图前台页面设计后台工程开发测试验收上线培训后期 ...
品优购网页制作（HTML和css内容）
品优购前期准备书写对应页面首页列表页注册页后话前期准备 1.准备一个大的文件夹,里面包括若干小的文件夹. 2.小的文件夹分为: css-----存储初始化样式以及各个页面的样式 imag ...
【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作
1.常用模块类名命名 2.快捷导航shortcut制作 (1)快捷导航整体上在common.css中: /* 左浮动 */ .fl{float: left; } /* 右浮动 */ .fr{floa ...
八、品优购首页制作_主体区域（下）
一.楼层区floor制作注意这个floor,不要给高度,内容有多少,算多少. 第一楼是家用电器模块:里面包含两个盒子 1号盒子box_hd,给一个高度,有个下边框,里面分为左右2个盒子. 2号盒子b ...
b站pink老师前端课程、品优购项目（跟着练的笔记+代码）
02.网站制作流程 1. 03.品优购项目规划 04.项目搭建 05.样式的模块化开发 06.favicon图标制作 favicon.ico一般用于作为略缩图的网站标志,它显示在浏览器的地址栏或者标签 ...
微信小程序--优购页面制作
优购–项目这个项目学习源自:黑马程序员微信小程序开发前端教程_零基础玩转微信小程序-哔哩哔哩想要更深入的了解此项目,就去黑马程序员学习该项目.该项目个人觉得对于初学者来说是有很大的帮助的.做好该项 ...
品优购页面制作过程与方法（笔记）（三）

品优购页面制作过程与方法（笔记）（三）相关推荐

最新文章

热门文章
