HTML+CSS学习10

目录

  • HTML
        • 首页
        • 商品列表页
        • 登录注册页
  • CSS
        • 初始化样式
        • 公共样式
        • 首页样式
        • 商品列表页样式
        • 登录注册页样式

HTML

首页
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>品优购首页</title><!-- 网页说明 --><meta name="description" content="品优购.COM-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服饰服装、母婴、图书、食品等数万个优质产品" /><!-- 关键字 --><meta name="keywords" content="网上购物、网上商城、手机、笔记本、电脑、数码、手表、存储卡" /><!-- 引入样式 --><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/common.css" /><link rel="stylesheet" href="css/index.css" /><!-- 修改页面图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"  /></head><body><!-- 快捷导航栏 --><section class="shortcut"><div class="w"><div class="fl"><ul><li>欢迎使用品优购&nbsp;</li><li><a href="register.html">登录</a>&nbsp;<a href="register.html" class="style_red">注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon iconfont">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon iconfont">关注品优购</li><li></li><li class="arrow-icon iconfont">客户服务</li><li></li><li class="arrow-icon iconfont">网址导航</li></ul></div></div></section><!-- 头部搜索 --><div class="header w"><div class="logo"><!-- h1标签提权 --><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><div class="hotwords"><a href="" class="style_red">优惠购首发</a><a href="">亿元优惠</a><a href="">每满99减30</a><a href="">办公用品</a><a href="">电脑</a><a href="">通信</a><a href="">9.9元团购</a></div><div class="shopcar">添加购物车<i class="count">8</i></div></div><!-- 导航栏 --><div class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="dd"><ul><li><a href="list.html">家用电器</a></li><li><a href="list.html">手机</a>、<a href="">数码</a>、<a href="">通讯</a></li><li><a href="list.html">家用电器</a></li><li><a href="list.html">家用电器</a></li><li><a href="list.html">家用电器</a></li><li><a href="list.html">家用电器</a></li><li><a href="list.html">家用电器</a></li></ul></div></div><div class="navitems"><ul><li><a href="list.html">服装商城</a></li><li><a href="list.html">服装商城</a></li><li><a href="list.html">服装商城</a></li><li><a href="list.html">服装商城</a></li><li><a href="list.html">服装商城</a></li><li><a href="list.html">服装商城</a></li><li><a href="list.html">服装商城</a></li><li><a href="list.html">服装商城</a></li></ul></div></div></div><!-- 主体部分 --><div class="w"><!-- 广告区域 --><div class="main"><!-- 焦点图 --><div class="focus"><ul><li><img src="upload/box1.png" alt=""></li></ul></div><!-- 快报模块 --><div class="newsflash"><div class="news"><div class="news-hd"><h5>品优快购</h5><a href="" class="more">更多</a></div><div class="news-bd"><ul><li><a href="list.html"><strong>[重磅]</strong>备战开学季 全民优惠半折起</a></li><li><a href="list.html"><strong>[重磅]</strong>备战开学季 全民优惠半折起 精选优惠欢迎购买</a></li><li><a href="list.html"><strong>[重磅]</strong>备战开学季 全民优惠半折起</a></li><li><a href="list.html"><strong>[重磅]</strong>备战开学季 全民优惠半折起</a></li><li><a href="list.html"><strong>[重磅]</strong>备战开学季 全民优惠半折起</a></li></ul></div></div><div class="lifeservice"><ul><li><i class="icon-1"></i><p>话费</p></li><li><i class="icon-2"></i><p>话费</p></li><li><i class="icon-3"></i><p>话费</p></li><li><i class="icon-4"></i><p>话费</p></li><li><i class="icon-5"></i><p>话费</p></li><li><i class="icon-6"></i><p>话费</p></li><li><i class="icon-7"></i><p>话费</p></li><li><i class="icon-8"></i><p>话费</p></li><li><i class="icon-9"></i><p>话费</p></li><li><i class="icon-10"></i><p>话费</p></li><li><i class="icon-11"></i><p>话费</p></li><li><i class="icon-12"></i><p>话费</p></li></ul></div><div class="bargin"><img src="upload/bargin.png" alt=""></div></div></div></div><!-- 推荐模块 --><div class="w recom"><div class="recom-hd"><img src="img/recom.png" alt=""><p>今日推荐</p></div><div class="recom-bd"><ul><li><img src="upload/recom.jpg" alt=""></li><li><img src="upload/recom.jpg" alt=""></li><li><img src="upload/recom.jpg" alt=""></li><li><img src="upload/recom.jpg" alt=""></li></ul></div></div><!-- 商品区域 --><div class="floor"><!-- 家用电器 --><div class="w jiadian"><div class="box_hd"><h3>家用电器</h3><div class="tab-list"><ul><li><a href="list.html" class="style_red">热门</a>|</li><li><a href="list.html">大家电</a>|</li><li><a href="list.html">生活电器</a>|</li><li><a href="list.html">厨房电器</a>|</li><li><a href="list.html">生活电器</a>|</li><li><a href="list.html">个护健康</a>|</li><li><a href="list.html">应季电器</a>|</li><li><a href="list.html">空气净水</a>|</li><li><a href="list.html">新奇特</a>|</li><li><a href="list.html">高端电器</a></li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li></ul><a href=""><img src="upload/floor-1-1.png" alt=""></a></div><div class="col_329"><a href=""><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="" class="bb"><img src="upload/floor-1-2.png" alt=""></a><a href=""><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href=""><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href=""><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div><!-- 手机通讯--><div class="w jiadian"><div class="box_hd"><h3>手机通讯</h3><div class="tab-list"><ul><li><a href="#" class="style_red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li></ul><a href=""><img src="upload/floor-1-1.png" alt=""></a></div><div class="col_329"><a href=""><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="" class="bb"><img src="upload/floor-1-2.png" alt=""></a><a href=""><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href=""><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href=""><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div></div><!-- 底部 --><div class="footer"><div class="w"><div class="mod_service"><ul><!-- .png --><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="img/code.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="">关于我们</a><a href="">联系我们</a><a href="">关于我们</a><a href="">商家入驻</a><a href="">关于我们</a><a href="">营销中心</a><a href="">关于我们</a><a href="">友情链接</a><a href="">关于我们</a><a href="">营销中心</a></div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100<br>京ICP备08001421号京公网安备110108007702</div></div></div></div></body>
</html>
商品列表页
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商品列表页</title><!-- 关键字 --><meta name="keywords" content="网上购物、网上商城、手机、笔记本、电脑、数码、手表、存储卡" /><!-- 引入样式 --><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/common.css" /><link rel="stylesheet" href="css/list.css" /><!-- 修改页面图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"  /></head><body><!-- 快捷导航栏 --><section class="shortcut"><div class="w"><div class="fl"><ul><li>欢迎使用品优购&nbsp;</li><li><a href="">登录</a>&nbsp;<a href="" class="style_red">注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon iconfont">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon iconfont">关注品优购</li><li></li><li class="arrow-icon iconfont">客户服务</li><li></li><li class="arrow-icon iconfont">网址导航</li></ul></div></div></section><!-- 头部搜索 --><div class="header w"><div class="logo"><!-- h1标签提权 --><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><div class="sk"><img src="img/sk.png" alt=""></div><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><div class="hotwords"><a href="" class="style_red">优惠购首发</a><a href="">亿元优惠</a><a href="">每满99减30</a><a href="">办公用品</a><a href="">电脑</a><a href="">通信</a><a href="">9.9元团购</a></div><div class="shopcar">添加购物车<i class="count">8</i></div></div><!-- 导航栏 --><div 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></div><!-- 列表页主体 --><div class="w sk-container"><div class="sk-hd"><img src="upload/bargin.png" alt=""></div><div class="sk-bd"><ul class="clearfix"><li><img src="upload/floor-1-1.png" alt=""></li><li><img src="upload/floor-1-1.png" alt=""></li><li><img src="upload/floor-1-1.png" alt=""></li><li><img src="upload/floor-1-1.png" alt=""></li><li><img src="upload/floor-1-1.png" alt=""></li><li><img src="upload/floor-1-1.png" alt=""></li><li><img src="upload/floor-1-1.png" alt=""></li></ul></div></div><!-- 底部 --><div class="footer"><div class="w"><div class="mod_service"><ul><!-- .png --><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="img/code.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="">关于我们</a><a href="">联系我们</a><a href="">关于我们</a><a href="">商家入驻</a><a href="">关于我们</a><a href="">营销中心</a><a href="">关于我们</a><a href="">友情链接</a><a href="">关于我们</a><a href="">营销中心</a></div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100<br>京ICP备08001421号京公网安备110108007702</div></div></div></div></body>
</html>
登录注册页
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册页</title><!-- 引入样式 --><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/common.css" /><link rel="stylesheet" href="css/register.css" /><!-- 修改页面图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><div class="w"><div class="header"><div class="logo"><a href="index.html"><img src="img/logo.png" alt=""></a></div></div><div class="registerarea"><h3>注册新账号<div class="login">已有账号，去<a href="#">登陆</a></div></h3><div class="reg-from"><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><div class="footer"><div class="mod_copyright"><div class="links"><a href="">关于我们</a><a href="">联系我们</a><a href="">关于我们</a><a href="">商家入驻</a><a href="">关于我们</a><a href="">营销中心</a><a href="">关于我们</a><a href="">友情链接</a><a href="">关于我们</a><a href="">营销中心</a></div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100<br>京ICP备08001421号京公网安备110108007702</div></div></div></div></body>
</html>

