品优购静态页面（html+css）——主页

编程入门行业动态更新时间:2024-10-23 09:36:03

品优购<a href=https://www.elefans.com/category/jswz/34/1771395.html style= 静态页面（html+css）——主页"/>

品优购静态页面（html+css）——主页

我又来了，又是一个静态页面(●’◡’●)

html部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>品优购-正品低价、品质保障、配送及时、都是我编的！</title><metaname="description"content="品优购-这是一个啥也买不了的网站，走过路过不要错过，反正都买不了，看看就行！"/><metaname="keywords"content="手机、电脑、笔记本、玛莎拉蒂、兰博基尼、我啥都卖！"/><link rel="stylesheet" href="fonts/iconfont.css" /><link rel="shortcut icon" href="favicon.ico" /><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/common.css" /><link rel="stylesheet" href="css/index.css" /><link rel="stylesheet" href="list.html" /><link rel="stylesheet" href="register.html" /></head><body><div class="shortcut"><div class="w"><span>品优购欢迎您！&nbsp;<a href="#">请登录 &nbsp;</a><a href="register.html"> 免费注册 </a></span><ul><li><a href="#">我的订单</a></li><li class="iconfont"><a href="#">我的品优购</a></li><li><a href="#">品优购会员</a></li><li><a href="#">企业采购</a></li><li class="iconfont"><a href="#">关于品优购</a></li><li class="iconfont"><a href="#">客户服务</a></li><li class="iconfont"><a href="#">网站导航</a></li></ul></div></div><header class="w header clearfix"><div class="logo"><!-- logo SEO 优化 --><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><div class="search"><input type="search" placeholder="语言开发" /><input type="button" value="搜索" /><ul class="hotwords"><li><a href="#">优惠购首发</a></li><li><a href="#">亿元优惠</a></li><li><a href="#">9.9元团购</a></li><li><a href="#">满99元减30</a></li><li><a href="#">办公用品</a></li><li><a href="#">电脑</a></li><li><a href="#">通信</a></li></ul></div><div class="shopcar iconfont"><a href="">我的购物车</a><i class="count">79999999</i></div></header><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="fixed"><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><li><a href="#">家用电器</a></li><li><a href="#">家用电器</a></li><li><a href="#">家用电器</a></li></ul></div><div class="dd"><ul class="iconfont"><li><a href="list.html" target="_blank">手机、</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><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><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></div></div><div class="navitems"><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><div class="w clearfix"><div class="main"><div class="focus"><img src="images/focus.png" alt="" /></div><div class="newsflash"><div class="news"><div class="tit"><h3>品优购快报</h3><a class="iconfont" href="#">更多 </a></div><ul><li><span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a></li><li><span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a></li><li><span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a></li><li><span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a></li><li><span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a></li></ul></div><div class="flash"><ul><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li><li><div></div><a href="">话费</a></li></ul></div><div class="bargain"><img src="images/bargain.png" alt="" /></div></div></div></div><div class="recommend w"><div class="today_recommend"><img src="images/recom.png" alt="" /></div><div class="recommend_goods"><ul><li><div><h3>优质好货</h3><h3>满300减100</h3><p>满500减200</p><a href="#">团购</a></div><img src="images/recom_goods.png" alt="" /></li><li><div><h3>优质好货</h3><h3>满300减100</h3><p>满500减200</p><a href="#">团购</a></div><img src="images/recom_goods.png" alt="" /></li><li><div><h3>优质好货</h3><h3>满300减100</h3><p>满500减200</p><a href="#">团购</a></div><img src="images/recom_goods.png" alt="" /></li><li><div><h3>优质好货</h3><h3>满300减100</h3><p>满500减200</p><a href="#">团购</a></div><img src="images/recom_goods.png" alt="" /></li></ul></div></div><div class="guess_u_like w"><nav class="iconfont"><h2>猜你喜欢</h2><a href="#">换一批 </a></nav><article><ul><li><img src="images/guess_u_like.png" alt="" /><div><a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a><a href="#">&yen;1.00</a></div></li><li><img src="images/guess_u_like.png" alt="" /><div><a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a><a href="#">&yen;1.00</a></div></li><li><img src="images/guess_u_like.png" alt="" /><div><a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a><a href="#">&yen;1.00</a></div></li><li><img src="images/guess_u_like.png" alt="" /><div><a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a><a href="#">&yen;1.00</a></div></li><li><img src="images/guess_u_like.png" alt="" /><div><a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a><a href="#">&yen;1.00</a></div></li><li><img src="images/guess_u_like.png" alt="" /><div><a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a><a href="#">&yen;1.00</a></div></li></ul></article></div><div class="fun w"><h2>传智播客·有趣区</h2><article><div class="book"><img src="images/books.png" alt="" /></div><div class="good_things"><h3 class="little_tit">好东西</h3><div class="father_box"><div class="box"><h2>达人推荐</h2><p>雷神金属机械键盘</p><a href="#">与你相见恨晚</a></div></div><ul><li class="father_box"><div class="box"><h2>达人推荐</h2><p>雷神金属机械键盘</p><a href="#">与你相见恨晚</a></div></li></ul></div><div class="brand_street"><h3 class="little_tit">品牌街</h3><div class="father_box"><div class="box"><h2>苏泊尔</h2><p>返场大秀场</p><a href="#">爆品直降一百元</a></div></div><ul><li class="father_box"><div class="box"><h2>达人推荐</h2><p>雷神金属机械键盘</p><a href="#">与你相见恨晚</a></div></li><li class="father_box"><div class="box"><h2>达人推荐</h2><p>雷神金属机械键盘</p><a href="#">与你相见恨晚</a></div></li></ul></div><div class="logos"><img src="images/logos.png" alt="" /></div></article></div><div class="phone w"><div class="head"><h2>手机通讯</h2><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><li><a href="#">高性价比</a></li></ul></div><div class="body"><div class="menu"><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><h2>中兴A1 低至499元</h2><p>国民指纹，超6万好评</p><img src="images/menu.png" alt="" /></div><div class="chart"><h2>360 N4S限量版</h2><p>1199元抢购</p><div><img src="images/chart.png" alt="" /><ul class="promo"><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul></div></div><div><ul class="main_phone"><li><h2>Moto X极</h2><p>低至¥2999</p><img src="images/main_phone.png" alt="" /></li><li><h2>Moto X极</h2><p>低至¥2999</p><img src="images/main_phone.png" alt="" /></li></ul><ul class="main_phone1"><li><h2>G9青春版玫瑰金首发</h2><p>赢0元试用</p><img src="images/main_phone1.png" alt="" /></li></ul><ul class="main_phone"><li><h2>Moto X极</h2><p>低至¥2999</p><img src="images/main_phone.png" alt="" /></li><li><h2>Moto X极</h2><p>低至¥2999</p><img src="images/main_phone.png" alt="" /></li></ul></div></div><div class="sponsor"><img src="images/sponsor.png" alt="" /></div></div><footer class="footer"><div class="mod_service"><ul class="w"><li><img src="images/ft1.png" alt="" /><div><h3>正品保障</h3><p>提供发票，正品保障</p></div></li><li><img src="images/ft1.png" alt="" /><div><h3>正品保障</h3><p>提供发票，正品保障</p></div></li><li><img src="images/ft1.png" alt="" /><div><h3>正品保障</h3><p>提供发票，正品保障</p></div></li><li><img src="images/ft1.png" alt="" /><div><h3>正品保障</h3><p>提供发票，正品保障</p></div></li><li><img src="images/ft1.png" alt="" /><div><h3>正品保障</h3><p>提供发票，正品保障</p></div></li></ul></div><div class="mod_help"><div class="w"><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="images/wx_cz.jpg" alt="" /></dd><dd><a href="#">联系客服</a></dd></dl></div></div><div class="mod_copyright"><div class="w"><ul class="clearfix"><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><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li></ul><p>地址：XXXXXXXXXXXXXXXXXXXXXXXXXX 邮编：XXXXXX电话：400-618-XXXX 传真：010-XXXXXXXX 邮箱: zXXXXXXX</p><p>京ICP备XXXXXXXXXXXXXX号京公网安备XXXXXXXXXXX2</p></div></div></footer></body>
</html>

