文章目录
一、首页
1、页面开头
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- 优化网站 TDK --><title>品优购商城 - 综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><metaname="description"content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母
婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/><metaname="keywords"content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/><!-- 引入图标 --><linkrel="shortcut icon"href="favicon.ico"><linkrel="stylesheet"href="css/base.css"><linkrel="stylesheet"href="css/common.css"><linkrel="stylesheet"href="css/index.css"></head><body></body></html>
2、快捷导航
2.1 页面框架
<divclass="shortcut"><divclass="w"><!-- 左边盒子 --><divclass="fl"><ul><li>品优购欢迎您！ </li><li><ahref="#">请登录 </a><ahref="register.html"class="style_red">免费注册</a></li></ul></div><!-- 右边盒子 --><divclass="fr"><ul><li>我的订单</li><li></li><liclass="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><liclass="arrow-icon">关注品优购</li><li></li><liclass="arrow-icon">客户服务</li><li></li><liclass="arrow-icon">网站导航</li></ul></div></div></div>
2.2 格式文件
.w{width: 1200px;margin: 0 auto;}.fl{float: left;}.fr{float: right;}.style_red{color: #c81623;}/* 快捷导航模块 */.shortcut{height: 30px;line-height: 30px;background-color: #f1f1f1;}.shortcut ul li{float: left;}/* 选择所有的偶数 li */.shortcut .fr ul li:nth-child(even){width: 1px;height: 12px;background-color: #666;margin: 9px 15px;}.arrow-icon::after{content:'\e91e';font-family:'icomoon';margin-left: 5px;}
3、头部模块
3.1 页面框架
<headerclass="header w"><!-- logo 模块 --><divclass="logo"><h1><ahref="index.html"title="品优购商城">品优购商城</a></h1></div><!-- search 模块 --><divclass="search"><inputtype="search"placeholder="语言开发"><button>搜索</button></div><!-- hotwords 模块 --><divclass="hotwords"><ahref="#"class="style_red">优惠购首发</a><ahref="#">亿元优惠</a><ahref="#">9.9元团购</a><ahref="#">每满99减30</a><ahref="#">办公用品</a><ahref="#">电脑</a><ahref="#">通信</a></div><!-- shopcar 模块 --><divclass="shopcar">
我的购物车
<iclass="count">8</i></div></header>
3.2 格式文件
.header{/* 相对定位 */position: relative;height: 105px;}.logo{/* 绝对定位 */position: absolute;top: 25px;width: 170px;height: 60px;}.logo a{display: block;width: 170px;height: 60px;background:url(../images/logo.png);/* 隐藏文字 */font-size: 0;}.search{position: absolute;left: 345px;top: 25px;/* 盒子有边框 高度和宽度需要减去 */width: 534px;height: 36px;border: 2px solid #b1191a;}.search input{float: left;width: 450px;height: 32px;padding-left: 10px;}.search button{float: right;width: 80px;/* 此处高度与 input 不一样 */height: 34px;background-color: #b1191a;font-size: 16px;color: #fff;}.hotwords{position: absolute;left: 345px;top: 70px;}.hotwords a{margin: 0 10px;}.shopcar{position: absolute;top: 25px;right: 60px;width: 140px;height: 35px;border: 1px solid #dfdfdf;background-color: #f7f7f7;/* 文字水平垂直居中 */line-height: 35px;text-align: center;}.shopcar::before{content:'\e93a';font-family:'icomoon';margin-right: 5px;/* 更改购物车颜色 */color: #b1191a;}.shopcar::after{content:'\e920';font-family:'icomoon';margin-left: 10px;}.count{position: absolute;top: -5px;left: 90px;height: 14px;/* 子元素继承父元素的行高 */line-height: 14px;color: #fff;background-color: #e60012;padding: 0 5px;border-radius: 7px 7px 7px 0;}
4、导航栏
4.1 页面框架
<divclass="nav"><divclass="w"><!-- 左边盒子 --><divclass="dropdown fl"><divclass="dt">全部商品分类</div><divclass="dd"><ul><li><ahref="#">家用电器</a></li><li><ahref="list.html">手机、</a><ahref="#">数码、</a><ahref="#">通信</a></li><li><ahref="#">电脑、</a><ahref="#">办公</a></li><li><ahref="#">家居、</a><ahref="#">家具、</a><ahref="#">家装、</a><ahref="#">厨具</a></li><li><ahref="#">男装、</a><ahref="#">女装、</a><ahref="#">童装、</a><ahref="#">内衣</a></li><li><ahref="#">个户化妆、</a><ahref="#">清洁用品、</a><ahref="#">宠物</a></li><li><ahref="#">鞋靴、</a><ahref="#">箱包、</a><ahref="#">珠宝、</a><ahref="#">奢侈品</a></li><li><ahref="#">运动户外、</a><ahref="#">钟表</a></li><li><ahref="#">汽车、</a><ahref="#">汽车用品</a></li><li><ahref="#">母婴、</a><ahref="#">玩具乐器</a></li><li><ahref="#">食品、</a><ahref="#">酒类、</a><ahref="#">生鲜、</a><ahref="#">特产</a></li><li><ahref="#">医药保健</a></li><li><ahref="#">图书、</a><ahref="#">音像、</a><ahref="#">电子书</a></li><li><ahref="#">彩票、</a><ahref="#">旅行、</a><ahref="#">充值、</a><ahref="#">票务</a></li><li><ahref="#">理财、</a><ahref="#">众筹、</a><ahref="#">白条、</a><ahref="#">保险</a></li></ul></div></div><!-- 右边盒子 --><divclass="navitems fl"><ul><li><ahref="#">服装城</a></li><li><ahref="#">美妆馆</a></li><li><ahref="#">传智超市</a></li><li><ahref="#">全球购</a></li><li><ahref="#">闪购</a></li><li><ahref="#">团购</a></li><li><ahref="#">拍卖</a></li><li><ahref="#">有趣</a></li></ul></div></div></div>
4.2 格式文件
.nav{height: 48px;border-bottom: 2px solid #b1191a;}.nav .dropdown{width: 210px;/* 此处修改为 48px */height: 47px;background: #b1191a;}.nav .dropdown .dt{/* 与父亲一样宽 */width: 100%;height: 100%;color: #fff;text-align: center;line-height: 48px;font-size: 16px;}.nav .dropdown .dd{/* display: none; */width: 210px;height: 465px;background-color: #c81623;/* 压住了水平线 */margin-top: 1px;}.nav .dropdown .dd ul li{position: relative;/* 31 * 15 == 465 */height: 31px;line-height: 31px;margin-left: 2px;padding-left: 10px;}.nav .dropdown .dd ul li:hover{background-color: #fff;}.nav .dropdown .dd ul li::after{/* 父亲加相对定位 */position: absolute;top: 1px;right: 10px;content:'\e920';color: #fff;font-size: 14px;font-family:'icomoon';}.nav .dropdown .dd ul li a{font-size: 14px;color: #fff;}.nav .dropdown .dd ul li:hover a{color: #c81623;}.navitems ul li{float: left;}.navitems ul li a{display: block;height: 46px;line-height: 45px;font-size: 16px;padding: 0 25px;}
5、页面主模块
5.1 页面框架
<divclass="w"><divclass="main"><!-- 焦点图 --><divclass="focus fl"><ul><li><imgsrc="upload/focus.png"></li></ul></div><!-- 快报模块 --><divclass="newsflash fr"><!-- 新闻模块 --><divclass="news"><divclass="new-hd"><h5class="fl">品优购快报</h5><ahref="#"class="more fr">更多</a></div><divclass="new-bd"><ul><li><ahref="#"><strong>[特惠]</strong>备战开学季 全民半价购数码 大牌爆款赤裸价对拼</a></li><li><ahref="#"><strong>[公告]</strong>品优稳占家电网购六成份额 大牌爆款赤裸价对拼</a></li><li><ahref="#"><strong>[特惠]</strong>百元中秋全品类礼卷限量领 大牌爆款赤裸价对拼</a></li><li><ahref="#"><strong>[公告]</strong>上品优生鲜 杭州西湖大闸蟹 大牌爆款赤裸价对拼</a></li><li><ahref="#"><strong>[特惠]</strong>每日享折扣品优品质优 大牌爆款赤裸价对拼</a></li></ul></div></div><!-- 生活服务模块 --><divclass="lifeservice"><ul><li><iclass="lifeservice01"></i><p>话费</p></li><li><iclass="lifeservice02"></i><p>机票</p></li><li><iclass="lifeservice03"></i><p>电影票</p></li><li><iclass="lifeservice04"></i><p>游戏</p></li><li><iclass="lifeservice05"></i><p>彩票</p></li><li><iclass="lifeservice06"></i><p>加油卡</p></li><li><iclass="lifeservice07"></i><p>酒店</p></li><li><iclass="lifeservice08"></i><p>火车票</p></li><li><iclass="lifeservice09"></i><p>众筹</p></li><li><iclass="lifeservice10"></i><p>理财</p></li><li><iclass="lifeservice11"></i><p>礼品卡</p></li><li><iclass="lifeservice12"></i><p>白条</p></li></ul></div><!-- 广告模块 --><divclass="bargain"><imgsrc="upload/bargain.png"></div></div></div></div>
5.2 格式文件
.main{width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;}.focus{width: 720px;height: 455px;}.newsflash{width: 250px;height: 455px;}.news{height: 165px;border: 1px solid #e4e4e4;}.new-hd{height: 35px;line-height: 35px;border-bottom: 1px dotted #e4e4e4;}.new-hd h5{margin-left: 20px;font-size: 14px;}.new-hd .more{margin-right: 15px;}.new-hd .more::after{margin-left: 5px;content:'\e920';font-family:'icomoon';}.new-bd{padding: 5px 15px 0;}.new-bd ul li{height: 24px;line-height: 24px;/* 超出部分省略号显示 */overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.lifeservice{height: 210px;border-left: 1px solid #e4e4e4;}.lifeservice ul{/* 防止页面缩小时 li 被挤下去 */width: 252px;}.lifeservice ul li{float: left;/* 62 * 4 == 248 != 250 */width: 62px;/* 70 * 3 == 210 */height: 70px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;}.lifeservice ul li:nth-child(4n){/* 最后一个 li 宽一点 */width: 63px;}.lifeservice ul li i{display: inline-block;width: 30px;height: 30px;margin-top: 12px;}.lifeservice01{background:url(../images/icons.png) no-repeat -13px -11px;}.lifeservice02{background:url(../images/icons.png) no-repeat -75px -11px;}.lifeservice03{background:url(../images/icons.png) no-repeat -139px -11px;}.lifeservice04{background:url(../images/icons.png) no-repeat -203px -11px;}.lifeservice05{background:url(../images/icons.png) no-repeat -13px -81px;}.lifeservice06{background:url(../images/icons.png) no-repeat -75px -81px;}.lifeservice07{background:url(../images/icons.png) no-repeat -139px -81px;}.lifeservice08{background:url(../images/icons.png) no-repeat -203px -81px;}.lifeservice09{background:url(../images/icons.png) no-repeat -13px -152px;}.lifeservice10{background:url(../images/icons.png) no-repeat -75px -152px;}.lifeservice11{background:url(../images/icons.png) no-repeat -139px -152px;}.lifeservice12{background:url(../images/icons.png) no-repeat -203px -152px;}.bargain{margin-top: 5px;}
6、推荐模块
6.1 页面框架
<divclass="w recom"><divclass="recom-hd fl"><imgsrc="images/recom.png"></div><divclass="recom-bd fl"><ul><li><imgsrc="upload/recom.jpg"></li><li><imgsrc="upload/recom.jpg"></li><li><imgsrc="upload/recom.jpg"></li><li><imgsrc="upload/recom.jpg"></li></ul></div></div>
6.2 格式文件
.recom{height: 165px;margin-top: 10px;}.recom-hd{height: 165px;width: 208px;background-color: #5c5251;text-align: center;padding-top: 35px;}.recom-bd ul li{position: relative;float: left;}.recom-bd ul li img{/* 248 * 4 == 992 == 992 */width: 248px;height: 165px;}.recom-bd ul li:nth-child(-n+3):after{content:'';/* 父元素加相对定位 */position: absolute;top: 10px;right: 0;width: 1px;height: 145px;background-color: #ddd;}
7、楼层模块
7.1 页面框架
<divclass="floor"><!-- 第一楼 家用电器 --><divclass="w jiadian"><!-- 头部区域 --><divclass="box-hd"><h3>家用电器</h3><divclass="tab-list fr"><ul><li><ahref="#"class="style_red">热门</a>|</li><li><ahref="#">大家电</a>|</li><li><ahref="#">生活电器</a>|</li><li><ahref="#">厨房电器</a>|</li><li><ahref="#">个护健康</a>|</li><li><ahref="#">应季电器</a>|</li><li><ahref="#">空气/净水</a>|</li><li><ahref="#">新奇特</a>|</li><li><ahref="#">高端电器</a></li></ul></div></div><!-- 主体区域 --><divclass="box-bd"><divclass="tab-content"><divclass="tab-list-item"><!-- 一号盒子 --><divclass="col-210"><ul><li><ahref="#">节能补贴</a></li><li><ahref="#">4K电视</a></li><li><ahref="#">空气净化器</a></li><li><ahref="#">电饭煲</a></li><li><ahref="#">滚筒洗衣机</a></li><li><ahref="#">电热水器</a></li></ul><ahref="#"><imgsrc="upload/floor-1-1-1.png"></a></div><!-- 二号盒子 --><divclass="col-330"><ahref="#"><imgsrc="upload/floor-1-2-1.png"alt=""></a></div><!-- 三号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-3-1.png"></a><ahref="#"><imgsrc="upload/floor-1-3-2.png"></a></div><!-- 四号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-4-1.png"></a></div><!-- 五号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-5-1.png"></a><ahref="#"><imgsrc="upload/floor-1-5-2.png"></a></div></div></div></div></div><!-- 第二楼 手机 --><divclass="w jiadian"><!-- 头部区域 --><divclass="box-hd"><h3>手机通讯</h3><divclass="tab-list fr"><ul><li><ahref="#"class="style_red">热门</a>|</li><li><ahref="#">大家电</a>|</li><li><ahref="#">生活电器</a>|</li><li><ahref="#">厨房电器</a>|</li><li><ahref="#">个护健康</a>|</li><li><ahref="#">应季电器</a>|</li><li><ahref="#">空气/净水</a>|</li><li><ahref="#">新奇特</a>|</li><li><ahref="#">高端电器</a></li></ul></div></div><!-- 主体区域 --><divclass="box-bd"><divclass="tab-content"><divclass="tab-list-item"><!-- 一号盒子 --><divclass="col-210"><ul><li><ahref="#">节能补贴</a></li><li><ahref="#">4K电视</a></li><li><ahref="#">空气净化器</a></li><li><ahref="#">电饭煲</a></li><li><ahref="#">滚筒洗衣机</a></li><li><ahref="#">电热水器</a></li></ul><ahref="#"><imgsrc="upload/floor-1-1-1.png"></a></div><!-- 二号盒子 --><divclass="col-330"><ahref="#"><imgsrc="upload/floor-1-2-1.png"alt=""></a></div><!-- 三号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-3-1.png"></a><ahref="#"><imgsrc="upload/floor-1-3-2.png"></a></div><!-- 四号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-4-1.png"></a></div><!-- 五号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-5-1.png"></a><ahref="#"><imgsrc="upload/floor-1-5-2.png"></a></div></div></div></div></div><!-- 第三楼 机械器材 --><divclass="w jiadian"><!-- 头部区域 --><divclass="box-hd"><h3>机械器材</h3><divclass="tab-list fr"><ul><li><ahref="#"class="style_red">热门</a>|</li><li><ahref="#">大家电</a>|</li><li><ahref="#">生活电器</a>|</li><li><ahref="#">厨房电器</a>|</li><li><ahref="#">个护健康</a>|</li><li><ahref="#">应季电器</a>|</li><li><ahref="#">空气/净水</a>|</li><li><ahref="#">新奇特</a>|</li><li><ahref="#">高端电器</a></li></ul></div></div><!-- 主体区域 --><divclass="box-bd"><divclass="tab-content"><divclass="tab-list-item"><!-- 一号盒子 --><divclass="col-210"><ul><li><ahref="#">节能补贴</a></li><li><ahref="#">4K电视</a></li><li><ahref="#">空气净化器</a></li><li><ahref="#">电饭煲</a></li><li><ahref="#">滚筒洗衣机</a></li><li><ahref="#">电热水器</a></li></ul><ahref="#"><imgsrc="upload/floor-1-1-1.png"></a></div><!-- 二号盒子 --><divclass="col-330"><ahref="#"><imgsrc="upload/floor-1-2-1.png"alt=""></a></div><!-- 三号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-3-1.png"></a><ahref="#"><imgsrc="upload/floor-1-3-2.png"></a></div><!-- 四号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-4-1.png"></a></div><!-- 五号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-5-1.png"></a><ahref="#"><imgsrc="upload/floor-1-5-2.png"></a></div></div></div></div></div></div>
7.2 格式文件
.floor .w{margin-top: 30px;}/* 家用电器模块 */.box-hd{height: 30px;border-bottom: 2px solid#c81623;}.jiadian .box-hd h3{float: left;font-size: 18px;color: #c81623;font-weight: 400;}.jiadian .tab-list{line-height: 30px;}.jiadian .tab-list ul li{float: left;}.jiadian .tab-list ul li a{margin: 0 15px;}.jiadian .box-bd{height: 360px;}.jiadian .box-bd .tab-list-item div{float: left;}.col-210{width: 210px;height: 360px;background-color: #f9f9f9;text-align: center;}.col-210 ul{padding-left: 12px;}.col-210 ul li{float: left;width: 85px;height: 34px;border-bottom: 1px solid #ccc;text-align: center;line-height: 33px;margin-right: 10px;}.col-330{width: 330px;height: 360px;}.col-220{width: 220px;height: 360px;}
8、页面底部
8.1 页面框架
<footerclass="footer"><divclass="w"><!-- 第一行 --><divclass="mod_service"><ul><li><h5class="service1"></h5><divclass="service_item"><h4>正品保障</h4><p>正品保障,提供发货</p></div></li><li><h5class="service2"></h5><divclass="service_item"><h4>极速物流</h4><p>极速物流,极速送达</p></div></li><li><h5class="service3"></h5><divclass="service_item"><h4>无忧售后</h4><p>7天无理由退货</p></div></li><li><h5class="service4"></h5><divclass="service_item"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li></ul></div><!-- 第二行 --><divclass="mod_help"><dl><dt>购物指南</dt><dd><ahref="#">购物流程</a></dd><dd><ahref="#">会员介绍</a></dd><dd><ahref="#">生活旅行/团购</a></dd><dd><ahref="#">常见问题</a></dd><dd><ahref="#">大家电</a></dd><dd><ahref="#">联系客服</a></dd></dl><dl><dt>配送方式</dt><dd><ahref="#">上门自提</a></dd><dd><ahref="#">211限时达</a></dd><dd><ahref="#">配送服务查询</a></dd><dd><ahref="#">配送费收取标准</a></dd><dd><ahref="#">海外配送</a></dd></dl><dl><dt>支付方式</dt><dd><ahref="#">货到付款</a></dd><dd><ahref="#">在线支付</a></dd><dd><ahref="#">分期付款</a></dd><dd><ahref="#">邮政汇款</a></dd><dd><ahref="#">公司转账</a></dd></dl><dl><dt>售后服务</dt><dd><ahref="#">售后政策</a></dd><dd><ahref="#">价格保护</a></dd><dd><ahref="#">退款说明</a></dd><dd><ahref="#">返修/退换货</a></dd><dd><ahref="#">取消订单</a></dd></dl><dl><dt>特色服务</dt><dd><ahref="#">夺宝岛</a></dd><dd><ahref="#">DIY装机</a></dd><dd><ahref="#">延保服务</a></dd><dd><ahref="#">品优购E卡</a></dd><dd><ahref="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd><imgsrc="images/wx.jpg"alt="">
品优购客户端
</dd></dl></div><!-- 第三行 --><divclass="mod_copyright"><divclass="links"><ahref="#">关于我们</a> |
<ahref="#">联系我们</a> |
<ahref="#">联系客服</a> |
<ahref="#">商家入驻</a> |
<ahref="#">营销中心</a> |
<ahref="#">手机品优购</a> |
<ahref="#">友情链接</a> |
<ahref="#">销售联盟</a> |
<ahref="#">品优购社区</a> |
<ahref="#">品优购公益</a></div><divclass="copyright">
地址: 江西省九江市浔阳区浔阳东路169号
邮编: 332000 电话:400-618-4000
传真: 010-82935100
邮箱: [email protected]<br>
京ICP备08001421号 京公网安备110108007702
</div></div></div></footer>
8.2 格式文件
.footer{height: 415px;background-color: #f5f5f5;padding-top: 30px;}.mod_service{height: 80px;border-bottom: 1px solid #ccc;}.mod_service ul li{float: left;height: 50px;width: 300px;padding-left: 35px;}.mod_service ul li h5{float: left;width: 50px;height: 50px;margin-right: 10px;}.service1{background:url(../images/icons.png) no-repeat -252px -2px;}.service2{background:url(../images/icons.png) no-repeat -255px -54px;}.service3{background:url(../images/icons.png) no-repeat -257px -105px;}.service4{background:url(../images/icons.png) no-repeat -257px -157px;}.service_item h4{font-size: 14px;}.service_item p{font-size: 12px;}.mod_help{height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;}.mod_help dl{float: left;width: 200px;}.mod_help dl:last-child{width: 90px;text-align: center;}.mod_help dl dt{font-size: 16px;margin-bottom: 10px;}.mod_copyright{text-align: center;padding-top: 20px;}.links{margin-bottom: 15px;}.links a{margin: 0 3px;}.copyright{line-height: 20px;}
二、列表页
1、页面开头
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- 优化网站 TDK --><title>列表页 - 综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><metaname="description"content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母
婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/><metaname="keywords"content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/><!-- 引入图标 --><linkrel="shortcut icon"href="favicon.ico"><linkrel="stylesheet"href="css/base.css"><linkrel="stylesheet"href="css/common.css"><linkrel="stylesheet"href="css/list.css"></head><body></body></html>
2、主页共用头部模块
2.1 页面框架
<divclass="shortcut"><divclass="w"><!-- 左边盒子 --><divclass="fl"><ul><li>品优购欢迎您！ </li><li><ahref="#">请登录 </a><ahref="#"class="style_red">免费注册</a></li></ul></div><!-- 右边盒子 --><divclass="fr"><ul><li>我的订单</li><li></li><liclass="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><liclass="arrow-icon">关注品优购</li><li></li><liclass="arrow-icon">客户服务</li><li></li><liclass="arrow-icon">网站导航</li></ul></div></div></div><!-- header 头部模块 --><headerclass="header w"><!-- logo 模块 --><divclass="logo"><h1><ahref="index.html"title="品优购商城">品优购商城</a></h1></div><!-- 列表页秒杀模块 --><divclass="sk"><imgsrc="images/sk.png"></div><!-- search 模块 --><divclass="search"><inputtype="search"placeholder="语言开发"><button>搜索</button></div><!-- hotwords 模块 --><divclass="hotwords"><ahref="#"class="style_red">优惠购首发</a><ahref="#">亿元优惠</a><ahref="#">9.9元团购</a><ahref="#">每满99减30</a><ahref="#">办公用品</a><ahref="#">电脑</a><ahref="#">通信</a></div><!-- shopcar 模块 --><divclass="shopcar">
我的购物车
<iclass="count">8</i></div></header>
2.2 格式文件
.w{width: 1200px;margin: 0 auto;}.fl{float: left;}.fr{float: right;}.style_red{color: #c81623;}/* 快捷导航模块 */.shortcut{height: 30px;line-height: 30px;background-color: #f1f1f1;}.shortcut ul li{float: left;}/* 选择所有的偶数 li */.shortcut .fr ul li:nth-child(even){width: 1px;height: 12px;background-color: #666;margin: 9px 15px;}.arrow-icon::after{content:'\e91e';font-family:'icomoon';margin-left: 5px;}/* header 头部模块 */.header{/* 相对定位 */position: relative;height: 105px;}.logo{/* 绝对定位 */position: absolute;top: 25px;width: 170px;height: 60px;}.logo a{display: block;width: 170px;height: 60px;background:url(../images/logo.png);/* 隐藏文字 */font-size: 0;}.search{position: absolute;left: 345px;top: 25px;/* 盒子有边框 高度和宽度需要减去 */width: 534px;height: 36px;border: 2px solid #b1191a;}.search input{float: left;width: 450px;height: 32px;padding-left: 10px;}.search button{float: right;width: 80px;/* 此处高度与 input 不一样 */height: 34px;background-color: #b1191a;font-size: 16px;color: #fff;}.hotwords{position: absolute;left: 345px;top: 70px;}.hotwords a{margin: 0 10px;}.shopcar{position: absolute;top: 25px;right: 60px;width: 140px;height: 35px;border: 1px solid #dfdfdf;background-color: #f7f7f7;/* 文字水平垂直居中 */line-height: 35px;text-align: center;}.shopcar::before{content:'\e93a';font-family:'icomoon';margin-right: 5px;/* 更改购物车颜色 */color: #b1191a;}.shopcar::after{content:'\e920';font-family:'icomoon';margin-left: 10px;}.count{position: absolute;top: -5px;left: 90px;height: 14px;/* 子元素继承父元素的行高 */line-height: 14px;color: #fff;background-color: #e60012;padding: 0 5px;border-radius: 7px 7px 7px 0;}
3、副导航
3.1 页面框架
<divclass="nav"><divclass="w"><!-- 左边盒子 --><divclass="sk-list"><ul><li><ahref="#">品优秒杀</a></li><li><ahref="#">即将售罄</a></li><li><ahref="#">超值低价</a></li></ul></div><!-- 右边盒子 --><divclass="sk-con"><ul><li><ahref="#">女装</a></li><li><ahref="#"class="style_red">女鞋</a></li><li><ahref="#">男装</a></li><li><ahref="#">男鞋</a></li><li><ahref="#">母婴童装</a></li><li><ahref="#">食品</a></li><li><ahref="#">智能数码</a></li><li><ahref="#">运动户外</a></li><li><ahref="#">更多分类</a></li></ul></div></div></div>
3.2 格式文件
.nav{/* 导航栏溢出 长度过大 超出部分隐藏 */overflow: hidden;}.sk{position: absolute;top: 40px;left: 190px;border-left: 1px solid #c81523;padding: 3px 0 0 15px;}.sk-list{float: left;}.sk-list ul li{float: left;}.sk-list ul li a{display: block;line-height: 50px;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: 50px;padding: 0 20px;font-size: 14px;}.sk-con ul li:last-child a::after{content:'\e91e';font-family:'icomoon';}
4、列表详情页
4.1 页面框架
<divclass="w sk-container"><divclass="sk-hd"><imgsrc="upload/bg.png"></div><divclass="sk-bd"><ulclass="clearfix"><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li></ul></div></div>
4.2 格式文件
.sk-bd ul li{/* 超出部分会盖住边框 */overflow: hidden;float: left;margin-right: 13px;width: 290px;height: 460px;border: 1px solid tranparent;}.sk-bd ul li:nth-child(4n){margin-right: 0px;}.sk-bd ul li:hover{border: 1px solid #c81523;}
5、主页共用尾部模块
5.1 页面框架
<footerclass="footer"><divclass="w"><!-- 第一行 --><divclass="mod_service"><ul><li><h5class="service1"></h5><divclass="service_item"><h4>正品保障</h4><p>正品保障,提供发货</p></div></li><li><h5class="service2"></h5><divclass="service_item"><h4>极速物流</h4><p>极速物流,极速送达</p></div></li><li><h5class="service3"></h5><divclass="service_item"><h4>无忧售后</h4><p>7天无理由退货</p></div></li><li><h5class="service4"></h5><divclass="service_item"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li></ul></div><!-- 第二行 --><divclass="mod_help"><dl><dt>购物指南</dt><dd><ahref="#">购物流程</a></dd><dd><ahref="#">会员介绍</a></dd><dd><ahref="#">生活旅行/团购</a></dd><dd><ahref="#">常见问题</a></dd><dd><ahref="#">大家电</a></dd><dd><ahref="#">联系客服</a></dd></dl><dl><dt>配送方式</dt><dd><ahref="#">上门自提</a></dd><dd><ahref="#">211限时达</a></dd><dd><ahref="#">配送服务查询</a></dd><dd><ahref="#">配送费收取标准</a></dd><dd><ahref="#">海外配送</a></dd></dl><dl><dt>支付方式</dt><dd><ahref="#">货到付款</a></dd><dd><ahref="#">在线支付</a></dd><dd><ahref="#">分期付款</a></dd><dd><ahref="#">邮政汇款</a></dd><dd><ahref="#">公司转账</a></dd></dl><dl><dt>售后服务</dt><dd><ahref="#">售后政策</a></dd><dd><ahref="#">价格保护</a></dd><dd><ahref="#">退款说明</a></dd><dd><ahref="#">返修/退换货</a></dd><dd><ahref="#">取消订单</a></dd></dl><dl><dt>特色服务</dt><dd><ahref="#">夺宝岛</a></dd><dd><ahref="#">DIY装机</a></dd><dd><ahref="#">延保服务</a></dd><dd><ahref="#">品优购E卡</a></dd><dd><ahref="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd><imgsrc="images/wx.jpg"alt="">
品优购客户端
</dd></dl></div><!-- 第三行 --><divclass="mod_copyright"><divclass="links"><ahref="#">关于我们</a> |
<ahref="#">联系我们</a> |
<ahref="#">联系客服</a> |
<ahref="#">商家入驻</a> |
<ahref="#">营销中心</a> |
<ahref="#">手机品优购</a> |
<ahref="#">友情链接</a> |
<ahref="#">销售联盟</a> |
<ahref="#">品优购社区</a> |
<ahref="#">品优购公益</a></div><divclass="copyright">
地址: 江西省九江市浔阳区浔阳东路169号
邮编: 332000 电话:400-618-4000
传真: 010-82935100
邮箱: [email protected]<br>
京ICP备08001421号 京公网安备110108007702
</div></div></div></footer>
5.2 格式文件
.footer{height: 415px;background-color: #f5f5f5;padding-top: 30px;}.mod_service{height: 80px;border-bottom: 1px solid #ccc;}.mod_service ul li{float: left;height: 50px;width: 300px;padding-left: 35px;}.mod_service ul li h5{float: left;width: 50px;height: 50px;margin-right: 10px;}.service1{background:url(../images/icons.png) no-repeat -252px -2px;}.service2{background:url(../images/icons.png) no-repeat -255px -54px;}.service3{background:url(../images/icons.png) no-repeat -257px -105px;}.service4{background:url(../images/icons.png) no-repeat -257px -157px;}.service_item h4{font-size: 14px;}.service_item p{font-size: 12px;}.mod_help{height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;}.mod_help dl{float: left;width: 200px;}.mod_help dl:last-child{width: 90px;text-align: center;}.mod_help dl dt{font-size: 16px;margin-bottom: 10px;}.mod_copyright{text-align: center;padding-top: 20px;}.links{margin-bottom: 15px;}.links a{margin: 0 3px;}.copyright{line-height: 20px;}
三、注册页
1、页面开头
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>个人注册</title><!-- 引入图标 --><linkrel="shortcut icon"href="favicon.ico"><linkrel="stylesheet"href="css/base.css"><linkrel="stylesheet"href="css/register.css"></head><body></body></html>
2、头部区域
2.1 页面框架
<header><divclass="logo"><ahref="index.html"><imgsrc="images/logo.png"></a></div></header>
2.2 格式文件
.w{width: 1200px;margin: 0 auto;}header{height: 85px;border-bottom: 2px solid #c81523;}.logo{padding-top: 18px;}
3、主体区域
3.1 页面框架
<divclass="registerarea"><!-- 上部盒子 --><h3>
注册新用户
<divclass="login">
我有账号,去<ahref="#">登陆</a></div></h3><!-- 下部盒子 --><divclass="reg-form"><formaction=""><ul><li><labelfor="">手机号: </label><inputtype="text"class="inp"><spanclass="error"><iclass="error-icon"></i>
手机号码格式不正确,请重新输入
</span></li><li><labelfor="">短信验证码: </label><inputtype="text"class="inp"><spanclass="success"><iclass="success-icon"></i>
短信验证码正确
</span></li><li><labelfor="">登录密码: </label><inputtype="password"class="inp"><spanclass="error"><iclass="error-icon"></i>
密码不少于6位数,请重新输入
</span></li><liclass="safe">
安全程度
<emclass="ruo">弱</em><emclass="zhong">中</em><emclass="qiang">强</em></li><li><labelfor="">确认密码: </label><inputtype="passwor"class="inp"><spanclass="error"><iclass="error-icon"></i>
密码不一致,请重新输入
</span></li><liclass="agree"><inputtype="checkbox">同意协议并注册
<ahref="#">《知晓用户协议》</a></li><li><inputtype="submit"value="完成注册"class="btn"></li></ul></form></div></div>
3.2 格式文件
.registerarea{margin-top: 20px;height: 530px;border: 1px solid #ccc;}.registerarea h3{height: 50px;border-bottom: 1px solid #ccc;background-color: #ececec;line-height: 50px;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: 90px;text-align: right;}.reg-form ul li .inp{width: 240px;height: 38px;border: 1px solid #ccc;}.error{color: red;}.error-icon,
.success-icon{display: inline-block;/* 图片与文字居中显示 */vertical-align: middle;width: 20px;height: 20px;background:url(../images/error.png) no-repeat;margin-top: -5px;}.success{color: green;}.success-icon{background:url(../images/success.png) no-repeat;}.safe{padding-left: 166px;}.safe em{padding: 0 12px;color: #fff;}.ruo{background-color: #de1111;}.zhong{background-color: #40b83f;}.qiang{background-color: #f79100;}.agree{margin-left: 115px;}.agree input{vertical-align: middle;}.agree a{color: #1ab1e6;}.btn{margin: 20px 0 0 110px;width: 200px;height: 35px;background-color: #c81623;font-size: 14px;color: #fff;}
4、尾部区域
4.1 页面框架
<footerclass="footer"><divclass="w"><divclass="mod_copyright"><divclass="links"><ahref="#">关于我们</a> |
<ahref="#">联系我们</a> |
<ahref="#">联系客服</a> |
<ahref="#">商家入驻</a> |
<ahref="#">营销中心</a> |
<ahref="#">手机品优购</a> |
<ahref="#">友情链接</a> |
<ahref="#">销售联盟</a> |
<ahref="#">品优购社区</a> |
<ahref="#">品优购公益</a></div><divclass="copyright">
地址: 江西省九江市浔阳区浔阳东路169号
邮编: 332000 电话:400-618-4000
传真: 010-82935100
邮箱: [email protected]<br>
京ICP备08001421号 京公网安备110108007702
</div></div></div></footer>
4.2 格式文件
.mod_help{height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;}.mod_help dl{float: left;width: 200px;}.mod_help dl:last-child{width: 90px;text-align: center;}.mod_help dl dt{font-size: 16px;margin-bottom: 10px;}.mod_copyright{text-align: center;padding-top: 20px;}.links{margin-bottom: 15px;}.links a{margin: 0 3px;}.copyright{line-height: 20px;}
四、完整代码
1、主页框架文件
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- 优化网站 TDK --><title>品优购商城 - 综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><metaname="description"content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母
婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/><metaname="keywords"content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/><!-- 引入图标 --><linkrel="shortcut icon"href="favicon.ico"><linkrel="stylesheet"href="css/base.css"><linkrel="stylesheet"href="css/common.css"><linkrel="stylesheet"href="css/index.css"></head><body><!-- 快捷导航模块 --><divclass="shortcut"><divclass="w"><!-- 左边盒子 --><divclass="fl"><ul><li>品优购欢迎您！ </li><li><ahref="#">请登录 </a><ahref="register.html"class="style_red">免费注册</a></li></ul></div><!-- 右边盒子 --><divclass="fr"><ul><li>我的订单</li><li></li><liclass="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><liclass="arrow-icon">关注品优购</li><li></li><liclass="arrow-icon">客户服务</li><li></li><liclass="arrow-icon">网站导航</li></ul></div></div></div><!-- header 头部模块 --><headerclass="header w"><!-- logo 模块 --><divclass="logo"><h1><ahref="index.html"title="品优购商城">品优购商城</a></h1></div><!-- search 模块 --><divclass="search"><inputtype="search"placeholder="语言开发"><button>搜索</button></div><!-- hotwords 模块 --><divclass="hotwords"><ahref="#"class="style_red">优惠购首发</a><ahref="#">亿元优惠</a><ahref="#">9.9元团购</a><ahref="#">每满99减30</a><ahref="#">办公用品</a><ahref="#">电脑</a><ahref="#">通信</a></div><!-- shopcar 模块 --><divclass="shopcar">
我的购物车
<iclass="count">8</i></div></header><!-- nav 模块 --><divclass="nav"><divclass="w"><!-- 左边盒子 --><divclass="dropdown fl"><divclass="dt">全部商品分类</div><divclass="dd"><ul><li><ahref="#">家用电器</a></li><li><ahref="list.html">手机、</a><ahref="#">数码、</a><ahref="#">通信</a></li><li><ahref="#">电脑、</a><ahref="#">办公</a></li><li><ahref="#">家居、</a><ahref="#">家具、</a><ahref="#">家装、</a><ahref="#">厨具</a></li><li><ahref="#">男装、</a><ahref="#">女装、</a><ahref="#">童装、</a><ahref="#">内衣</a></li><li><ahref="#">个户化妆、</a><ahref="#">清洁用品、</a><ahref="#">宠物</a></li><li><ahref="#">鞋靴、</a><ahref="#">箱包、</a><ahref="#">珠宝、</a><ahref="#">奢侈品</a></li><li><ahref="#">运动户外、</a><ahref="#">钟表</a></li><li><ahref="#">汽车、</a><ahref="#">汽车用品</a></li><li><ahref="#">母婴、</a><ahref="#">玩具乐器</a></li><li><ahref="#">食品、</a><ahref="#">酒类、</a><ahref="#">生鲜、</a><ahref="#">特产</a></li><li><ahref="#">医药保健</a></li><li><ahref="#">图书、</a><ahref="#">音像、</a><ahref="#">电子书</a></li><li><ahref="#">彩票、</a><ahref="#">旅行、</a><ahref="#">充值、</a><ahref="#">票务</a></li><li><ahref="#">理财、</a><ahref="#">众筹、</a><ahref="#">白条、</a><ahref="#">保险</a></li></ul></div></div><!-- 右边盒子 --><divclass="navitems fl"><ul><li><ahref="#">服装城</a></li><li><ahref="#">美妆馆</a></li><li><ahref="#">传智超市</a></li><li><ahref="#">全球购</a></li><li><ahref="#">闪购</a></li><li><ahref="#">团购</a></li><li><ahref="#">拍卖</a></li><li><ahref="#">有趣</a></li></ul></div></div></div><!-- 首页 main 模块 --><divclass="w"><divclass="main"><!-- 焦点图 --><divclass="focus fl"><ul><li><imgsrc="upload/focus.png"></li></ul></div><!-- 快报模块 --><divclass="newsflash fr"><!-- 新闻模块 --><divclass="news"><divclass="new-hd"><h5class="fl">品优购快报</h5><ahref="#"class="more fr">更多</a></div><divclass="new-bd"><ul><li><ahref="#"><strong>[特惠]</strong>备战开学季 全民半价购数码 大牌爆款赤裸价对拼</a></li><li><ahref="#"><strong>[公告]</strong>品优稳占家电网购六成份额 大牌爆款赤裸价对拼</a></li><li><ahref="#"><strong>[特惠]</strong>百元中秋全品类礼卷限量领 大牌爆款赤裸价对拼</a></li><li><ahref="#"><strong>[公告]</strong>上品优生鲜 杭州西湖大闸蟹 大牌爆款赤裸价对拼</a></li><li><ahref="#"><strong>[特惠]</strong>每日享折扣品优品质优 大牌爆款赤裸价对拼</a></li></ul></div></div><!-- 生活服务模块 --><divclass="lifeservice"><ul><li><iclass="lifeservice01"></i><p>话费</p></li><li><iclass="lifeservice02"></i><p>机票</p></li><li><iclass="lifeservice03"></i><p>电影票</p></li><li><iclass="lifeservice04"></i><p>游戏</p></li><li><iclass="lifeservice05"></i><p>彩票</p></li><li><iclass="lifeservice06"></i><p>加油卡</p></li><li><iclass="lifeservice07"></i><p>酒店</p></li><li><iclass="lifeservice08"></i><p>火车票</p></li><li><iclass="lifeservice09"></i><p>众筹</p></li><li><iclass="lifeservice10"></i><p>理财</p></li><li><iclass="lifeservice11"></i><p>礼品卡</p></li><li><iclass="lifeservice12"></i><p>白条</p></li></ul></div><!-- 广告模块 --><divclass="bargain"><imgsrc="upload/bargain.png"></div></div></div></div><!-- 推荐模块 --><divclass="w recom"><divclass="recom-hd fl"><imgsrc="images/recom.png"></div><divclass="recom-bd fl"><ul><li><imgsrc="upload/recom.jpg"></li><li><imgsrc="upload/recom.jpg"></li><li><imgsrc="upload/recom.jpg"></li><li><imgsrc="upload/recom.jpg"></li></ul></div></div><!-- 楼层区域模块 --><divclass="floor"><!-- 第一楼 家用电器 --><divclass="w jiadian"><!-- 头部区域 --><divclass="box-hd"><h3>家用电器</h3><divclass="tab-list fr"><ul><li><ahref="#"class="style_red">热门</a>|</li><li><ahref="#">大家电</a>|</li><li><ahref="#">生活电器</a>|</li><li><ahref="#">厨房电器</a>|</li><li><ahref="#">个护健康</a>|</li><li><ahref="#">应季电器</a>|</li><li><ahref="#">空气/净水</a>|</li><li><ahref="#">新奇特</a>|</li><li><ahref="#">高端电器</a></li></ul></div></div><!-- 主体区域 --><divclass="box-bd"><divclass="tab-content"><divclass="tab-list-item"><!-- 一号盒子 --><divclass="col-210"><ul><li><ahref="#">节能补贴</a></li><li><ahref="#">4K电视</a></li><li><ahref="#">空气净化器</a></li><li><ahref="#">电饭煲</a></li><li><ahref="#">滚筒洗衣机</a></li><li><ahref="#">电热水器</a></li></ul><ahref="#"><imgsrc="upload/floor-1-1-1.png"></a></div><!-- 二号盒子 --><divclass="col-330"><ahref="#"><imgsrc="upload/floor-1-2-1.png"alt=""></a></div><!-- 三号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-3-1.png"></a><ahref="#"><imgsrc="upload/floor-1-3-2.png"></a></div><!-- 四号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-4-1.png"></a></div><!-- 五号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-5-1.png"></a><ahref="#"><imgsrc="upload/floor-1-5-2.png"></a></div></div></div></div></div><!-- 第二楼 手机 --><divclass="w jiadian"><!-- 头部区域 --><divclass="box-hd"><h3>手机通讯</h3><divclass="tab-list fr"><ul><li><ahref="#"class="style_red">热门</a>|</li><li><ahref="#">大家电</a>|</li><li><ahref="#">生活电器</a>|</li><li><ahref="#">厨房电器</a>|</li><li><ahref="#">个护健康</a>|</li><li><ahref="#">应季电器</a>|</li><li><ahref="#">空气/净水</a>|</li><li><ahref="#">新奇特</a>|</li><li><ahref="#">高端电器</a></li></ul></div></div><!-- 主体区域 --><divclass="box-bd"><divclass="tab-content"><divclass="tab-list-item"><!-- 一号盒子 --><divclass="col-210"><ul><li><ahref="#">节能补贴</a></li><li><ahref="#">4K电视</a></li><li><ahref="#">空气净化器</a></li><li><ahref="#">电饭煲</a></li><li><ahref="#">滚筒洗衣机</a></li><li><ahref="#">电热水器</a></li></ul><ahref="#"><imgsrc="upload/floor-1-1-1.png"></a></div><!-- 二号盒子 --><divclass="col-330"><ahref="#"><imgsrc="upload/floor-1-2-1.png"alt=""></a></div><!-- 三号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-3-1.png"></a><ahref="#"><imgsrc="upload/floor-1-3-2.png"></a></div><!-- 四号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-4-1.png"></a></div><!-- 五号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-5-1.png"></a><ahref="#"><imgsrc="upload/floor-1-5-2.png"></a></div></div></div></div></div><!-- 第三楼 机械器材 --><divclass="w jiadian"><!-- 头部区域 --><divclass="box-hd"><h3>机械器材</h3><divclass="tab-list fr"><ul><li><ahref="#"class="style_red">热门</a>|</li><li><ahref="#">大家电</a>|</li><li><ahref="#">生活电器</a>|</li><li><ahref="#">厨房电器</a>|</li><li><ahref="#">个护健康</a>|</li><li><ahref="#">应季电器</a>|</li><li><ahref="#">空气/净水</a>|</li><li><ahref="#">新奇特</a>|</li><li><ahref="#">高端电器</a></li></ul></div></div><!-- 主体区域 --><divclass="box-bd"><divclass="tab-content"><divclass="tab-list-item"><!-- 一号盒子 --><divclass="col-210"><ul><li><ahref="#">节能补贴</a></li><li><ahref="#">4K电视</a></li><li><ahref="#">空气净化器</a></li><li><ahref="#">电饭煲</a></li><li><ahref="#">滚筒洗衣机</a></li><li><ahref="#">电热水器</a></li></ul><ahref="#"><imgsrc="upload/floor-1-1-1.png"></a></div><!-- 二号盒子 --><divclass="col-330"><ahref="#"><imgsrc="upload/floor-1-2-1.png"alt=""></a></div><!-- 三号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-3-1.png"></a><ahref="#"><imgsrc="upload/floor-1-3-2.png"></a></div><!-- 四号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-4-1.png"></a></div><!-- 五号盒子 --><divclass="col-220"><ahref="#"><imgsrc="upload/floor-1-5-1.png"></a><ahref="#"><imgsrc="upload/floor-1-5-2.png"></a></div></div></div></div></div></div><!-- footer 模块 --><footerclass="footer"><divclass="w"><!-- 第一行 --><divclass="mod_service"><ul><li><h5class="service1"></h5><divclass="service_item"><h4>正品保障</h4><p>正品保障,提供发货</p></div></li><li><h5class="service2"></h5><divclass="service_item"><h4>极速物流</h4><p>极速物流,极速送达</p></div></li><li><h5class="service3"></h5><divclass="service_item"><h4>无忧售后</h4><p>7天无理由退货</p></div></li><li><h5class="service4"></h5><divclass="service_item"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li></ul></div><!-- 第二行 --><divclass="mod_help"><dl><dt>购物指南</dt><dd><ahref="#">购物流程</a></dd><dd><ahref="#">会员介绍</a></dd><dd><ahref="#">生活旅行/团购</a></dd><dd><ahref="#">常见问题</a></dd><dd><ahref="#">大家电</a></dd><dd><ahref="#">联系客服</a></dd></dl><dl><dt>配送方式</dt><dd><ahref="#">上门自提</a></dd><dd><ahref="#">211限时达</a></dd><dd><ahref="#">配送服务查询</a></dd><dd><ahref="#">配送费收取标准</a></dd><dd><ahref="#">海外配送</a></dd></dl><dl><dt>支付方式</dt><dd><ahref="#">货到付款</a></dd><dd><ahref="#">在线支付</a></dd><dd><ahref="#">分期付款</a></dd><dd><ahref="#">邮政汇款</a></dd><dd><ahref="#">公司转账</a></dd></dl><dl><dt>售后服务</dt><dd><ahref="#">售后政策</a></dd><dd><ahref="#">价格保护</a></dd><dd><ahref="#">退款说明</a></dd><dd><ahref="#">返修/退换货</a></dd><dd><ahref="#">取消订单</a></dd></dl><dl><dt>特色服务</dt><dd><ahref="#">夺宝岛</a></dd><dd><ahref="#">DIY装机</a></dd><dd><ahref="#">延保服务</a></dd><dd><ahref="#">品优购E卡</a></dd><dd><ahref="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd><imgsrc="images/wx.jpg"alt="">
品优购客户端
</dd></dl></div><!-- 第三行 --><divclass="mod_copyright"><divclass="links"><ahref="#">关于我们</a> |
<ahref="#">联系我们</a> |
<ahref="#">联系客服</a> |
<ahref="#">商家入驻</a> |
<ahref="#">营销中心</a> |
<ahref="#">手机品优购</a> |
<ahref="#">友情链接</a> |
<ahref="#">销售联盟</a> |
<ahref="#">品优购社区</a> |
<ahref="#">品优购公益</a></div><divclass="copyright">
地址: 江西省九江市浔阳区浔阳东路169号
邮编: 332000 电话:400-618-4000
传真: 010-82935100
邮箱: [email protected]<br>
京ICP备08001421号 京公网安备110108007702
</div></div></div></footer></body></html>
2、列表页框架文件
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- 优化网站 TDK --><title>列表页 - 综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><metaname="description"content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母
婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/><metaname="keywords"content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/><!-- 引入图标 --><linkrel="shortcut icon"href="favicon.ico"><linkrel="stylesheet"href="css/base.css"><linkrel="stylesheet"href="css/common.css"><linkrel="stylesheet"href="css/list.css"></head><body><!-- 快捷导航模块 --><divclass="shortcut"><divclass="w"><!-- 左边盒子 --><divclass="fl"><ul><li>品优购欢迎您！ </li><li><ahref="#">请登录 </a><ahref="#"class="style_red">免费注册</a></li></ul></div><!-- 右边盒子 --><divclass="fr"><ul><li>我的订单</li><li></li><liclass="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><liclass="arrow-icon">关注品优购</li><li></li><liclass="arrow-icon">客户服务</li><li></li><liclass="arrow-icon">网站导航</li></ul></div></div></div><!-- header 头部模块 --><headerclass="header w"><!-- logo 模块 --><divclass="logo"><h1><ahref="index.html"title="品优购商城">品优购商城</a></h1></div><!-- 列表页秒杀模块 --><divclass="sk"><imgsrc="images/sk.png"></div><!-- search 模块 --><divclass="search"><inputtype="search"placeholder="语言开发"><button>搜索</button></div><!-- hotwords 模块 --><divclass="hotwords"><ahref="#"class="style_red">优惠购首发</a><ahref="#">亿元优惠</a><ahref="#">9.9元团购</a><ahref="#">每满99减30</a><ahref="#">办公用品</a><ahref="#">电脑</a><ahref="#">通信</a></div><!-- shopcar 模块 --><divclass="shopcar">
我的购物车
<iclass="count">8</i></div></header><!-- nav 模块 --><divclass="nav"><divclass="w"><!-- 左边盒子 --><divclass="sk-list"><ul><li><ahref="#">品优秒杀</a></li><li><ahref="#">即将售罄</a></li><li><ahref="#">超值低价</a></li></ul></div><!-- 右边盒子 --><divclass="sk-con"><ul><li><ahref="#">女装</a></li><li><ahref="#"class="style_red">女鞋</a></li><li><ahref="#">男装</a></li><li><ahref="#">男鞋</a></li><li><ahref="#">母婴童装</a></li><li><ahref="#">食品</a></li><li><ahref="#">智能数码</a></li><li><ahref="#">运动户外</a></li><li><ahref="#">更多分类</a></li></ul></div></div></div><!-- 列表页主体 --><divclass="w sk-container"><divclass="sk-hd"><imgsrc="upload/bg.png"></div><divclass="sk-bd"><ulclass="clearfix"><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li><li><imgsrc="upload/list.jpg"></li></ul></div></div><!-- footer 模块 --><footerclass="footer"><divclass="w"><!-- 第一行 --><divclass="mod_service"><ul><li><h5class="service1"></h5><divclass="service_item"><h4>正品保障</h4><p>正品保障,提供发货</p></div></li><li><h5class="service2"></h5><divclass="service_item"><h4>极速物流</h4><p>极速物流,极速送达</p></div></li><li><h5class="service3"></h5><divclass="service_item"><h4>无忧售后</h4><p>7天无理由退货</p></div></li><li><h5class="service4"></h5><divclass="service_item"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li></ul></div><!-- 第二行 --><divclass="mod_help"><dl><dt>购物指南</dt><dd><ahref="#">购物流程</a></dd><dd><ahref="#">会员介绍</a></dd><dd><ahref="#">生活旅行/团购</a></dd><dd><ahref="#">常见问题</a></dd><dd><ahref="#">大家电</a></dd><dd><ahref="#">联系客服</a></dd></dl><dl><dt>配送方式</dt><dd><ahref="#">上门自提</a></dd><dd><ahref="#">211限时达</a></dd><dd><ahref="#">配送服务查询</a></dd><dd><ahref="#">配送费收取标准</a></dd><dd><ahref="#">海外配送</a></dd></dl><dl><dt>支付方式</dt><dd><ahref="#">货到付款</a></dd><dd><ahref="#">在线支付</a></dd><dd><ahref="#">分期付款</a></dd><dd><ahref="#">邮政汇款</a></dd><dd><ahref="#">公司转账</a></dd></dl><dl><dt>售后服务</dt><dd><ahref="#">售后政策</a></dd><dd><ahref="#">价格保护</a></dd><dd><ahref="#">退款说明</a></dd><dd><ahref="#">返修/退换货</a></dd><dd><ahref="#">取消订单</a></dd></dl><dl><dt>特色服务</dt><dd><ahref="#">夺宝岛</a></dd><dd><ahref="#">DIY装机</a></dd><dd><ahref="#">延保服务</a></dd><dd><ahref="#">品优购E卡</a></dd><dd><ahref="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd><imgsrc="images/wx.jpg"alt="">
品优购客户端
</dd></dl></div><!-- 第三行 --><divclass="mod_copyright"><divclass="links"><ahref="#">关于我们</a> |
<ahref="#">联系我们</a> |
<ahref="#">联系客服</a> |
<ahref="#">商家入驻</a> |
<ahref="#">营销中心</a> |
<ahref="#">手机品优购</a> |
<ahref="#">友情链接</a> |
<ahref="#">销售联盟</a> |
<ahref="#">品优购社区</a> |
<ahref="#">品优购公益</a></div><divclass="copyright">
地址: 江西省九江市浔阳区浔阳东路169号
邮编: 332000 电话:400-618-4000
传真: 010-82935100
邮箱: [email protected]<br>
京ICP备08001421号 京公网安备110108007702
</div></div></div></footer></body></html>
3、注册页框架文件
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>个人注册</title><!-- 引入图标 --><linkrel="shortcut icon"href="favicon.ico"><linkrel="stylesheet"href="css/base.css"><linkrel="stylesheet"href="css/register.css"></head><body><divclass="w"><!-- 头部区域 --><header><divclass="logo"><ahref="index.html"><imgsrc="images/logo.png"></a></div></header><!-- 主体区域 --><divclass="registerarea"><!-- 上部盒子 --><h3>
注册新用户
<divclass="login">
我有账号,去<ahref="#">登陆</a></div></h3><!-- 下部盒子 --><divclass="reg-form"><formaction=""><ul><li><labelfor="">手机号: </label><inputtype="text"class="inp"><spanclass="error"><iclass="error-icon"></i>
手机号码格式不正确,请重新输入
</span></li><li><labelfor="">短信验证码: </label><inputtype="text"class="inp"><spanclass="success"><iclass="success-icon"></i>
短信验证码正确
</span></li><li><labelfor="">登录密码: </label><inputtype="password"class="inp"><spanclass="error"><iclass="error-icon"></i>
密码不少于6位数,请重新输入
</span></li><liclass="safe">
安全程度
<emclass="ruo">弱</em><emclass="zhong">中</em><emclass="qiang">强</em></li><li><labelfor="">确认密码: </label><inputtype="passwor"class="inp"><spanclass="error"><iclass="error-icon"></i>
密码不一致,请重新输入
</span></li><liclass="agree"><inputtype="checkbox">同意协议并注册
<ahref="#">《知晓用户协议》</a></li><li><inputtype="submit"value="完成注册"class="btn"></li></ul></form></div></div><!-- 尾部区域 --><footerclass="footer"><divclass="w"><divclass="mod_copyright"><divclass="links"><ahref="#">关于我们</a> |
<ahref="#">联系我们</a> |
<ahref="#">联系客服</a> |
<ahref="#">商家入驻</a> |
<ahref="#">营销中心</a> |
<ahref="#">手机品优购</a> |
<ahref="#">友情链接</a> |
<ahref="#">销售联盟</a> |
<ahref="#">品优购社区</a> |
<ahref="#">品优购公益</a></div><divclass="copyright">
地址: 江西省九江市浔阳区浔阳东路169号
邮编: 332000 电话:400-618-4000
传真: 010-82935100
邮箱: [email protected]<br>
京ICP备08001421号 京公网安备110108007702
</div></div></div></footer></div></body></html>
4、统一样式文件
/* 所有标签的内外边距清零 */*{margin: 0;padding: 0;/* CSS3盒子模型 加padding时不需要修改宽度和高度 */box-sizing: border-box;}/* em 和 i 斜体的文字不倾斜 */em,
i{font-style: normal;}/* 去掉 li 的小圆点 */li{list-style: none;}img{/* border 0 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle;}button{/* 当鼠标经过 button 按钮的时候 鼠标变成小手 */cursor: pointer;}a{color: #666;text-decoration: none;}a:hover{color: #c81623
}button,
input{/* "\5B8B\4F53" 宋体 浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,"\5B8B\4F53", sans-serif;/* 手动去掉灰色边框 */border: 0;/* 去掉蓝色边框 */outline: none;}body{/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,"\5B8B\4F53", sans-serif;color: #666;}.hide,
.none{display: none;}.clearfix:after{visibility: hidden;clear: both;display: block;content:".";height: 0;}/* 清除浮动 */.clearfix:before,
.clearfix:after{content:"";display: table;}
5、共用样式文件
/* 声明字体图标 */@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;}/* 版型 */.w{width: 1200px;margin: 0 auto;}.fl{float: left;}.fr{float: right;}.style_red{color: #c81623;}/* 快捷导航模块 */.shortcut{height: 30px;line-height: 30px;background-color: #f1f1f1;}.shortcut ul li{float: left;}/* 选择所有的偶数 li */.shortcut .fr ul li:nth-child(even){width: 1px;height: 12px;background-color: #666;margin: 9px 15px;}.arrow-icon::after{content:'\e91e';font-family:'icomoon';margin-left: 5px;}/* header 头部模块 */.header{/* 相对定位 */position: relative;height: 105px;}.logo{/* 绝对定位 */position: absolute;top: 25px;width: 170px;height: 60px;}.logo a{display: block;width: 170px;height: 60px;background:url(../images/logo.png);/* 隐藏文字 */font-size: 0;}.search{position: absolute;left: 345px;top: 25px;/* 盒子有边框 高度和宽度需要减去 */width: 534px;height: 36px;border: 2px solid #b1191a;}.search input{float: left;width: 450px;height: 32px;padding-left: 10px;}.search button{float: right;width: 80px;/* 此处高度与 input 不一样 */height: 34px;background-color: #b1191a;font-size: 16px;color: #fff;}.hotwords{position: absolute;left: 345px;top: 70px;}.hotwords a{margin: 0 10px;}.shopcar{position: absolute;top: 25px;right: 60px;width: 140px;height: 35px;border: 1px solid #dfdfdf;background-color: #f7f7f7;/* 文字水平垂直居中 */line-height: 35px;text-align: center;}.shopcar::before{content:'\e93a';font-family:'icomoon';margin-right: 5px;/* 更改购物车颜色 */color: #b1191a;}.shopcar::after{content:'\e920';font-family:'icomoon';margin-left: 10px;}.count{position: absolute;top: -5px;left: 90px;height: 14px;/* 子元素继承父元素的行高 */line-height: 14px;color: #fff;background-color: #e60012;padding: 0 5px;border-radius: 7px 7px 7px 0;}/* nav 模块 */.nav{height: 48px;border-bottom: 2px solid #b1191a;}.nav .dropdown{width: 210px;/* 此处修改为 48px */height: 47px;background: #b1191a;}.nav .dropdown .dt{/* 与父亲一样宽 */width: 100%;height: 100%;color: #fff;text-align: center;line-height: 48px;font-size: 16px;}.nav .dropdown .dd{/* display: none; */width: 210px;height: 465px;background-color: #c81623;/* 压住了水平线 */margin-top: 1px;}.nav .dropdown .dd ul li{position: relative;/* 31 * 15 == 465 */height: 31px;line-height: 31px;margin-left: 2px;padding-left: 10px;}.nav .dropdown .dd ul li:hover{background-color: #fff;}.nav .dropdown .dd ul li::after{/* 父亲加相对定位 */position: absolute;top: 1px;right: 10px;content:'\e920';color: #fff;font-size: 14px;font-family:'icomoon';}.nav .dropdown .dd ul li a{font-size: 14px;color: #fff;}.nav .dropdown .dd ul li:hover a{color: #c81623;}.navitems ul li{float: left;}.navitems ul li a{display: block;height: 46px;line-height: 45px;font-size: 16px;padding: 0 25px;}/* 底部模块 */.footer{height: 415px;background-color: #f5f5f5;padding-top: 30px;}.mod_service{height: 80px;border-bottom: 1px solid #ccc;}.mod_service ul li{float: left;height: 50px;width: 300px;padding-left: 35px;}.mod_service ul li h5{float: left;width: 50px;height: 50px;margin-right: 10px;}.service1{background:url(../images/icons.png) no-repeat -252px -2px;}.service2{background:url(../images/icons.png) no-repeat -255px -54px;}.service3{background:url(../images/icons.png) no-repeat -257px -105px;}.service4{background:url(../images/icons.png) no-repeat -257px -157px;}.service_item h4{font-size: 14px;}.service_item p{font-size: 12px;}.mod_help{height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;}.mod_help dl{float: left;width: 200px;}.mod_help dl:last-child{width: 90px;text-align: center;}.mod_help dl dt{font-size: 16px;margin-bottom: 10px;}.mod_copyright{text-align: center;padding-top: 20px;}.links{margin-bottom: 15px;}.links a{margin: 0 3px;}.copyright{line-height: 20px;}
6、主页样式文件
/* main 模块 */.main{width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;}.focus{width: 720px;height: 455px;}.newsflash{width: 250px;height: 455px;}.news{height: 165px;border: 1px solid #e4e4e4;}.new-hd{height: 35px;line-height: 35px;border-bottom: 1px dotted #e4e4e4;}.new-hd h5{margin-left: 20px;font-size: 14px;}.new-hd .more{margin-right: 15px;}.new-hd .more::after{margin-left: 5px;content:'\e920';font-family:'icomoon';}.new-bd{padding: 5px 15px 0;}.new-bd ul li{height: 24px;line-height: 24px;/* 超出部分省略号显示 */overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.lifeservice{height: 210px;border-left: 1px solid #e4e4e4;}.lifeservice ul{/* 防止页面缩小时 li 被挤下去 */width: 252px;}.lifeservice ul li{float: left;/* 62 * 4 == 248 != 250 */width: 62px;/* 70 * 3 == 210 */height: 70px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;}.lifeservice ul li:nth-child(4n){/* 最后一个 li 宽一点 */width: 63px;}.lifeservice ul li i{display: inline-block;width: 30px;height: 30px;margin-top: 12px;}.lifeservice01{background:url(../images/icons.png) no-repeat -13px -11px;}.lifeservice02{background:url(../images/icons.png) no-repeat -75px -11px;}.lifeservice03{background:url(../images/icons.png) no-repeat -139px -11px;}.lifeservice04{background:url(../images/icons.png) no-repeat -203px -11px;}.lifeservice05{background:url(../images/icons.png) no-repeat -13px -81px;}.lifeservice06{background:url(../images/icons.png) no-repeat -75px -81px;}.lifeservice07{background:url(../images/icons.png) no-repeat -139px -81px;}.lifeservice08{background:url(../images/icons.png) no-repeat -203px -81px;}.lifeservice09{background:url(../images/icons.png) no-repeat -13px -152px;}.lifeservice10{background:url(../images/icons.png) no-repeat -75px -152px;}.lifeservice11{background:url(../images/icons.png) no-repeat -139px -152px;}.lifeservice12{background:url(../images/icons.png) no-repeat -203px -152px;}.bargain{margin-top: 5px;}/* 推荐模块 */.recom{height: 165px;margin-top: 10px;}.recom-hd{height: 165px;width: 208px;background-color: #5c5251;text-align: center;padding-top: 35px;}.recom-bd ul li{position: relative;float: left;}.recom-bd ul li img{/* 248 * 4 == 992 == 992 */width: 248px;height: 165px;}.recom-bd ul li:nth-child(-n+3):after{content:'';/* 父元素加相对定位 */position: absolute;top: 10px;right: 0;width: 1px;height: 145px;background-color: #ddd;}/* 楼层模块 */.floor .w{margin-top: 30px;}/* 家用电器模块 */.box-hd{height: 30px;border-bottom: 2px solid#c81623;}.jiadian .box-hd h3{float: left;font-size: 18px;color: #c81623;font-weight: 400;}.jiadian .tab-list{line-height: 30px;}.jiadian .tab-list ul li{float: left;}.jiadian .tab-list ul li a{margin: 0 15px;}.jiadian .box-bd{height: 360px;}.jiadian .box-bd .tab-list-item div{float: left;}.col-210{width: 210px;height: 360px;background-color: #f9f9f9;text-align: center;}.col-210 ul{padding-left: 12px;}.col-210 ul li{float: left;width: 85px;height: 34px;border-bottom: 1px solid #ccc;text-align: center;line-height: 33px;margin-right: 10px;}.col-330{width: 330px;height: 360px;}.col-220{width: 220px;height: 360px;}
7、列表页样式文件
.nav{/* 导航栏溢出 长度过大 超出部分隐藏 */overflow: hidden;}.sk{position: absolute;top: 40px;left: 190px;border-left: 1px solid #c81523;padding: 3px 0 0 15px;}.sk-list{float: left;}.sk-list ul li{float: left;}.sk-list ul li a{display: block;line-height: 50px;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: 50px;padding: 0 20px;font-size: 14px;}.sk-con ul li:last-child a::after{content:'\e91e';font-family:'icomoon';}.sk-bd ul li{/* 超出部分会盖住边框 */overflow: hidden;float: left;margin-right: 13px;width: 290px;height: 460px;border: 1px solid tranparent;}.sk-bd ul li:nth-child(4n){margin-right: 0px;}.sk-bd ul li:hover{border: 1px solid #c81523;}
8、注册页样式文件
.w{width: 1200px;margin: 0 auto;}header{height: 85px;border-bottom: 2px solid #c81523;}.logo{padding-top: 18px;}.registerarea{margin-top: 20px;height: 530px;border: 1px solid #ccc;}.registerarea h3{height: 50px;border-bottom: 1px solid #ccc;background-color: #ececec;line-height: 50px;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: 90px;text-align: right;}.reg-form ul li .inp{width: 240px;height: 38px;border: 1px solid #ccc;}.error{color: red;}.error-icon,
.success-icon{display: inline-block;/* 图片与文字居中显示 */vertical-align: middle;width: 20px;height: 20px;background:url(../images/error.png) no-repeat;margin-top: -5px;}.success{color: green;}.success-icon{background:url(../images/success.png) no-repeat;}.safe{padding-left: 166px;}.safe em{padding: 0 12px;color: #fff;}.ruo{background-color: #de1111;}.zhong{background-color: #40b83f;}.qiang{background-color: #f79100;}.agree{margin-left: 115px;}.agree input{vertical-align: middle;}.agree a{color: #1ab1e6;}.btn{margin: 20px 0 0 110px;width: 200px;height: 35px;background-color: #c81623;font-size: 14px;color: #fff;}/* 底部模块 */.mod_help{height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;}.mod_help dl{float: left;width: 200px;}.mod_help dl:last-child{width: 90px;text-align: center;}.mod_help dl dt{font-size: 16px;margin-bottom: 10px;}.mod_copyright{text-align: center;padding-top: 20px;}.links{margin-bottom: 15px;}.links a{margin: 0 3px;}.copyright{line-height: 20px;}
标签：
前端
本文转载自: https://blog.csdn.net/qq_52652401/article/details/141278330
版权归原作者 胆怯与勇敢 所有， 如有侵权，请联系我们删除。
版权归原作者 胆怯与勇敢 所有， 如有侵权，请联系我们删除。