学完HTML和CSS需要有一个好的练习，仿淘宝等首页都是一个不错的练习方法，目前处于学习原生js阶段，学html+css时没有做一个像样的项目，现在边学js边将前面的基础部分打牢。
里面很多地方可以用js写，轮播图这一块以及有些ul里面的li需要动态创建
之后都会进行修改。
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="tb.css">
</head>
<body>
<div class="wrapper">
<!-- 导航条 -->
<div class="top-nav-wrap">
<div class="top-nav">
<ul class="top-nav-lf">
<li class="top-nav-menu">
<span class="c-span">中国大陆</span>
<span class="bg-img"></span>
<span></span>
</li>
<li class="top-nav-menu">
<a class="login" href="#">亲，请登录</a>
<a class="sign" href="#">免费注册</a>
<span></span>
</li>
<li class="top-nav-menu">
<a href="#">手机逛淘宝</a>
<span></span>
</li>
</ul>
<ul class="top-nav-rt">
<li class="top-nav-menu">
<a href="#">我的淘宝</a>
<span class="bg-img "></span>
<span></span>
</li>
<li class="top-nav-menu">
<span class="bg-img shop-car"></span>
<a href="#">购物车 </a>
<span class="bg-img"></span>
<span></span>
</li>
<li class="top-nav-menu">
<span class="bg-img like-plus"></span>
<a href="#">收藏夹</a>
<span class="bg-img like"></span>
<span></span>
</li>
<li class="top-nav-menu">
<a href="#">商品分类</a>
<span></span>
</li>
<li class="top-nav-menu">
<span class="fgf">|</span>
<span></span>
</li>
<li class="top-nav-menu">
<a href="#">卖家中心</a>
<span class="bg-img"></span>
<span></span>
</li>
<li class="top-nav-menu">
<a href="#">联系客服</a>
<span class="bg-img"></span>
<span></span>
</li>
<li class="top-nav-menu">
<span class="bg-img web-nav"></span>
<a href="#">网站导航</a>
<span class="bg-img"></span>
<span></span>
</li>
</ul>
</div>
<div class="top-ad">
<img src="images/jd.jpg" alt="">
</div>
</div>
<!-- 搜索区域 -->
<div class="search-wrap">
<div class="search">
<div class="logo-box"></div>
<div class="search-box">
<div class="search-t">
<div class="select">
<ul>
<li class="current">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
</div>
<div class="search-mian">
<a href="#" class="fdj"></a>
<form action="">
<div class="search-inp-box">
<div class="search-inp">
<input type="text" placeholder="荣耀10降价">
</div>
</div>
<div class="btn">
<button class="submit">搜索</button>
</div>
</form>
<a href="#" class="cameral"></a>
</div>
</div>
<div class="search-b">
<a href="#" class="active">口红</a>
<a href="#" class="active">眼霜</a>
<a href="#">面膜</a>
<a href="#">夹克</a>
<a href="#">衬衫</a>
<a href="#"class="active">牛仔裤</a>
<a href="#">沙发</a>
<a href="#">护肤品</a>
<a href="#"class="active">男士外套</a>
<a href="#">男鞋</a>
<a href="#">化妆品</a>
<a href="#" class="active">休闲裤</a>
</div>
</div>
<div class="ewm-box">
<a href="#" class="phone">手机淘宝</a>
<a href="#"class="ewm"> </a>
<a href="#"class="xh">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="mian">
<div class="mian-inner">
<div class="inner-lf">
<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>
<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-cer">
<div class="pic-box">
<img src="images/pic2.png" alt="">
</div>
<div class="inner-bt">
<div class="head">
<img src="images/tm.png" alt="">
<span>理想生话上天猫</span>
</div>
<a href="#">
<img src="images/pic3.png" alt="">
</a>
</div>
</div>
<div class="inner-rt">
<a href="#" class=""><img src="images/pic1.png" alt=""></a>
<div class="hot">
<span>今日热卖</span>
<a href="#">
<img src="images/pic4.png" alt="">
</a>
</div>
</div>
</div>
<div class="mian-bottom">
<div class="content">
<div class="logo"></div>
<a href="#">
<img src="images/pic5.png" alt="">
<h4>双11前，全国最大的天猫新零售书店来了</h4>
<p>10月26日，全国最大的天猫零售体验书店在杭州开业，成为杭州最新的一道风景线。</p>
</a>
</div>
</div>
</div>
<div class="box-right">
<div class="member">
<div class="member-head">
<div class="head">
<a href="#">
<span></span>
<p>飞猪</p>
</a>
</div>
<span class="hello"> hi! 你好</span>
<p>
<a href="#">
<span class="tb"></span>
领淘金币抵钱
</a>
<a href="#">
<span class="meb"></span>
会员俱乐部
</a>
</p>
</div>
<div class="member-foot">
<a href="#" class="login">登录</a>
<a href="#" class="">注册</a>
<a href="#" class="">开店</a>
</div>
</div>
<div class="massage">
<a href="#">
网上有害信息举报
<span></span>
</a>
</div>
<div class="notice">
<div class="title">
<ul>
<li>
<a href="#" class="active">公告</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="content">
<ul>
<li>
<a href="#" class="active">
卖家如何设置公益宝贝
</a>
</li>
<li>
<a href="#">
公益项目如何加入公益
</a>
</li>
<li>
<a href="#" class="active">
四重曝光! 请你出道~
</a>
</li>
<li>
<a href="#">公益机构开店攻略</a>
</li>
</ul>
</div>
</div>
<div class="mobule">
<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">
<h3>阿里App
<a href="#" class="many">更多></a>
</h3>
<ul>
<li><a href="#"><img src="images/smalllogo1.png" alt=""></a></li>
<li><a href="#"><img src="images/smalllogo2.png" alt=""></a></li>
<li><a href="#"><img src="images/smalllogo3.png" alt=""></a></li>
<li><a href="#"><img src="images/smalllogo4.png" alt=""></a></li>
<li><a href="#"><img src="images/smalllogo5.png" alt=""></a></li>
<li><a href="#"><img src="images/smalllogo6.png" alt=""></a></li>
<li><a href="#"><img src="images/smalllogo7.png" alt=""></a></li>
<li><a href="#"><img src="images/smalllogo8.png" alt=""></a></li>
<li><a href="#"><img src="images/smalllogo9.png" alt=""></a></li>
<li><a href="#"><img src="images/smalllogo10.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html,body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.wrapper .top-nav-wrap {
width: 100%;
height: 105px;
}
.wrapper .top-nav-wrap .top-nav {
width: 1190px;
height: 35px;
margin: 0 auto;
}
.top-nav-wrap .top-nav .top-nav-lf {
float: left;
}
.top-nav-wrap .top-nav .top-nav-rt {
float: right;
}
.top-nav-wrap .top-nav .top-nav-menu{
float: left;
margin-right: 7px;
}
.top-nav-wrap .top-nav a{
color: #6c6c6c;
font-size: 12px;
line-height: 35px;
padding-right:6px;
}
.top-nav-wrap .top-nav a:hover{
color: #f40;
}
.top-nav-wrap .top-nav .c-span{
margin-left: 5px;
line-height: 35px;
font-size: 12px;
}
.top-nav-wrap .top-nav .bg-img{
width: 6px;
height: 6px;
display: inline-block;
background: url('images/xsj.png') no-repeat;
vertical-align: center;
}
.top-nav-wrap .top-nav .shop-car{
width: 12px;
height: 12px;
background: url('images/gwc.png') no-repeat;
}
.top-nav-wrap .top-nav .like-plus{
width: 12px;
height: 12px;
background: url('images/star.png') no-repeat;
}
.top-nav-wrap .top-nav .web-nav{
width: 8px;
height: 8px;
background: url('images/dh.png') no-repeat;
}
.top-nav-wrap .top-nav .login{
color: #f40;
}
.top-nav-wrap .top-nav .fgf{
color: #ccc;
line-height: 35px;
}
.top-nav-wrap .top-ad {
background-color:red;
}
.top-nav-wrap .top-ad img{
width: 1190px;
height: 70px;
display: block;
margin: 0 auto;
}
/* 搜索部分 */
.wrapper .search-wrap {
width: 100%;
height: 97px;
padding-top: 24px;
background-color: #fff;
}
.wrapper .search-wrap .search {
width: 1190px;
height: 88px;
margin: 0 auto;
position: relative;
}
.wrapper .search-wrap .search .logo-box{
position: relative;
float: left;
width: 190px;
height: 90px;
background: url('images/logo.png') no-repeat;
margin-right: 50px;
}
.wrapper .search-wrap .search .search-box {
float: left;
width: 627px;
height: 87px;
}
.wrapper .search-box .search-t{
width: 627px;
height: 62px;
}
.wrapper .search-box .search-t .select {
height: 22px;
margin-left: 17px;
}
.wrapper .search-box .search-t .select 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-box .search-t .select ul li:hover{
background-color: #ffeee5;
}
.wrapper .search-box .search-t .select ul .current{
background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
color: #fff;
font-weight: 700;
}
.search-box .search-t .search-mian {
position: relative;
width: 627px;
height: 40px;
}
.search-box .search-t .search-mian .fdj{
display: inline-block;
width: 15px;
height: 15px;
background: url('images/fdj.png') no-repeat;
position: absolute;
top: 15px;
left: 10px;
}
.search-box .search-t .search-mian .cameral{
display: inline-block;
width: 20px;
height: 20px;
background: url('images/camera.png') no-repeat;
background-size: 100% 100%;
position: absolute;
top: 11px;
right: 90px;
}
.search-box .search-t .search-mian .search-inp-box{
width: 551px;
height: 36px;
border: 2px solid #ff5000;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.search-box .search-t .search-mian .search-inp{
width: 472px;
height: 36px;
line-height: 36px;
padding-left: 5px;
}
.search-box .search-t .search-mian .search-inp input{
width:472px;
height: 24px;
padding-left: 5px;
/* 文字缩进 */
text-indent: 1em;
border: none;
outline: none;
}
.search-box .search-t .search-mian .btn{
width: 74px;
height: 40px;
position: absolute;
right: 0;
top: 0;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
overflow: hidden;
}
.search-box .search-t .search-mian .submit {
width: 100%;
height: 100%;
background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
border:none;
color: #fff;
font-size: 18px;
cursor: pointer;
font-weight: 700;
}
.wrapper .search-box .search-b{
width: 627px;
height: 20px;
}
.wrapper .search-box .search-b a{
margin-left: 8px;
font-size: 12px;
color: #666;
}
.wrapper .search-box .search-b a.active,
.wrapper .search-box .search-b a:hover
{
color: #ff5500;
}
.wrapper .search-wrap .search .ewm-box{
width: 76px;
height: 90px;
float: left;
margin-left: 120px;
position: relative;
}
.wrapper .search-wrap .search .ewm-box .phone{
color: #ff5000;
font-size: 14px;
line-height: 20px;
margin-left: 6px;
}
.wrapper .search-wrap .search .ewm-box .ewm{
width: 62px;
height: 62px;
display: inline-block;
background: url('images/ewm.png')no-repeat;
background-size: 100% 100%;
margin-left: 6px;
}
.wrapper .search-wrap .search .ewm-box .xh{
position: absolute;
width: 16px;
height: 16px;
color: #ddd;
font-size: 14px;
text-align: center;
border: 1px solid #eee;
top: 0;
left: -18px;
}
/* 中间导航条部分 */
.wrapper .screen-nav {
width: 1190px;
height: 30px;
background-image:linear-gradient(to right,#ff9900 0 ,#ff5500 100%);
margin: 0 auto;
}
.wrapper .screen-nav .screen-nav-con{
width: 100%;
height: 100%;
}
.wrapper .screen-nav .screen-nav-con h2{
width: 190px;
height: 100%;
color: #fff;
font-size: 16px;
text-align: center;
background-color: #ff5000;
line-height: 30px;
float: left;
}
.wrapper .screen-nav .screen-nav-con ul{
float: left;
}
.wrapper .screen-nav .screen-nav-con ul li{
float: left;
margin: 0 4px;
padding: 0 4px;
position: relative;
}
.wrapper .screen-nav .screen-nav-con ul li a{
font-size: 16px;
color: #fff;
line-height: 30px;
font-weight: 700;
}
.wrapper .screen-nav .screen-nav-con ul li:hover::before{
content:"";
/* 增加一个伪元素 */
display: block;
width: 30px;
height: 30px;
background:url('images/up.png') no-repeat;
background-size: center center;
position: absolute;
top: -11px;
left: 50%;
margin-left:-15px;
}
/* 主体展示部分 */
.wrapper .screen-box {
width: 1190px;
height: 632px;
margin: 0 auto;
}
.wrapper .screen-box .mian{
width: 890px;
height: 632px;
float: left;
}
.wrapper .screen-box .mian .mian-inner{
width: 890px;
height: 522px;
}
.wrapper .screen-box .mian .mian-inner .inner-lf{
width: 190px;
height: 100%;
border: 1px solid #f40;
border-top:none;
float: left;
background-color: #fff;
}
.wrapper .screen-box .mian .mian-inner .inner-lf li{
width:150px;
height:32px;
padding-left: 25px;
padding-right: 14px;
position: relative;
}
.wrapper .screen-box .mian .mian-inner .inner-lf li:hover{
background-color: #ffe4dc;
}
.wrapper .screen-box .mian .mian-inner .inner-lf li:hover a{
color: #ff5000;
}
.wrapper .screen-box .mian .mian-inner .inner-lf li a{
font-size: 14px;
font-weight: 400;
color: #666;
line-height: 32px;
text-align: center;
}
.wrapper .screen-box .mian .mian-inner .inner-lf li span{
display: inline-block;
width:5px;
height: 8px;
position: absolute;
right: 5px;
top: 12px;
background: url('images/yjt.png') no-repeat;
background-size: 100% 100%;
}
.wrapper .screen-box .mian .mian-inner .inner-cer{
width: 520px;
height: 100%;
float: left;
}
.wrapper .screen-box .mian .mian-inner .inner-cer .pic-box{
padding: 8px;
padding-right:0;
}
.wrapper .screen-box .mian .mian-inner .inner-bt{
width: 520px;
height: 230px;
padding: 0 8px;
}
.wrapper .screen-box .mian .mian-inner .inner-bt span{
font-size: 12px;
color: #666;
}
.wrapper .screen-box .mian .mian-inner .inner-rt {
padding: 8px;
width: 160px;
height: 520px;
float: left;
}
.wrapper .screen-box .mian .mian-inner .inner-rt .hot
{ margin-top:10px;
font-size: 12px;
}
.wrapper .screen-box .mian .mian-bottom{
width: 890px;
height: 110px;
}
.wrapper .screen-box .mian .mian-bottom .content{
background-color: #fff;
padding: 14px 12px;
margin-top:10px;
position: relative;
}
.wrapper .screen-box .mian .mian-bottom .content .logo{
width: 180px;
height: 73px;
background: url('images/tbtt.png') no-repeat;
background-size: 100% 100%;
}
.wrapper .screen-box .mian-bottom .content a{
position: absolute;
top : 0;
left: 200px;
}
.wrapper .screen-box .mian-bottom .content img{
float: left;
/* 字围效果 */
}
.wrapper .screen-box .mian-bottom .content h4{
margin: 2px 0 8px 144px;
height: 28px;
line-height: 28px;
font-size: 16px;
color: #333;
}
.wrapper .screen-box .mian-bottom .content h4:hover{
color: #ff5000;
}
.wrapper .screen-box .mian-bottom .content p{
margin-left: 144px;
height: 36px;
line-height: 14px;
font-size: 16px;
overflow: hidden;
color: #999;
}
/* 右侧部分 */
.wrapper .screen-box .box-right{
width: 290px;
height: 632px;
float: left;
margin-left: 8px;
}
.wrapper .screen-box .box-right .member{
width: 290px;
height: 132px;
background: url('images/bg.png') no-repeat;
background-size: 100% 100%;
}
.wrapper .screen-box .box-right .member .member-head{
width: 290px;
height: 91px;
}
.wrapper .screen-box .box-right .member-head .head{
width: 290px;
height: 56px;
position: relative;
}
.wrapper .screen-box .box-right .member-head .head a{
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
background: url('images/tx.jpg') no-repeat;
background-size: 100% 100%;
position: absolute;
top: 5px;
left: 50%;
margin-left: -25px;
}
.wrapper .screen-box .box-right .member-head .hello{
display: inline-block;
width: 290px;
height: 17px;
line-height: 17px;
font-size: 12px;
columns: #3c3c3c;
text-align: center;
}
.wrapper .screen-box .box-right .member-head p{
height: 17px;
line-height: 17px;
text-align: center;
}
.wrapper .screen-box .box-right .member-head p a{
display: inline-block;
width: 72px;
height: 17px;
border-radius: 6px;
background-color: #ffe4dc;
line-height: 17px;
font-size: 12px;
font-weight: 700;
color: #f40;
padding-left: 20px;
padding-right: 8px;
position: relative;
}
.wrapper .screen-box .box-right .member-head p span{
display: inline-block;
width:16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
}
.wrapper .screen-box .box-right .member-head p .tb{
background: url('images/pics.png') no-repeat;
background-position: 0 -572.5px;
}
.wrapper .screen-box .box-right .member-head p .meb{
background: url('images/pics.png') no-repeat;
background-position: 0 -528px;
}
.wrapper .screen-box .box-right .member-foot{
width: 290px;
height: 30px;
padding-top: 10px;
text-align: center;
}
.wrapper .screen-box .box-right .member-foot a{
display: inline-block;
width: 75px;
height: 25px;
text-align: center;
line-height: 25px;
color: #fff;
margin: 0 6px;
font-size: 14px;
font-weight: 700;
border-radius: 6px;
background-image: linear-gradient(to right,#ff9900 0,#ff5500 100%);
}
.wrapper .screen-box .box-right .massage{
width: 290px;
height: 26px;
}
.wrapper .screen-box .box-right .massage a{
display: inline-block;
width: 100%;
height: 100%;
line-height: 26px;
text-align: center;
font-size: 12px;
color: #ff5500;
position: relative;
background-color: #ffe4dd;
}
.wrapper .screen-box .box-right .massage span{
position: absolute;
right: 52px;
top: 10px;
width: 8px;
height: 8px;
background: url('images/ysj.png') no-repeat;
background-size: 100% 100%;
}
.wrapper .screen-box .box-right .notice{
width: 290px;
height: 98px;
padding-top: 10px;
}
.wrapper .screen-box .box-right .notice .title{
width: 270px ;
height: 24px;
padding-left: 20px;
}
.wrapper .screen-box .box-right .notice .title ul li{
float: left;
width: 45px;
height: 24px;
text-align: center;
margin-right: 6px;
}
.wrapper .screen-box .box-right .notice .title ul li a{
font-size: 13px;
color: #000;
line-height: 24px;
padding: 0 2px;
}
.wrapper .screen-box .box-right .notice .title ul li a.active{
border-bottom:2px solid #ff5000;
}
.wrapper .screen-box .box-right .notice .content{
width: 100%;
padding: 9px;
box-sizing: border-box;
}
.wrapper .screen-box .box-right .notice .content li{
float: left;
width: 130px;
height: 25px;
padding-right: 3px;
}
.wrapper .screen-box .box-right .notice .content li a{
height: 25px;
line-height: 25px;
font-size: 13px;
color: #000;
}
.wrapper .screen-box .box-right .notice .title ul li a:hover,
.wrapper .screen-box .box-right .notice .content li a.active,
.wrapper .screen-box .box-right .notice .content ul li a:hover{
color: #ff5500;
}
.wrapper .screen-box .box-right .mobule {
width: 290px;
height: 230px;
}
.wrapper .screen-box .box-right .mobule li{
float: left;
width: 70px;
height: 72px;
border: 1px solid #f4f4f4;
}
.wrapper .screen-box .box-right .mobule li:hover{
border: 1px solid #ff5500;
}
.wrapper .screen-box .box-right .mobule li:hover p{
color: #ff5500;
}
.wrapper .screen-box .box-right .mobule li a{
display: inline-block;
padding-top: 15px;
width: 100%;
height: 100%;
text-align: center;
box-sizing:border-box;
}
.wrapper .screen-box .box-right .mobule li a span{
display: inline-block;
width: 24px;
height: 24px;
background: url('images/pics.png') no-repeat;
}
.wrapper .screen-box .box-right .mobule li a span.icon1{
background-position: 0 0;
}
.wrapper .screen-box .box-right .mobule li a span.icon2{
background-position: 0 -44px;
}
.wrapper .screen-box .box-right .mobule li a span.icon3{
background-position: 0 -88px;
}
.wrapper .screen-box .box-right .mobule li a span.icon4{
background-position: 0 -172px;
}
.wrapper .screen-box .box-right .mobule li a p{
color: #000;
font-size: 12px;
}
.wrapper .screen-box .box-right .app h3{
font-size: 14px;
line-height: 30px;
padding-left: 10px;
position: relative;
}
.wrapper .screen-box .box-right .app h3 .many{
position: absolute;
right: 20px;
font-size: 13px;
height: 15px;
color: #333;
font-weight: 300;
}
.wrapper .screen-box .box-right .app h3 .many:hover{
color: #ff5000;
}
.wrapper .screen-box .box-right .app li{
float: left;
width: 32px;
height:32px;
margin: 10px;
}
.wrapper .screen-box .box-right .app li img{
width: 100%;
height: 100%;
}
扫一扫
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