css部分
common.css

common.css
.w {width: 1200px;margin: 0 auto;
}
.shortcut {height: 31px;background-color: #f1f1f1;line-height: 31px;
}
.shortcut span a:last-of-type {color: #c81623;
}
.shortcut ul {float: right;
}
.shortcut ul li {height: 31px;line-height: 31px;float: left;
}
.shortcut ul li a {padding: 0 14px;border-right: 1px solid;font-size: 12px;
}
.shortcut ul li:nth-child(2) a::after,
.shortcut ul li:nth-child(n + 5) a::after {content: '\e66f';padding-left: 5px;
}
.shortcut ul li:last-child a {border: none;
}
.logo {float: left;width: 175px;height: 55px;margin: 27px 0 24px;
}
.logo h1 a {float: left;display: block;width: 175px;height: 55px;background-image: url(../images/logo.png);background-repeat: no-repeat;font-size: 0;
}
.search {float: left;margin: 27px 0 24px 170px;
}.search input[type='search'] {float: left;width: 455px;height: 34px;padding: 0 5px;border: 2px solid #c81623;border-right: none;outline: #c81623;
}.search input[type='button'] {float: left;width: 83px;height: 34px;color: white;background-color: #c81623;border: none;outline: #c81623;cursor: pointer;
}
.search .hotwords li {float: left;margin: 3px 12px 0;
}
.shopcar {position: relative;float: right;width: 108px;height: 35px;margin-top: 27px;margin-right: 64px;padding: 0 16px;line-height: 35px;font-size: 12px;border: 1px solid #dfdfdf;background-color: #f7f7f7;
}
.shopcar::before {font-size: 16px;padding-right: 5px;content: '\e600';color: #c81623;
}
.shopcar::after {float: right;content: '\e666';
}
.shopcar .count {position: absolute;/* 左对齐更好看 */left: 105px;top: -5px;height: 14px;line-height: 14px;color: #ffffff;border: 1px solid #c81623;padding: 0 4px;background-color: #c81623;border-radius: 7px 7px 7px 0;
}
.footer {height: 417px;width: 100%;background-color: #f1f1f1;margin-top: 40px;
}
.mod_service {height: 109px;border-bottom: 2px solid #ededed;
}
.footer .mod_service li {float: left;margin: 30px;
}
.footer .mod_service li img {float: left;margin-left: 7px;
}
.footer .mod_service li div {float: left;position: relative;top: 5px;margin-left: 7px;
}
.mod_help {height: 188px;border-bottom: 2px solid #ededed;
}
.footer .mod_help dl {float: left;margin: 22px 50px 19px 60px;
}
.footer .mod_help dl dt {font-size: 16px;padding-bottom: 5px;color: #484848;
}
.footer .mod_help dl img {width: 98px;height: 98px;
}
.footer .mod_help dl:last-child {text-align: center;font-size: 14px;
}
.footer .mod_copyright ul {width: 935px;margin: 20px auto;
}.footer .mod_copyright li {float: left;margin: 0 auto;
}
.footer .mod_copyright li a {margin: 20px 0;padding: 0 14px;border-right: 1px solid #484848;
}
.footer .mod_copyright li:last-child a {border: none;
}
.footer .mod_copyright p:first-of-type {font-size: 10px;width: 732px;margin: 0 auto;
}
.footer .mod_copyright p:last-of-type {font-size: 10px;width: 272px;margin: 0 auto;
}

