苏宁易购
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="苏宁易购-综合网上购物平台,商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快,正品行货、全国联保、可门店自提,全网更低价,让您放心去喜欢!">
<meta name="keywords" content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货">
<title>苏宁易购-送货更准时、价格更超值、上新货更快</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./source/style.css">
<link rel="stylesheet" href="./css/iconfont.css">
<script src="./js/iconfont.js"></script>
</head>
<body>
<!-- top-focus start -->
<div class="top-focus">
<div class="container">
<a href="#"> <img src="./images/top-banner.jpg" alt=""></a>
<a href="#" class="top-focus-close"></a>
</div>
</div>
<!-- top-focus end -->
<!-- header start -->
<!-- header-nav start -->
<div class="header-nav clearfix">
<div class="container ">
<div class="header-top-nav clearfix">
<!-- 左边 -->
<div class="header-nav-fl ">
<ul>
<li class="down">
<a href="#">网站导航 </a>
<span class="iconfont"></span>
</li>
<li class="down">
<a href="#">商家入驻 </a>
<span class="iconfont"></span>
</li>
<li class="down">
<a href="#">客户服务 </a>
<span class="iconfont"></span>
</li>
<li class="address">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weizhi"></use>
</svg>
</span>
</>
<a href="#">上海 </a>
<i><s>▼</s></i>
</li>
</ul>
</div>
<!-- 右边 -->
<div class="header-nav-fr ">
<ul>
<li>
<a href="#">请登录 <a href="#" class="active">注册有礼</a></a>
</li>
<li>
<a href="#">我的订单</a>
<span class="iconfont"></span>
</li>
<li><a href="#">我的易购</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">苏宁会员</a></li>
<li>
<img class="cart" src="images/cart.png" alt="">
<a href="#" class="active">购物车</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">企业采购</a>
</li>
<li><a href="#">手机苏宁</a>
<span class="iconfont"></span>
</li>
</ul>
</div>
</div>
<!-- logo -->
<div class="header-logo ">
<h1><a href="index.html"><img src="./images/sn-logo.png" alt=""></a></h1>
</div>
<div class="header-sub-logo ">
<img src="./images/sn-sub-logo.gif" alt="">
</div>
</div>
<!-- header-search start -->
<div class="header-search ">
<input type="text" placeholder="周年庆赢好礼">
<button>搜索</button>
</div>
<!-- header-list start -->
<div class="header-list ">
<ul>
<li><a href="#">烤箱</a><em>|</em></li>
<li><a href="#" class="active">老板林内CP趴</a><em>|</em></li>
<li><a href="#">iPhone XS</a><em>|</em></li>
<li><a href="#" class="active">空气感拉拉裤</a><em>|</em></li>
<li><a href="#" class="active">空调立减500</a><em>|</em></li>
<li><a href="#">浪琴</a><em>|</em></li>
<li><a href="#">手机</a><em>|</em></li>
<li><a href="#">冰箱</a></li>
</ul>
</div>
</div>
<!-- header end -->
<!-- nav start -->
<div class="nav clearfix">
<div class="container">
<div class="dropdown fl">
<div class="dt">
<a href="#">全部商品分类</a>
</div>
<div class="dd">
<ul class="index-list">
<li class="">
<i class="sn-1"></i>
<a target="_blank">手机</a><em>/</em>
<a target="_blank">运营商</a><em>/</em>
<a target="_blank">智能数码</a>
</li>
<li class="">
<i class="sn-2"></i>
<a target="_blank">电视</a><em>/</em>
<a target="_blank">冰箱</a><em>/</em>
<a target="_blank">空调</a><em>/</em>
<a target="_blank">洗衣机</a>
</li>
<li class="">
<i class="sn-3"></i>
<a target="_blank">厨卫大电</a><em>/</em>
<a target="_blank">生活家电</a><em>/</em>
<a target="_blank">厨具</a>
</li>
<li class="">
<i class="sn-4"></i>
<a target="_blank">电脑办公</a><em>/</em>
<a target="_blank">相机</a><em>/</em>
<a target="_blank">DIY</a>
</li>
<li class="">
<i class="sn-5"></i>
<a target="_blank">家居</a><em>/</em>
<a target="_blank">家具</a><em>/</em>
<a target="_blank">家装</a><em>/</em>
<a target="_blank">家纺</a>
</li>
<li>
<i class="sn-6"></i>
<a target="_blank">食品</a><em>/</em>
<a target="_blank">酒水</a><em>/</em>
<a target="_blank">生鲜</a><em>/</em>
<a target="_blank">特产</a>
</li>
<li>
<i class="sn-7"></i>
<a target="_blank">个护化妆</a><em>/</em>
<a target="_blank">纸品清洁</a><em>/</em>
<a target="_blank">宠物</a>
</li>
<li class="">
<i class="sn-8"></i>
<a target="_blank">母婴</a><em>/</em>
<a target="_blank">玩具</a><em>/</em>
<a target="_blank">车床</a><em>/</em>
<a target="_blank">童装</a>
</li>
<li>
<i class="sn-9"></i>
<a target="_blank">运动</a><em>/</em>
<a target="_blank">户外</a><em>/</em>
<a target="_blank">足球</a><em>/</em>
<a target="_blank">跑步机</a>
</li>
<li class="">
<i class="sn-10"></i>
<a target="_blank">男装</a><em>/</em>
<a target="_blank">女装</a><em>/</em>
<a target="_blank">内衣</a>
</li>
<li>
<i class="sn-11"></i>
<a target="_blank">鞋靴</a><em>/</em>
<a target="_blank">箱包</a><em>/</em>
<a target="_blank">钟表</a><em>/</em>
<a target="_blank">珠宝</a>
</li>
<li class="">
<i class="sn-12"></i>
<a target="_blank">汽摩</a><em>/</em>
<a target="_blank">二手车</a><em>/</em>
<a target="_blank">汽车用品</a>
</li>
<li class="">
<i class="sn-13"></i>
<a target="_blank">图书</a><em>/</em>
<a target="_blank">童书</a><em>/</em>
<a target="_blank">教辅教材</a>
</li>
<li>
<i class="sn-fun"></i>
<a target="_blank">理财</a><em>/</em>
<a target="_blank">分期</a><em>/</em>
<a target="_blank">保险</a><em>/</em>
<a target="_blank">房产</a>
</li>
</ul>
</div>
</div>
<div class="navitems fl">
<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="#">苏宁Outlets</a></li>
<li><a href="#">苏宁金融</a></li>
</ul>
</div>
</div>
</div>
<!-- nav end -->
<!-- screen start -->
<div class="screen">
<div class="container">
<!--中间的轮播图 -->
<div class="screen-focus">
<ul>
<li>
<a href="#"> <img src="./images/casual.jpg" alt=""></a>
</li>
</ul>
<ol>
<li></li>
</ol>
<!-- 手风琴 -->
<div class="casual-bottom">
<img src="./images/casual_bottom.jpg" alt="">
</div>
</div>
<!-- user start -->
<div class="user">
<div class="user-info">
<div class="user-logo">
<a href="#"></a>
</div>
<p>Hi,你好</p>
<div class="user-btn">
<a href="#">新人有礼</a>
<a href="#"></a>
</div>
<div class="user-enter">
<a href="#"><i></i>领云钻></a><a href="#"> <i></i> 领劵></a>
</div>
</div>
<div class="user-center">
<p><em>[活动]</em> <a href="#">苏宁红孩子&新丝路少儿型秀大赛</a></p>
<p><em>[知识]</em> <a href="#">别让孩子这样睡觉,可能比同龄人矮</a></p>
</div>
<div class="user-shortcut">
<ul>
<li><a href="#"><i class="sn-4"></i>
<p>话费</p>
</a></li>
<li><a href="#"><i class="sn-4"></i>
<p>水电煤</p>
</a></li>
<li><a href="#"><i class="sn-4"></i>
<p>苏宁卡</p>
</a></li>
<li><a href="#"><i class="sn-4"></i>
<p>理财</p>
</a></li>
<li><a href="#"><i class="sn-4"></i>
<p>分期</p>
</a></li>
<li><a href="#"><i class="sn-4"></i>
<p>苏宁公益</p>
</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- screen end -->
<!-- content start -->
<div class="content">
<div class="container">
<ul>
<li></li>
</ul>
</div>
</div>
<!-- content end -->
<!-- footer start -->
<div class="footer">
<div class="container">
<div class="footer-promise clearfix">
<dl>
<dt><a href=""><img src="images/promise_1.jpg" alt="正品保障、提供发票"></a></dt>
<dd>
<p><strong>正品保障</strong></p>
<p>正品保障、提供发票</p>
</dd>
</dl>
<dl>
<dt><a href=""><img src="images/promise_2.jpg" alt="正品保障、提供发票"></a></dt>
<dd>
<p><strong>正品保障</strong></p>
<p>正品保障、提供发票</p>
</dd>
</dl>
<dl>
<dt><a href=""><img src="images/promise_3.jpg" alt="正品保障、提供发票"></a></dt>
<dd>
<p><strong>正品保障</strong></p>
<p>正品保障、提供发票</p>
</dd>
</dl>
<dl>
<dt><a href=""><img src="images/promise_4.jpg" alt="正品保障、提供发票"></a></dt>
<dd>
<p><strong>正品保障</strong></p>
<p>正品保障、提供发票</p>
</dd>
</dl>
<dl>
<dt><a href=""><img src="images/promise_5.jpg" alt="正品保障、提供发票"></a></dt>
<dd>
<p><strong>正品保障</strong></p>
<p>正品保障、提供发票</p>
</dd>
</dl>
</div>
<div class="footer-items">
<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>
</dl>
<dl>
<dt>导购演示</dt>
<dd>免费注册</dd>
<dd>会员等级</dd>
<dd>常见问题</dd>
<dd>品牌大全</dd>
<dd>支付方式</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>
</dl>
<dl>
<dt>导购演示</dt>
<dd>免费注册</dd>
<dd>会员等级</dd>
<dd>常见问题</dd>
<dd>品牌大全</dd>
<dd>支付方式</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>
</dl>
<div class="app-down">
<p>身边苏宁</p>
<a href="#">全国300多个城市,上万个门店和服务终端期待您的光临,为您提供最贴心的服务!</a>
</div>
</div>
</div>
</div>
<!-- footer end -->
<!-- link start -->
<div class="link">
<div class="container">
<p class="url-list-links">
<a href="#">苏宁互联</a>|
<a href="#">苏宁金融</a>|
<a href="#">苏宁支付</a>|
<a href="#">PP视频</a>|
<a href="#">红孩子</a>|
<a href="#">苏宁物流</a>|
<a href="#">手机苏宁</a>|
<a href="#">零售云</a>|
<a href="#">知识产权举报</a>|
<a href="#">投资者关系</a>
</p>
<p class="url-list-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>
</p>
</div>
</div>
<!-- link end -->
<!-- copyright start-->
<div class="copyright">
<div class="container">
Copyright© 2002-2018,苏宁易购集团股份有限公司版权所有 | 苏公网安备 32010202010078号 | 苏ICP备10207551号-4 | 苏B1-20130131<br>
苏B2-20130376 | 苏B2-20130391 | 出版物经营许可证新出发苏批字第A-243号 | 互联网药品信息服务资格证书(苏)-非经营性-2016-0005<br>
本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”(包装及参数、售后保障等商品信息除外)
</div>
</div>
<div class="copyright-bottom-img">
<a href=""><img src="images/chengxin.png" alt=""></a>
<a href=""><img src="images/unicom.png" alt=""></a>
<a href=""><img src="images/dianxin.jpg" alt=""></a>
<a href=""><img src="images/dianzi.png" alt=""></a>
</div>
<!-- copyright end -->
</body>
</html>
- index.less
/* top-focus start */
.top-focus {
height: 100px;
background-color: #164fa6;
.container {
position: relative;
.top-focus-close {
display: block;
position: absolute;
top: 3px;
right: 0;
width: 15px;
height: 15px;
margin-right: -15px;
background: url("../images/index.png") no-repeat -240px -145px;
&:hover {
background: url("../images/index.png") no-repeat -255px -145px;
}
}
}
}
/* top-focus end */
/* header start */
.header-nav {
position: relative;
height: 36px;
background-color: #f5f5f5;
line-height: 36px;
/* 左边 */
.header-nav-fl {
ul {
li {
position: relative;
float: left;
padding: 0 25px 0 10px;
span {
position: absolute;
top: 1px;
right: 10px;
}
&:last-child {
padding-left: 20px;
span {
position: absolute;
top: 0;
left: 2px;
font-size: 14px;
}
}
}
}
}
/* 右边 */
.header-nav-fr {
ul {
float: right;
li {
position: relative;
float: left;
padding: 0 20px 0 10px;
span {
position: absolute;
top: 1px;
right: 6px;
}
&:first-child {
.active {
margin-left: 10px;
}
}
&:nth-child(5) {
margin-left: -15px;
}
img {
width: 15px;
height: 15px;
}
}
}
}
/* logo */
.header-logo {
float: left;
width: 190px;
height: 90px;
img {
width: 100%;
height: 100%;
}
}
.header-sub-logo {
float: left;
width: 160px;
height: 100px;
margin-top: 5px;
img {
width: 100%;
height: 100%;
}
}
/* header-search */
.header-search {
position: absolute;
top: 66px;
left: 480px;
width: 538px;
height: 36px;
border: 2px solid #f48200;
input {
width: 456px;
height: 36px;
padding-left: 5px;
}
button {
position: absolute;
top: 0;
right: 0;
width: 82px;
height: 36px;
background-color: #f80;
color: #fff;
/* 去轮廓线 */
border: none;
outline: none;
font-size: 18px;
}
}
/* header-list */
.header-list {
ul {
position: absolute;
top: 102px;
left: 480px;
li {
float: left;
padding-left: 5px;
a {
padding-right: 8px;
}
em {
font-size: 12px;
color: #c0c0c0;
}
}
}
}
}
/* header end */
/* nav start */
.nav {
.dropdown {
position: relative;
.dt {
width: 210px;
a {
position: relative;
display: block;
width: 190px;
height: 38px;
background-color: #f90;
color: white;
font: 600 14px/38px "microsoft yahei";
padding-left: 30px;
box-sizing: border-box;
&::before {
content: "";
display: block;
width: 12px;
height: 12px;
background: url(../images/index.png) no-repeat 0 0;
position: absolute;
top: 14px;
left: 14px;
}
}
}
.dd {
position: absolute;
top: 38px;
width: 190px;
height: 440px;
background-color: #252221;
ul {
li {
height: 31px;
padding: 0 10px 0 8px;
font: 400 13px/31px "microsoft yahei";
color: #666;
a {
color: #fff;
}
}
}
}
}
.navitems {
ul {
li {
float: left;
a {
display: inline-block;
height: 38px;
padding: 0 12px;
font: 600 16px/38px "microsoft yahei";
color: #333333;
}
}
}
}
}
/* nav end */
/* screen start */
.screen {
height: 440px;
background-color: purple;
.screen-focus {
position: relative;
float: left;
margin-left: 190px;
width: 830px;
height: 440px;
img {
width: 100%;
height: 100%;
}
.casual-bottom {
position: absolute;
left: 16px;
bottom: 10px;
width: 796px;
height: 120px;
}
}
.user {
float: right;
margin-top: 5px;
width: 170px;
height: 435px;
background-color: #fff;
box-sizing: border-box;
overflow: hidden;
.user-info {
width: 170px;
height: 169px;
border-bottom: 1px solid #f2f2f2;
padding: 11px 0 2px;
box-sizing: border-box;
.user-logo {
a {
margin: 0 auto;
display: block;
width: 58px;
height: 58px;
background: url("../images/index.png") no-repeat -92px -23px;
}
}
p {
text-align: center;
}
.user-btn {
margin-top: 9px;
display: flex;
justify-content: space-around;
a {
display: inline-block;
width: 70px;
height: 22px;
&:first-child {
display: inline-block;
border: 1px solid #ff9900;
text-align: center;
line-height: 22px;
color: #ff9900;
box-sizing: border-box;
}
&:last-child {
background: url("../images/index.png") no-repeat -295px -252px;
}
}
}
.user-enter {
margin-top: 12px;
a {
display: inline-block;
margin-left: 10px;
i {
display: inline-block;
width: 16px;
height: 14px;
margin: 0 5px;
box-sizing: border-box;
vertical-align: middle;
}
&:first-child {
i {
background: url("../images/index.png") no-repeat -112px 0;
}
}
&:last-child {
i {
background: url("../images/index.png") no-repeat -88px 0;
}
}
}
}
}
.user-center {
height: 120px;
padding-left: 10px;
em {
color: #ff9900;
}
p {
width: 150px;
height: 40px;
margin-top: 15px;
}
}
.user-shortcut {
width: 170px;
height: 145px;
border-top: 1px solid #f2f2f2;
box-sizing: border-box;
ul {
li {
display: flex;
float: left;
width: 55px;
height: 72px;
border-width: 0 1px 1px 0;
border-color: #f2f2f2;
border-style: solid;
justify-content: center;
align-content: center;
text-align: center;
box-sizing: border-box;
i {
font-size: 40px;
}
&:nth-child(3) {
border-right: none;
}
&:nth-child(4) {
border-bottom: none;
}
&:nth-child(5) {
border-bottom: none;
}
&:nth-child(6) {
border-right: none;
border-bottom: none;
}
}
}
}
}
}
/* screen end */
/* content start */
.content {
height: 73px;
background-color: #f2f2f2;
padding-top: 10px;
border-bottom: 1px solid #e7e7e7;
.container {
height: 48px;
background-color: #f90;
}
}
/* content end */
/* footer start */
.footer {
height: 270px;
background-color: #f5f5f5;
.footer-promise {
width: 100%;
dl {
margin-top: 15px;
float: left;
width: 20%;
dt {
float: left;
margin-right: 8px;
margin-top: 5px;
}
dd {
float: left;
p {
margin-top: 7px;
}
}
}
}
.footer-items {
dl {
float: left;
width: 200px;
dt {
height: 40px;
font: 600 14px/40px "microsoft yahei";
color: #545454;
}
dd {
height: 20px;
}
}
.app-down {
float: left;
width: 90px;
height: 180px;
p {
height: 40px;
font: 600 14px/40px "microsoft yahei";
color: #545454;
}
}
}
}
/* footer end */
/* link start */
.link {
margin-top: 30px;
text-align: center;
p {
margin-top: 5px;
a {
margin: 0 8px;
}
}
}
/* link end */
/* copyright start */
.copyright {
margin-top: 20px;
text-align: center;
line-height: 2;
}
.copyright-bottom-img {
margin-top: 20px;
text-align: center;
a {
margin-left: 18px;
}
}
/* copyright end */
- index.css
/* top-focus start */
.top-focus {
height: 100px;
background-color: #164fa6;
}
.top-focus .container {
position: relative;
}
.top-focus .container .top-focus-close {
display: block;
position: absolute;
top: 3px;
right: 0;
width: 15px;
height: 15px;
margin-right: -15px;
background: url("../images/index.png") no-repeat -240px -145px;
}
.top-focus .container .top-focus-close:hover {
background: url("../images/index.png") no-repeat -255px -145px;
}
/* top-focus end */
/* header start */
.header-nav {
position: relative;
height: 36px;
background-color: #f5f5f5;
line-height: 36px;
/* 左边 */
/* 右边 */
/* logo */
/* header-search */
/* header-list */
}
.header-nav .header-nav-fl ul li {
position: relative;
float: left;
padding: 0 25px 0 10px;
}
.header-nav .header-nav-fl ul li span {
position: absolute;
top: 1px;
right: 10px;
}
.header-nav .header-nav-fl ul li:last-child {
padding-left: 20px;
}
.header-nav .header-nav-fl ul li:last-child span {
position: absolute;
top: 0;
left: 2px;
font-size: 14px;
}
.header-nav .header-nav-fr ul {
float: right;
}
.header-nav .header-nav-fr ul li {
position: relative;
float: left;
padding: 0 20px 0 10px;
}
.header-nav .header-nav-fr ul li span {
position: absolute;
top: 1px;
right: 6px;
}
.header-nav .header-nav-fr ul li:first-child .active {
margin-left: 10px;
}
.header-nav .header-nav-fr ul li:nth-child(5) {
margin-left: -15px;
}
.header-nav .header-nav-fr ul li img {
width: 15px;
height: 15px;
}
.header-nav .header-logo {
float: left;
width: 190px;
height: 90px;
}
.header-nav .header-logo img {
width: 100%;
height: 100%;
}
.header-nav .header-sub-logo {
float: left;
width: 160px;
height: 100px;
margin-top: 5px;
}
.header-nav .header-sub-logo img {
width: 100%;
height: 100%;
}
.header-nav .header-search {
position: absolute;
top: 66px;
left: 480px;
width: 538px;
height: 36px;
border: 2px solid #f48200;
}
.header-nav .header-search input {
width: 456px;
height: 36px;
padding-left: 5px;
}
.header-nav .header-search button {
position: absolute;
top: 0;
right: 0;
width: 82px;
height: 36px;
background-color: #f80;
color: #fff;
/* 去轮廓线 */
border: none;
outline: none;
font-size: 18px;
}
.header-nav .header-list ul {
position: absolute;
top: 102px;
left: 480px;
}
.header-nav .header-list ul li {
float: left;
padding-left: 5px;
}
.header-nav .header-list ul li a {
padding-right: 8px;
}
.header-nav .header-list ul li em {
font-size: 12px;
color: #c0c0c0;
}
/* header end */
/* nav start */
.nav .dropdown {
position: relative;
}
.nav .dropdown .dt {
width: 210px;
}
.nav .dropdown .dt a {
position: relative;
display: block;
width: 190px;
height: 38px;
background-color: #f90;
color: white;
font: 600 14px/38px "microsoft yahei";
padding-left: 30px;
box-sizing: border-box;
}
.nav .dropdown .dt a::before {
content: "";
display: block;
width: 12px;
height: 12px;
background: url(../images/index.png) no-repeat 0 0;
position: absolute;
top: 14px;
left: 14px;
}
.nav .dropdown .dd {
position: absolute;
top: 38px;
width: 190px;
height: 440px;
background-color: #252221;
}
.nav .dropdown .dd ul li {
height: 31px;
padding: 0 10px 0 8px;
font: 400 13px/31px "microsoft yahei";
color: #666;
}
.nav .dropdown .dd ul li a {
color: #fff;
}
.nav .navitems ul li {
float: left;
}
.nav .navitems ul li a {
display: inline-block;
height: 38px;
padding: 0 12px;
font: 600 16px/38px "microsoft yahei";
color: #333333;
}
/* nav end */
/* screen start */
.screen {
height: 440px;
background-color: purple;
}
.screen .screen-focus {
position: relative;
float: left;
margin-left: 190px;
width: 830px;
height: 440px;
}
.screen .screen-focus img {
width: 100%;
height: 100%;
}
.screen .screen-focus .casual-bottom {
position: absolute;
left: 16px;
bottom: 10px;
width: 796px;
height: 120px;
}
.screen .user {
float: right;
margin-top: 5px;
width: 170px;
height: 435px;
background-color: #fff;
box-sizing: border-box;
overflow: hidden;
}
.screen .user .user-info {
width: 170px;
height: 169px;
border-bottom: 1px solid #f2f2f2;
padding: 11px 0 2px;
box-sizing: border-box;
}
.screen .user .user-info .user-logo a {
margin: 0 auto;
display: block;
width: 58px;
height: 58px;
background: url("../images/index.png") no-repeat -92px -23px;
}
.screen .user .user-info p {
text-align: center;
}
.screen .user .user-info .user-btn {
margin-top: 9px;
display: flex;
justify-content: space-around;
}
.screen .user .user-info .user-btn a {
display: inline-block;
width: 70px;
height: 22px;
}
.screen .user .user-info .user-btn a:first-child {
display: inline-block;
border: 1px solid #ff9900;
text-align: center;
line-height: 22px;
color: #ff9900;
box-sizing: border-box;
}
.screen .user .user-info .user-btn a:last-child {
background: url("../images/index.png") no-repeat -295px -252px;
}
.screen .user .user-info .user-enter {
margin-top: 12px;
}
.screen .user .user-info .user-enter a {
display: inline-block;
margin-left: 10px;
}
.screen .user .user-info .user-enter a i {
display: inline-block;
width: 16px;
height: 14px;
margin: 0 5px;
box-sizing: border-box;
vertical-align: middle;
}
.screen .user .user-info .user-enter a:first-child i {
background: url("../images/index.png") no-repeat -112px 0;
}
.screen .user .user-info .user-enter a:last-child i {
background: url("../images/index.png") no-repeat -88px 0;
}
.screen .user .user-center {
height: 120px;
padding-left: 10px;
}
.screen .user .user-center em {
color: #ff9900;
}
.screen .user .user-center p {
width: 150px;
height: 40px;
margin-top: 15px;
}
.screen .user .user-shortcut {
width: 170px;
height: 145px;
border-top: 1px solid #f2f2f2;
box-sizing: border-box;
}
.screen .user .user-shortcut ul li {
display: flex;
float: left;
width: 55px;
height: 72px;
border-width: 0 1px 1px 0;
border-color: #f2f2f2;
border-style: solid;
justify-content: center;
align-content: center;
text-align: center;
box-sizing: border-box;
}
.screen .user .user-shortcut ul li i {
font-size: 40px;
}
.screen .user .user-shortcut ul li:nth-child(3) {
border-right: none;
}
.screen .user .user-shortcut ul li:nth-child(4) {
border-bottom: none;
}
.screen .user .user-shortcut ul li:nth-child(5) {
border-bottom: none;
}
.screen .user .user-shortcut ul li:nth-child(6) {
border-right: none;
border-bottom: none;
}
/* screen end */
/* content start */
.content {
height: 73px;
background-color: #f2f2f2;
padding-top: 10px;
border-bottom: 1px solid #e7e7e7;
}
.content .container {
height: 48px;
background-color: #f90;
}
/* content end */
/* footer start */
.footer {
height: 270px;
background-color: #f5f5f5;
}
.footer .footer-promise {
width: 100%;
}
.footer .footer-promise dl {
margin-top: 15px;
float: left;
width: 20%;
}
.footer .footer-promise dl dt {
float: left;
margin-right: 8px;
margin-top: 5px;
}
.footer .footer-promise dl dd {
float: left;
}
.footer .footer-promise dl dd p {
margin-top: 7px;
}
.footer .footer-items dl {
float: left;
width: 200px;
}
.footer .footer-items dl dt {
height: 40px;
font: 600 14px/40px "microsoft yahei";
color: #545454;
}
.footer .footer-items dl dd {
height: 20px;
}
.footer .footer-items .app-down {
float: left;
width: 90px;
height: 180px;
}
.footer .footer-items .app-down p {
height: 40px;
font: 600 14px/40px "microsoft yahei";
color: #545454;
}
/* footer end */
/* link start */
.link {
margin-top: 30px;
text-align: center;
}
.link p {
margin-top: 5px;
}
.link p a {
margin: 0 8px;
}
/* link end */
/* copyright start */
.copyright {
margin-top: 20px;
text-align: center;
line-height: 2;
}
.copyright-bottom-img {
margin-top: 20px;
text-align: center;
}
.copyright-bottom-img a {
margin-left: 18px;
}
/* copyright end */
- base.css
@charset "UTF-8";
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
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;
}
/*初始化*/
/* html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, a, img, button {
margin: 0;
padding: 0;
} */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
form,
fieldset,
legend,
input {
border: none;
outline: none;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #F60;
}
body,
button,
input,
select,
textarea {
/*
font-size: 12px;
line-height: 150%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
*/
font: 12px/1.5 "Microsoft Yahei", tahoma, arial, "Hiragino Sans GB";
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
content: '';
display: table;
clear: both;
}
/*隐藏*/
.hide {
display: none;
}
.f60 {
color: #FF6600;
}
/*版心*/
.container {
width: 1190px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
s,
i,
em {
font-style: normal;
text-decoration: none;
}
.active {
color: #F60;
}
效果: