我又来了,又是一个静态页面(●’◡’●)
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>品优购-正品低价、品质保障、配送及时、都是我编的!</title>
<meta
name="description"
content="品优购-这是一个啥也买不了的网站,走过路过不要错过,反正都买不了,看看就行!"
/>
<meta
name="keywords"
content="手机、电脑、笔记本、玛莎拉蒂、兰博基尼、我啥都卖!"
/>
<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
>品优购欢迎您! <a href="#">请登录 </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="#">¥1.00</a>
</div>
</li>
<li>
<img src="images/guess_u_like.png" alt="" />
<div>
<a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
<a href="#">¥1.00</a>
</div>
</li>
<li>
<img src="images/guess_u_like.png" alt="" />
<div>
<a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
<a href="#">¥1.00</a>
</div>
</li>
<li>
<img src="images/guess_u_like.png" alt="" />
<div>
<a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
<a href="#">¥1.00</a>
</div>
</li>
<li>
<img src="images/guess_u_like.png" alt="" />
<div>
<a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
<a href="#">¥1.00</a>
</div>
</li>
<li>
<img src="images/guess_u_like.png" alt="" />
<div>
<a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
<a href="#">¥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.cn
</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;
}