base.css

base.css
/* 清除内外边距 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {margin: 0;padding: 0;box-sizing: border-box;font-weight: 400;
}
/* 清除斜体 */
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;
}
body {/* 抗锯齿性 */-webkit-font-smoothing: antialiased;background-color: #fff;/* '\5B8B\4F53'宋体的以时，这样兼容性比较好 */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;
}

index.css

index.css
.fixed {position: fixed;width: 66px;height: 341px;right: 50%;margin-right: 613px;
}
.fixed ul li {height: 31px;width: 61px;margin: 5px;line-height: 31px;text-align: center;border-bottom: 1px solid #e4e4e4;
}
.fixed ul li:hover {background-color: #c81623;
}
.fixed ul li:hover a {color: #ffffff;
}
.nav {height: 45px;border-bottom: 2px solid #c81623;
}
nav .dropdown {float: left;
}nav .dropdown .dt {width: 206px;height: 45px;line-height: 45px;background-color: #b1191a;text-align: center;font-size: 16px;color: #ffffff;
}
nav .dropdown .dd {width: 206px;height: 467px;background-color: #c81623;
}
nav .dropdown .dd li {padding: 0 10px;
}
nav .dropdown .dd li a {height: 31px;line-height: 31px;font-size: 14px;color: #ffffff;
}
nav .dropdown .dd li:hover {background-color: #ffffff;
}
nav .dropdown .dd li:hover a {color: #c81623;
}
nav .dropdown .dd li::after {float: right;content: '\e666';color: #ffffff;font-size: 12px;
}
nav .navitems li {float: left;line-height: 45px;
}
nav .navitems li a {padding-left: 30px;padding-right: 20px;font-size: 14px;
}
.main {position: relative;float: left;width: 980px;height: 455px;margin: 10px 0 10px 10px;
}
.main .focus {position: absolute;left: 0;width: 718px;height: 455px;
}
.main .focus img {width: 100%;height: 100%;
}
.newsflash {position: absolute;right: 0;width: 251px;height: 375px;border: 1px solid #e4e4e4;
}
.newsflash .news .tit {height: 165px;
}
.newsflash .news .tit {height: 34px;line-height: 34px;padding: 0 15px;border-bottom: 1px dotted #e4e4e4;
}
.newsflash .news .tit h3 {float: left;font-weight: 400;
}
.newsflash .news .tit a {float: right;font-size: 12px;
}
.newsflash .news .tit a::after {content: '\e666';
}
.newsflash .news ul {border-bottom: 1px solid #e4e4e4;height: 131px;
}
.newsflash .news ul li {height: 24px;line-height: 24px;padding: 0 15px;
}
.newsflash .news ul li span {font-weight: 700;
}
.newsflash .flash ul {width: 252px;height: 207px;
}
.newsflash .flash li {float: left;width: 63px;height: 70px;text-align: center;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;overflow: hidden;
}
.newsflash .flash li div {width: 24px;height: 24px;margin: 12px auto;background-image: url(../images/icons.png);background-position: -17px -16px;
}
.newsflash .bargain {height: 76px;width: 251px;padding-top: 5px;
}
.newsflash .bargain img {width: 100%;height: 100%;
}
.recommend {height: 163px;background-color: #ebebeb;
}
.recommend .today_recommend {float: left;width: 207px;height: 163px;line-height: 163px;background-color: #5c5251;text-align: center;
}.recommend .recommend_goods li {float: left;width: 228px;height: 143px;padding: 12px;margin: 10px;border-right: 2px solid #e4e4e4;
}
.recommend .recommend_goods li div {float: left;
}
.recommend .recommend_goods li img {float: right;
}
.recommend .recommend_goods li:last-child {border: none;
}
.recommend .recommend_goods li div h3:first-of-type {font-size: 16px;color: #333333;margin-bottom: 10px;
}
.recommend .recommend_goods li div h3:last-of-type {padding: 0 3px;font-weight: 500;background-color: #00a0e8;color: #ffffff;
}
.recommend .recommend_goods li div p {font-weight: 700;
}
.recommend .recommend_goods li div a {display: block;height: 20px;width: 67px;margin-top: 21px;text-align: center;background-color: #00a0e8;border: 1px solid #00a0e8;border-radius: 10px;color: #ffffff;
}
.guess_u_like {height: 292px;border-bottom: 1px solid #e4e4e4;
}
.guess_u_like nav {position: relative;height: 59px;border-bottom: 1px solid #e4e4e4;
}
.guess_u_like nav h2 {position: absolute;left: 0;padding-top: 30px;font-weight: 400;
}
.guess_u_like nav a {position: absolute;right: 0;bottom: 0;margin-right: 20px;
}
.guess_u_like nav a::after {content: '\e6e1';font-size: 14px;
}
.guess_u_like article li {float: left;width: 200px;height: 233px;text-align: center;
}
.guess_u_like article li a {display: block;
}
.guess_u_like article li div {padding: 10px 35px;border-right: 1px solid #e4e4e4;text-align: left;
}
.guess_u_like article li:last-child div {border: none;
}
.guess_u_like article li div a:first-of-type {-webkit-line-clamp: 2;
}
.guess_u_like article li div a:last-of-type {font-size: 16px;color: #c81623;font-weight: 700;
}
.fun {height: 465px;border-bottom: 1px solid #e4e4e4;
}
.fun > h2 {height: 59px;font-size: 18px;padding-top: 30px;font-weight: 400;border-bottom: 1px solid #e4e4e4;
}
.fun article .book {float: left;width: 404px;height: 406px;background-color: #b8bddd;
}
.fun article .book img {margin: 20px 50px 30px 20px;
}
.fun article .good_things {float: left;width: 228px;height: 406px;border-right: 1px solid #e4e4e4;
}
.fun article .little_tit {height: 40px;line-height: 40px;margin: 0 18px;text-align: center;border-bottom: 1px dashed #e4e4e4;
}
.fun article .father_box {position: relative;height: 192px;width: 218px;margin-bottom: 16px;padding-left: 10px;background-image: url(../images/keyboard.png);background-repeat: no-repeat;background-position: right bottom;
}
.fun article .box {position: absolute;left: 10px;top: 35%;width: 100px;height: 70px;
}
.fun article .box h2 {font-weight: 400;
}
.fun article .box a {color: #c81623;
}
.fun article .brand_street {float: left;width: 406px;height: 406px;border-right: 1px solid #e4e4e4;background-color: #f7f7f7;
}
.fun article .brand_street > div {width: 346px;margin-left: 50px;background-image: url(../images/supor.png);background-repeat: no-repeat;
}
.fun article ul .father_box {background-image: url(../images/clothes.png);background-position: right bottom;height: 159px;width: 228px;
}
.fun article ul li {float: left;border-top: 1px solid #e4e4e4;
}
.fun article .brand_street ul li {width: 202px;
}
.fun .logos {float: left;width: 160px;height: 406px;
}
.phone {position: relative;height: 504px;
}
.head {height: 30px;line-height: 30px;border-bottom: 2px solid #c81623;padding-top: 25px;
}
.head h2 {float: left;font-weight: 400;color: #c81623;
}
.head ul {float: right;
}
.head ul li {float: left;
}
.head ul li a {padding: 0 16px;border-right: 1px solid #e4e4e4;
}
.head ul li:last-child a {border: none;
}
.body {height: 360px;
}
.body .menu {float: left;text-align: center;width: 207px;height: 360px;background-color: #f9f9f9;
}
.body .menu ul {width: 207px;height: 100px;
}
.body .menu ul li {float: left;width: 90px;height: 32px;line-height: 32px;margin: 0 6px;border-bottom: 1px solid #e4e4e4;
}
.body .menu h2 {margin-top: 27px;font-weight: 400;color: #c81623;
}
.body .menu p {color: #c81623;
}
.body .menu img {margin-top: 20px;
}
.body .chart {float: left;width: 268px;height: 312px;background-color: #c6e8b6;padding: 38px 30px 10px;
}
.body .chart div {position: relative;width: 268px;height: 240px;text-align: center;margin-top: 38px;
}
.body .chart h2,
.body .chart p {color: #4c852a;font-weight: 400;
}.body .chart div .promo {position: absolute;bottom: 15px;left: 104px;width: 60px;height: 16px;
}.body .chart div .promo li {float: left;
}
.body .chart div .promo li a {display: block;width: 12px;height: 12px;margin: 0 4px;border-radius: 6px;background-color: #ffffff;
}
.body .chart div .promo li a:hover {background-color: #3e3e3e;
}
.body .main_phone {float: left;width: 207px;height: 360px;
}
.body .main_phone li {position: relative;float: left;height: 180px;width: 207px;padding-top: 25px;padding-left: 25px;
}
.body .main_phone li img {position: absolute;right: 0;bottom: 0;
}
.body .main_phone li p {color: #c81623;
}
.body .main_phone1 li {float: left;width: 207px;height: 360px;text-align: center;padding-top: 72px;
}
.body .main_phone1 li img {padding-top: 40px;
}
.phone .sponsor {position: absolute;bottom: 0;
}