CSS

初始化样式
* {margin: 0;padding: 0;box-sizing: border-box;
}em,
i {font-style: normal
}li {list-style: none
}img {border: 0;vertical-align: middle
}button {cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;border: 0;outline: none;
}body {-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 {*zoom: 1
}
公共样式
/* 公共样式 */
@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),src: url('iconfont.ttf?t=1651460814760') format('truetype'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');
}
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.w{width: 1200px;margin: 0 auto;
}.fl{float: left;
}.fr{float: right;
}.style_red{color: #C81623;
}.shortcut{width: 100%;height: 31px;line-height: 31px;background-color: #f1f1f1;
}.shortcut ul li{float: left;
}.shortcut .fr ul li:nth-child(even){width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0;
}.arrow-icon::after{content: "\f01a6";}/* 头部搜索 */
.header{height: 150px;position: relative;
}.logo{width: 171px;height: 61px;position: absolute;top: 25px;
}.logo a{display: block;width: 171px;height: 61px;background:url(../img/logo.png) no-repeat;font-size: 0;/* 让文字隐藏,左移到页面不可见区域 *//* text-indent: -9999px; */
}.search{width: 538px;height: 36px;border: 2px solid #b1191a;position: absolute;left: 346px;top: 25px;
}.search input{float: left;width: 454px;height: 32px;padding-left: 10px;
}.search button{float: left;width: 80px;height: 32px;background-color: #B1191A;font-size: 16px;color: #fff;
}.hotwords{position: absolute;top: 66px;left: 346px;
}.hotwords a{margin: 0 10px;
}.shopcar{width: 140px;height: 35px;border: 1px solid #dfdfdf;background-color: #f7f7f7;position: absolute;top: 25px;right: 60px;line-height: 35px;text-align: center;
}.shopcar::before{content: '\f0178';margin-right: 5px;
}.shopcar::after{content: '>';margin-left: 10px;
}.count{height: 14px;color: #fff;background-color: #C81623;padding: 0 5px;position: absolute;top: -5px;left: 105px;line-height: 14px;border-radius: 7px 7px 7px 0;
}/* 导航栏 */
.nav{height: 47px;border-bottom: 2px solid #B1191A;
}.dropdown{float: left;width: 210px;height: 45px;background-color: #B1191A;
}.nav .navitems{float: left;
}.dropdown .dt{width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}.dropdown .dd{width: 210px;height: 455px;background-color: #C81623;margin-top: 2px;/* display: none; */
}.dropdown .dd ul li{height: 31px;line-height: 31px;margin-left: 2px;padding-left: 13px;position: relative;
}.dropdown .dd ul li:hover{background-color: #fff;
}.dropdown .dd ul li::after{position: absolute;top: 1px;right: 10px;color: #fff;content: '>';font-size: 14px;
}.dropdown .dd ul li a{font-size: 14px;color: #fff;
}.dropdown .dd ul li:hover a{color: #C81623;background-color: #fff;
}.navitems ul li{float: left;
}.navitems ul li a{display: block;height: 45px;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{width: 300px;height: 50px;float: left;padding-left: 35px;
}.mod_service ul li h5{float: left;width: 50px;height: 50px;margin-right: 8px;background: url(../img/icons.png) no-repeat -252px -2px;
}.service_txt h4{font-size: 14px;
}.service_txt 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;
}.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;
}
首页样式
/* 首页样式 */
/* 广告区域 */
.main{width: 980px;height: 455px;margin-left: 220px;
}.focus{float: left;width: 721px;height: 455px;
}.focus ul li img{width: 100%;height: 100%;
}.newsflash{float: right;width: 250px;height: 455px;
}.news{height: 165px;border: 1px solid #ccc;
}.news-hd{height: 33px;line-height: 33px;border-bottom: 1px dotted #e4e4e4;padding: 0 15px;
}.news-hd h5{float: left;font-size: 14px;
}.news-hd .more::after{content: '>';
}.news-hd .more{float: right;
}.news-bd{padding: 5px 15px 0;
}.news-bd ul li{height: 24px;line-height: 24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.lifeservice{height: 209px;border: 1px solid #ccc;border-top: 0;overflow: hidden;
}.lifeservice ul{width: 252px;
}.lifeservice ul li{float: left;width: 63px;height: 71px;text-align: center;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;
}.lifeservice ul li i{display: inline-block;width: 24px;height: 28px;margin-top: 12px;
}.lifeservice ul li .icon-1{background: url(../img/icons.png) no-repeat -19px -15px;
}.bargin{margin-top: 5px;
}/* 推荐模块 */
.recom{height: 163px;margin-top: 12px;background-color: #ebebeb;
}.recom-hd{float: left;width: 205px;height: 163px;background-color: #5c5266;text-align: center;padding-top: 30px;
}.recom-hd p{margin-top: 5px;color: #fff;font-size: 16px;
}.recom-bd{float: left;
}.recom-bd ul li{float: left;position: relative;
}.recom-bd ul li img{width: 248px;height: 163px;
}.recom-bd ul li:nth-child(-n+3)::after{content: '';position: absolute;top: 10px;width: 2px;height: 145px;background-color: #464646;
}/* 家电模块 */
.box_hd{height: 30px;border-bottom: 2px solid #C81623;
}.box_hd h3{float: left;font-size: 18px;font-weight: 400;color: #C81623;
}.tab-list{float: right;line-height: 30px;
}.tab-list ul li{float: left;
}.tab-list ul li a{margin: 0 15px;
}.floor .w{margin-top: 30px;
}.box_bd{height: 361px;
}.tab_list_item>div{float: left;height: 361px;
}.col_210{width: 210px;background-color: #f9f9f9;
}.col_210 ul li{width: 85px;height: 34px;border-bottom: 1px solid #ccc;text-align: center;line-height: 33px;float: left;padding-right: 10px;
}.col_210 ul{padding-left: 12px;
}.col_329{width: 329px;
}.col_221{width: 221px;
}.col_219{width: 219px;
}.bb{display: block;border-bottom: 1px solid #ccc;
}
商品列表页样式
/* 商品列表页样式 */
.nav{overflow: hidden;
}
.sk{position: absolute;border-left: 1px solid #C81623;left: 190px;top: 40px;padding: 3px 0 0 14px;
}.sk img{width: 80px;height: 30px;
}.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:'v';
}.sk-bd ul li {overflow: hidden;margin-right: 13px;float: left;width: 290px;height: 460px;border: 1px solid transparent;/* li本身就带了边框,不加这行会有抖动的现象,随便 */
}.sk-bd ul li:nth-child(4n){margin-right: 0;
}.sk-bd ul li:hover{border: 1px solid #C81623;
}
登录注册页样式
/* 用户注册页样式 */
.header{height: 84px;border-bottom: 2px solid #C81623;
}.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: #C81623;
}.reg-from{width: 600px;margin: 50px auto 0;
}.reg-from ul li{margin-bottom: 20px;
}.reg-from ul li label{display: inline-block;width: 88px;text-align: right;
}/* .reg-from ul li input{width: 242px;height: 37px;border: 1px solid #ccc;
} */.reg-from ul li .inp{width: 242px;height: 37px;border: 1px solid #ccc;
}.safe{padding-left: 170px;
}.safe em{padding: 0 12px;color: #fff;
}.ruo{background-color: #C81623;
}.zhong{background-color: green;
}.qiang{background-color: orange;
}.error{color: #C81623;
}.error-icon{display: inline-block;width: 20px;height: 20px;background: url(../img/error.png) no-repeat;vertical-align: middle;margin-top: -2px;
}.success{color: green;
}.success-icon{display: inline-block;width: 20px;height: 20px;background: url(../img/success.png) no-repeat;vertical-align: middle;margin-top: -2px;
}.agree{padding-left: 95px;
}.agree input{vertical-align: middle;
}.agree a{color: dodgerblue;
}.btn{width: 200px;height: 34px;background-color: #C81623;font-size: 14px;color: #fff;margin: 30px 0 0 70px;
}