<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝网</title>
<link rel="stylesheet" type="text/css" href="taobao.css" />
</head >
<body>
<div class="wrapper">
<!-- 导航条 -->
<div class="top-nav-wrap">
<ul class="top-nav-left">
<li class="top-nav-menu">
<span class="c-span" style="
color: #3c3c3c;
line-height: 35px;
font-size: 13px;
">中国大陆</span>
<span class="bg-pic xsj-pic"></span>
</li>
<li class="top-nav-menu login-sign">
<a href="#" class="login">亲，请登录</a>
<a href="#" class="sign">免费注册</a>
</li>
<li class="top-nav-menu">
<a href="#">手机逛淘宝</a>
</li>
</ul>
<ul class="top-nav-right">
<li class="top-nav-menu my-taobao">
<a href="#">我的淘宝</a>
<span class="bg-pic xsj-pic"></span>
</li>
<li class="top-nav-menu shop-car">
<a href="#">
<span class="bg-pic shopCar-pic"></span>
<span>购物车</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li>
<li class="top-nav-menu like">
<a href="#">
<span class="bg-pic like-pic"></span>
<span>收藏夹</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li>
<li class="top-nav-menu goods">
<a href="#">商品分类</a>
</li>
<li class="top-nav-menu cut-off">
<span>|</span>
</li>
<li class="top-nav-menu seller">
<a href="#">
<span class="c-span">卖家中心</span>
<span class="bg-pic xsj-pic"></span>
</a>
</li>
<li class="top-nav-menu customer">
<a href="#">
<span class="c-span">联系客服</span>
<span class="bg-pic xsj-pic"></span>
</a>
</li>
<li>
<a href="#">
<span class="bg-pic web-nav-pic web-nav-pic"></span>
<span>网站导航</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li>
</ul>
</div>
<!-- 搜索区域 -->
<div class="search-wrap">
<div class="search-con">
<div class="logo-box"></div>
<div class="search-box">
<div class="search-t">
<div class="search-tab">
<ul>
<li class="select">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
</div>
<div class="search-panel">
<a href="#" class="sousuo"></a>
<form action="">
<div class="btn">
<button type="submit">搜索</button>
</div>
<div class="search-inp-box">
<div class="search-inp">
<input type="text" placeholder="淘宝搜索栏">
</div>
</div>
</form>
<a href="#" class="camera"></a>
</div>
</div>
<div class="search-bl">
<a href="#" class="active">连衣裙</a>
<a href="#">四件套</a>
<a href="#">潮流T恤</a>
<a href="#">时尚女鞋</a>
<a href="#">短裤</a>
<a href="#" class="active">半身裙</a>
<a href="#">男士外套</a>
<a href="#">墙纸</a>
<a href="#">行车记录仪</a>
<a href="#">新款男鞋</a>
<a href="#">耳机</a>
<a href="#" class="active"S>时尚女包</a>
</div>
</div>
<div class="code-box">
<a href="#" class="phone">手机淘宝</a>
<a href="#" class="code"></a>
<a href="#" class="close">X</a>
</div>
</div>
</div>
<!-- 导航条 -->
<div class="screen-nav">
<div class="screen-nav-con">
<h2>主题市场</h2>
<ul>
<li>
<a href="#">天猫</a>
</li>
<li>
<a href="#">聚划算</a>
</li>
<li>
<a href="#">天猫超市</a>
</li>
</ul>
<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>
<ul>
<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="screen-box">
<div class="main">
<div class="main-inner">
<div class="inner-left">
<ul>
<li>
<a href="#">女装</a>/
<a href="#">男装</a>/
<a href="#">内衣</a>
<span></span>
</li>
<li>
<a href="#">鞋靴</a>/
<a href="#">箱包</a>/
<a href="#">配件</a>
<span></span>
<li>
<a href="#">童装玩具</a>/
<a href="#">孕产</a>/
<a href="#">用品</a>
<span></span>
</li>
<li>
<a href="#">家电</a>/
<a href="#">数码</a>/
<a href="#">手机</a>
<span></span>
</li>
<li>
<a href="#">美妆</a>/
<a href="#">洗护</a>/
<a href="#">保健品</a>
<span></span>
</li>
<li>
<a href="#">珠宝</a>/
<a href="#">眼镜</a>/
<a href="#">手表</a>
<span></span>
</li>
<li>
<a href="#">运动</a>/
<a href="#">户外</a>/
<a href="#"乐器></a>
<span></span>
</li>
<li>
<a href="#">游戏</a>/
<a href="#">动漫</a>/
<a href="#">影视</a>
<span></span>
</li>
<li>
<a href="#">美食</a>/
<a href="#">生鲜</a>/
<a href="#">零食</a>
<span></span>
</li>
<li>
<a href="#">鲜花</a>/
<a href="#">宠物</a>/
<a href="#">农资</a>
<span></span>
</li>
<li>
<a href="#">工具</a>/
<a href="#">装修</a>/
<a href="#">建材</a>
<span></span>
</li>
<li>
<a href="#">家具</a>/
<a href="#">家饰</a>/
<a href="#">家纺</a>
<span></span>
</li>
<li>
<a href="#">汽车</a>/
<a href="#">二手车</a>/
<a href="#">用品</a>
<span></span>
</li>
<li>
<a href="#">办公</a>/
<a href="#">DIY</a>/
<a href="#">五金</a>
<span></span>
</li>
<li>
<a href="#">百货</a>/
<a href="#">餐厨</a>/
<a href="#">家庭保健</a>
<span></span>
</li>
<li>
<a href="#">学习</a>/
<a href="#">卡券</a>/
<a href="#">本地服务</a>
<span></span>
</li>
</ul>
</div>
<div class="inner-content">
<div class="pic-box">
<img src="./img/pic2.png" alt="">
</div>
<div class="inner-mall">
<div class="head">
<img src="./img/tm.png" alt="">
<span class="tm">理想生活上天猫</span>
</div>
<a href="#">
<img src="./img/pic3.png" alt="">
</a>
</div>
</div>
<div class="inner-right">
<a>
<img src="./img/pic1.png" alt="">
</a>
<div class="hot">
<span>今日热卖</span>
<a href="#">
<img src="./img/pic4.png" alt="">
</a>
</div>
</div>
</div>
<div class="main-bottom">
<div class="content">
<div class="logo-box"></div>
<a href="#">
<img src="./img/pic5.png" alt="">
<h4>双十一前，全国最大的天猫零售书店来了</h4>
<p>10月26日，全国最大的天猫零售书店在杭州开业,成为杭州新的一道风景线</p>
</a>
</div>
</div>
</div>
<div class="col-right">
<div class="member">
<div class="member-head">
<div class="header">
<a href="#"></a>
</div>
<span class="hello">hi！你好</span>
<p>
<a href="#" class="icon">
<span></span>
领淘金币抵钱
</a>
<a href="#" class="club">
<span></span>
会员俱乐部
</a>
</p>
</div>
<div class="member-foot">
<a href="#" class="login">登录</a>
<a href="#">注册</a>
<a href="#">开店</a>
</div>
</div>
<div class="message">
<a href="#">
网上有害信息举报
<span></span>
</a>
</div>
<div class="notice">
<div class="title">
<ul>
<li>
<a href="#">公告</a>
</li>
<li>
<a href="#">规则</a>
</li>
<li>
<a href="#" class="active">论坛</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li>
<a href="#">公益</a>
</li>
</ul>
</div>
<div class="content">
<ul>
<li><a href="#" class="active">淘宝活动招商</a></li>
<li><a href="#">差评功能升级</a></li>
<li><a href="#">陌生人拼团</a></li>
<li><a href="#">运营神器大促销</a></li>
</ul>
</div>
</div>
<div class="module">
<ul>
<li>
<a href="#">
<span class="icon1"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<span class="icon2"></span>
<p>旅行</p>
</a>
</li>
<li>
<a href="#">
<span class="icon3"></span>
<p>车险</p>
</a>
</li>
<li>
<a href="#">
<span class="icon4"></span>
<p>游戏</p>
</a>
</li>
<li>
<a href="#">
<span class="icon5"></span>
<p>彩票</p>
</a>
</li>
<li>
<a href="#">
<span class="icon6"></span>
<p>电影</p>
</a>
</li>
<li>
<a href="#">
<span class="icon7"></span>
<p>酒店</p>
</a>
</li>
<li>
<a href="#">
<span class="icon8"></span>
<p>理财</p>
</a>
</li>
<li>
<a href="#">
<span class="icon9"></span>
<p>服务</p>
</a>
</li>
<li>
<a href="#">
<span class="icon10"></span>
<p>演出</p>
</a>
</li>
<li>
<a href="#">
<span class="icon11"></span>
<p>水电煤</p>
</a>
</li>
<li>
<a href="#">
<span class="icon12"></span>
<p>火车票</p>
</a>
</li>
</ul>
</div>
<div class="app">
<div class="title">
<h1>阿里APP</h1>
<span>
<a href="#">更多></a>
</span>
</div>
<div class="content">
<ul>
<li>
<a href="#">
<img src="./img/smalllogo1.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/smalllogo2.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/smalllogo3.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/smalllogo4.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/smalllogo5.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/smalllogo6.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/smalllogo7.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/smalllogo8.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/smalllogo9.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/smalllogo10.png" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
text-decoration: none;
list-style: none;
}
html,body{
width:100%;
height:100%;
background-color:#f4f4f4;
color:#3C3C3C;
overflow-x:hidden;
}
.wrapper{
width:100%;
height:100%;
}
/* 上导航条 */
.wrapper .top-nav-wrap{
width:1190px;
height:35px;
background:#f5f5f5;
border:2px solid black;
}
.wrapper .top-nav-wrap{
width:1190px;
height:35px;
border:0 solid black;
margin:0 auto;
}
.wrapper .top-nav-wrap .top-nav-left{
float:left;
}
.wrapper .top-nav-wrap .top-nav-right{
float:right;
}
.wrapper .top-nav-wrap ul li{
float:left;
margin-right:7px;
}
.wrapper .top-nav-wrap a{
color:#6c6c6c;
font-size:12px;
line-height:35px;
padding:0 6px;
}
.wrapper .top-nav-wrap a:hover{
color:#f40;
}
.wrapper .top-nav-wrap a.login{
color:#f40;
}
.wrapper .top-nav-wrap .c-span{
padding:0 6px;
}
.wrapper .top-nav-wrap .bg-pic{
display:inline-block;
width:6px;
height:3px;
background-size:100% 100%;
vertical-align:middle;
}
.wrapper .top-nav-wrap .bg-pic.xsj-pic{
background-image:url(./img/xsj.png);
}
.wrapper .top-nav-wrap .bg-pic.shopCar-pic{
background-image:url(./img/gwc.png);
width:12px;
height:12px;
}
.wrapper .top-nav-wrap .bg-pic.like-pic{
background-image:url(./img/star.png);
width:12px;
height:12px;
}
.wrapper .top-nav-wrap .bg-pic.web-nav-pic{
background-image:url(./img/dh.png);
width:10px;
height:10px;
}
.wrapper .top-nav-wrap .cut-off span{
line-height:35px;
color:#ddd;
}
/* 搜索区域 */
.wrapper .search-wrap{
width:100%;
height:97px;
padding-top:24px;
background-color:white;
}
.wrapper .search-wrap .search-con{
position: relative;
width:1190px;
height:88px;
margin:0 auto;
}
.wrapper .search-wrap .search-con .logo-box{
position: relative;
top:-10px;
display:inline-block;
width:190px;
height:105px;
vertical-align: top;
background-image: url(./img/logo.png);
background-size:100% 100%;
}
.wrapper .search-wrap .search-con .search-box{
display:inline-block;
width:627px;
height:87px;
vertical-align: top;
margin-left:50px;
}
.wrapper .search-wrap .search-con .search-box .search-t{
width:627px;
height:62px;
}
.wrapper .search-wrap .search-con .search-box .search-t .search-tab{
height:22px;
margin-left:17px;
}
.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li.select{
color:#fff;
font-weight:700;
background:linear-gradient(to right,#ff9000 0,#ff5000 100%);
}
.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li{
float:left;
width:36px;
height:22px;
color:#f40;
font-size:12px;
line-height:22px;
text-align:center;
margin-right:4px;
border-top-right-radius:6px;
border-top-left-radius:6px;
cursor: pointer;
}
.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li:hover{
background-color:#ffeee5;
}
.wrapper .search-wrap .search-con .search-box .search-t .search-panel{
width:627px;
height:40px;
position: relative;
}
.wrapper .search-wrap .search-con .search-box .search-t .search-panel form{
}
.wrapper .search-wrap .search-con .search-box .search-t .search-panel form .btn{
width:74px;
height:40px;
position: absolute;
top:0;
right:0;
border-top-right-radius:20px;
border-bottom-right-radius: 20px;
overflow:hidden;
}
.wrapper .search-wrap .search-con .search-box .search-t .search-panel form .btn button{
width:100%;
height:100%;
background:linear-gradient(to right,#ff9000 0,#ff5000 100%);
border:none;
color:#fff;
font-weight:700;
font-size:18px;
cursor: pointer;
}
.wrapper .search-wrap .search-con .search-box .search-t .search-panel .search-inp-box{
width:551px;
height:36px;
border:2px solid #ff5500;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
overflow: hidden;
}
.wrapper .search-wrap .search-con .search-box .search-t .search-panel .search-inp{
height:36px;
width:472px;
}
.wrapper .search-wrap .search-con .search-box .search-t .search-panel .search-inp input{
height:24px;
width:472px;
padding:6px 16px;
border:none;
outline:0;
text-indent: 10px;
}
.wrapper .search-wrap .search-con .search-box .sousuo,
.wrapper .search-wrap .search-con .search-box .camera{
display:inline-block;
position:absolute;
}
.wrapper .search-wrap .search-con .search-box .sousuo{
width:12px;
height:14px;
top:11px;
left:14px;
background-image: url(./img/fdj.png);
background-size: 100% 100%;
}
.wrapper .search-wrap .search-con .search-box .camera{
width: 20px;
height:22px;
top:11px;
right:90px;
background-image: url(./img/camera.png);
background-size: 100% 100%;
}
.wrapper .search-wrap .search-con .search-box .search-bl{
width:627px;
height:20px;
}
.wrapper .search-wrap .search-con .search-box .search-bl a{
font-size:12px;
margin-right:8px;
color:#666;
}
.wrapper .search-wrap .search-con .search-box .search-bl a:hover{
color:#ff5000;
cursor: pointer;
}
.wrapper .search-wrap .search-con .search-box .search-bl a.active{
color:#ff5000;
}
.wrapper .search-wrap .search-con .code-box{
display:inline-block;
width:76px;
height:90px;
vertical-align: top;
margin-left:120px;
position: relative;
}
.wrapper .search-wrap .search-con .code-box .phone{
margin-left: 5px;
color:#ff5000;
font-size:14px;
line-height:20px;
}
.wrapper .search-wrap .search-con .code-box .code{
display: inline-block;
width:62px;
height:62px;
background:url(./img/ewm.png) no-repeat;
background-size:100% 100%;
margin-left:6px;
}
.wrapper .search-wrap .search-con .code-box .close{
position: absolute;
display:inline-block;
top:0;
left:-18px;
border:1px solid #eee;
color:#ddd;
font-size:14px;
width:16px;
height:16px;
text-align: center;
line-height:16px;
}
/* 搜索下的导航条 */
.wrapper .screen-nav{
width:1190px;
height:30px;
background:linear-gradient(to right,#ff9000 0,#ff5000 100%);
margin:0 auto;
}
.wrapper .screen-nav .screen-nav-con{
width:100%;
height:100%;
}
.wrapper .screen-nav .screen-nav-con h2{
float:left;
color:#fff;
font-size:16px;
width:190px;
height:100%;
background-color: #ff5000;
text-align: center;
line-height:30px;
}
.wrapper .screen-nav .screen-nav-con ul{
float:left;
}
.wrapper .screen-nav .screen-nav-con ul li{
float:left;
margin:0 3px;
padding:0 4px;
position: relative;
}
.wrapper .screen-nav .screen-nav-con ul li a{
line-height:30px;
color:#fff;
font-weight:700;
}
.wrapper .screen-nav .screen-nav-con ul li:hover::before{
content:"";
display:block;
width:30px;
height:30px;
background:url(./img/up.png) no-repeat;
background-size:center center;
position: absolute;
top:-10px;
left:50%;
margin-left:-15px;
}
/* 主要图片展示内容 */
.wrapper .screen-box{
width:1190px;
height:632px;
margin:0 auto;
}
.wrapper .screen-box .main{
float:left;
width:890px;
height:632px;
}
.wrapper .screen-box .main .main-inner{
width: 890px;
height:522px;
}
.wrapper .screen-box .main .main-inner .inner-left{
float:left;
width:190px;
height:522px;
border:1px solid #f40;
border-top:none;
background-color:#fff;
}
.wrapper .screen-box .main .main-inner .inner-left ul li{
height:32px;
width:145px;
padding-left:25px;
padding-left:19px;
position: relative;
}
.wrapper .screen-box .main .main-inner .inner-left ul li a{
font-size:14px;
font-weight:400;
color:#666;
line-height:32px;
}
.wrapper .screen-box .main .main-inner .inner-left ul li:hover{
background-color:#ffe44c;
}
.wrapper .screen-box .main .main-inner .inner-left ul li:hover a{
color:#ff5000;
}
.wrapper .screen-box .main .main-inner .inner-left ul li span{
display:inline-block;
width:5px;
height:8px;
position: absolute;
right:-5px;;
top:50%;
margin-top:-4px;
background:url(./img/yjt.png);
background-size:100% 100%;
}
.wrapper .screen-box .main .main-inner .inner-content{
float:left;
width:520px;
height:522px;
}
.wrapper .screen-box .main .main-inner .inner-content .pic-box{
padding:8px;
}
.wrapper .screen-box .main .main-inner .inner-content .inner-mall{
width:520px;
height:230px;
padding:0 8px;
}
.wrapper .screen-box .main .main-inner .inner-content .inner-mall .tm{
font-size:12px;
color:#666;
}
.wrapper .screen-box .main .main-inner .inner-right{
float:left;
padding:8px;
width:160px;
height:522px;
}
.wrapper .screen-box .main .main-inner .inner-right .hot{
font-size:14px;
margin-top:11px;
}
.wrapper .screen-box .main .main-bottom{
width:890px;
height:100px;
}
.wrapper .screen-box .main .main-bottom .content{
background-color: #fff;
padding:14px 12px;
margin-top:10px;
position: relative;
}
.wrapper .screen-box .main .main-bottom .content .logo-box{
width:180px;
height:73px;
background-image: url(./img/tbtt.png);
background-size: 100% 100%;
}
.wrapper .screen-box .main .main-bottom .content a{
position: absolute;
top:14px;
left:200px;
}
.wrapper .screen-box .main .main-bottom .content a img{
float:left;
}
.wrapper .screen-box .main .main-bottom .content a h4{
margin-top:2px;
margin-left:144px;
color:#333;
height:28px;
line-height:28px;
font-size:16px;
}
.wrapper .screen-box .main .main-bottom .content a h4:hover{
color:#ff5000;
}
.wrapper .screen-box .main .main-bottom .content a p{
margin-left:144px;
color:#999;
line-height:14px;
height:36px;
overflow:hidden;
}
/* 右侧部分 */
.wrapper .screen-box .col-right{
float:left;
width:290px;
height:632px;
}
.wrapper .screen-box .col-right .member{
width:290px;
height:132px;
background-image: url(./img/bg.png);
background-size: 100% 100%;
margin-top:10px;
}
.wrapper .screen-box .col-right .member .member-head{
width:290px;
height:91px;
}
.wrapper .screen-box .col-right .member .member-head .header{
width:290px;
height:56px;
text-align: center;
}
.wrapper .screen-box .col-right .member .member-head .header a{
display:inline-block;
width:50px;
height:50px;
border-radius:50%;
background-image: url(./img/tx.jpg);
background-size:100% 100%;
}
.wrapper .screen-box .col-right .member .member-head .hello{
display:block;
width:290px;
height:17px;
color:#3c3c3c;
font-size:14px;
line-height:17px;
text-align: center;
}
.wrapper .screen-box .col-right .member .member-head p{
width:290px;
height:17px;
text-align: center;
line-height:17px;
}
.wrapper .screen-box .col-right .member .member-head p a{
display:inline-block;
width:72px;
height:17px;
border-radius:9px;
background-color:#ffe4bd;
font-size:12px;
color:#ff5000;
padding:0 20px;
position: relative;
}
.wrapper .screen-box .col-right .member .member-head p a span{
position: absolute;
display:inline-block;
width:16px;
height:16px;
top:0;
left:0;
background-image:url(./img/pics.png)
}
.wrapper .screen-box .col-right .member .member-head p a.icon span{
background-position: 0 -572.5px;
}
.wrapper .screen-box .col-right .member .member-head p a.club span{
background-position: 0 -528px;
}
.wrapper .screen-box .col-right .member .member-foot{
width:290px;
height:40px;
text-align: center;
padding-top:10px;
}
.wrapper .screen-box .col-right .member .member-foot a{
display:inline-block;
width:75px;
height:25px;
background:linear-gradient(to right,#ff5000 0,#ff6f06 100%);
border-radius:4px;
line-height:25px;
text-align: center;
color:#fff;
font-size:14px;
font-weight:700;
}
.wrapper .screen-box .col-right .member .member-foot a.login{
width:92px;
}
.wrapper .screen-box .col-right .message{
width:290px;
height:26px;
}
.wrapper .screen-box .col-right .message a{
display:inline-block;
width:100%;
height:100%;
background-color:#ffe4dd;
text-align: center;
color:#f40;
font-size:12px;
line-height:26px;
position: relative;
}
.wrapper .screen-box .col-right .message a span{
display:inline-block;
width:10px;
height:10px;
position: absolute;
top:8px;
right:52px;
background-image: url(./img/ysj.png);
background-size:100% 100%;
}
.wrapper .screen-box .col-right .notice{
height:98px;
width:100%;
padding-top:10px;
}
.wrapper .screen-box .col-right .notice li{
float:left;
}
.wrapper .screen-box .col-right .notice .title{
height:24px;
width:100%;
padding:0 8px;
/* 转化盒模型样式 */
box-sizing:border-box;
}
.wrapper .screen-box .col-right .notice .title li{
width:32px;
height:20px;
margin:0 11px;
text-align: center;
}
.wrapper .screen-box .col-right .notice .title li a{
color:#3c3c3c;
font-size:13px;
line-height:20px;
padding:0 2px;
}
.wrapper .screen-box .col-right .notice .title li a.active{
font-weight:700;
border-bottom:2px solid #f40;
}
.wrapper .screen-box .col-right .notice .title li a:hover,
.wrapper .screen-box .col-right .notice .content li a.active,
.wrapper .screen-box .col-right .notice .content li a:hover{
color:#f40;
}
.wrapper .screen-box .col-right .notice .content{
width:100%;
height:50px;
padding:9px;
box-sizing:border-box;
}
.wrapper .screen-box .col-right .notice .content li{
width:130px;
height:25px;
line-height:25px;
text-align: center;
}
.wrapper .screen-box .col-right .notice .content li a{
font-size:12px;
color:#3c3c3c;
}
.wrapper .screen-box .col-right .module{
width:100%;
height:230px;
}
.wrapper .screen-box .col-right .module ul li{
float:left;
width:72px;
height:75px;
border:1px solid #eee;
box-sizing: border-box;
}
.wrapper .screen-box .col-right .module ul li:hover{
border:1px solid #f40;
}
.wrapper .screen-box .col-right .module ul li:hover a{
color: #f40;
}
.wrapper .screen-box .col-right .module ul li a{
display:block;
text-align: center;
}
.wrapper .screen-box .col-right .module ul li span{
display:inline-block;
width:24px;
height:24px;
border:1px solid black;
background:url(./img/pics.png);
margin-top:10px;
}
.wrapper .screen-box .col-right .module ul li a span.icon1{
background-position:0 0;
}
.wrapper .screen-box .col-right .module ul li a span.icon2{
background-position:0 -88px;
}
.wrapper .screen-box .col-right .module ul li a span.icon3{
background-position:0 -44px;
}
.wrapper .screen-box .col-right .module ul li a span.icon4{
background-position:0 -132px;
}
.wrapper .screen-box .col-right .module ul li a span.icon5{
background-position:0 -176px;
}
.wrapper .screen-box .col-right .module ul li a span.icon6{
background-position:0 -220px;
}
.wrapper .screen-box .col-right .module ul li a span.icon7{
background-position:0 -267px;
}
.wrapper .screen-box .col-right .module ul li a span.icon8{
background-position:0 -308px;
}
.wrapper .screen-box .col-right .module ul li a span.icon9{
background-position:0 -352px;
}
.wrapper .screen-box .col-right .module ul li a span.icon10{
background-position:0 -396px;;
}
.wrapper .screen-box .col-right .module ul li a span.icon11{
background-position:0 -440px;
}
.wrapper .screen-box .col-right .module ul li a span.icon12{
background-position:0 -484px;
}
.wrapper .screen-box .col-right .module ul li a p{
}
.wrapper .screen-box .col-right .app{
width:100%;
height:114px;
}
.wrapper .screen-box .col-right .app .title{
width:276px;
height:30px;
padding:0 14px;
}
.wrapper .screen-box .col-right .app .title h1{
display:inline-block;
font-size: 14px;
padding-left: 14px;
height: 30px;
line-height: 30px;
z-index: 2;
}
.wrapper .screen-box .col-right .app .title span{
float:right;
font-size:12px;
font-weight: 400;
margin-top:7px;
}
.wrapper .screen-box .col-right .app .content{
width:100%;
height:84px;
padding:0 23px;
}
.wrapper .screen-box .col-right .app .content ul li{
float:left;
width:32px;
height:32px;
margin:5px 10px;
}
.wrapper .screen-box .col-right .app .content ul li a img{
display:inline-block;
width:100%;
height:100%;
}
3610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
