<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="淘寶靜態網頁製作CSS0524.css">
<title>淘寶網-淘我喜歡</title>
</head>
<body>
<div class="wrapper"><!--整體父級，導航欄，搜索欄，主要區域 ，展示區 -->
<div class="top-nav-wrap">
<div class="top-nav">
<ul class="top-nav-left">
<li class="top-nav-menu china">
<span class="china-span">中國大陸</span>
<span class="bgPic xsjPic"></span>
</li>
<li class="top-nav-menu loginAndreg">
<a class="login" href="#">親，請登錄</a>
<a class="reg" href="#">免費註冊</a>
</li>
<li class="top-nav-menu phone">
<a href="#" href="#">手機逛淘寶</a>
</li>
</ul>
<ul class="top-nav-right">
<li class="top-nav-menu myTaobao">
<a href="#">
我的淘寶
<span class="bgPic"></span>
</a>
</li>
<li class="top-nav-menu shopCar">
<a href="#">
<span class="bgPic shopCarPic"></span>
<span>購物車</span>
</a>
</li>
<li class="top-nav-menu like">
<a href="#">
<span class="bgPic likePic"></span>
<span>收藏夾</span>
</a>
<span class="bgPic xsjPic"></span>
</li>
<li class="top-nav-menu goods">
<a href="#">商品分類</a>
</li>
<li class="top-nav-menu cutoff">
<span>|</span>
</li>
<li class="top-nav-menu seller">
<a href="#">賣家中心</a>
<span class="bgPic xsjPic"></span>
</li>
<li class="top-nav-menu cell">
<a href="#">聯繫客服</a>
<span class="bgPic xsjPic"></span>
</li>
<li class="top-nav-menu ">
<a href="#">
<span class="bgPic webNavPic"></span>
<span>網站導航</span>
</a>
<span class="bgPic xsjPic"></span>
</li>
</ul>
</div>
</div><!-- 1.頂部的導航欄 -->
<div class="search-wrap">
<div class="search-con">
<div class="logo-box">
<img src="img/logo.png" alt="">
</div><!--LOGO 結束了-->
<div class="search-box">
<div class="search-bd">
<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>搜索</button>
</div>
<div class="search-inp-box">
<div class="search-inp">
<input type="text" name="" id="" placeholder="五子棋霧化芯">
</div>
</div>
</form>
<a href="#" class="camera"></a>
</div><!--搜索區，放大鏡，表單，-->
</div>
<div class="search-ft">
<ul>
<li><a href="#">女裝</a></li>
<li><a href="#">春裝</a></li>
<li><a href="#">運動鞋</a></li>
<li><a href="#">牆紙</a></li>
<li><a href="#" class="select">男士外套</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>
<a href="#" class="more">更多</a>
</div>
</div><!-- 搜索中心區 結束了 -->
<div class="code-box">
<a href="#" class="p-tb">手機淘寶</a>
<a href="#" class="code"></a>
<a href="#" class="close">x</a>
</div><!-- 二維碼 結束了 -->
</div>
</div><!-- 2. 搜索區 -->
<div class="scren-nav-wrap">
<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>|</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>|</li>
<li>
<a href="#">飛豬旅行</a>
</li>
<li>
<a href="#">智能生活</a>
</li>
<li>
<a href="#">蘇寧易購</a>
</li>
</ul>
</div>
</div><!-- 3.內容區域導航欄 -->
<div class="screen-box-wrap">
<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>
<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="#">男裝</a> |
<a href="#">女裝</a>
<span></span>
</li>
</ul>
</div>
<div class="inner-con">
<div class="pic-box">
<a href="#">
<img src="img/pic2.png" alt="">
</a>
<ul class="list">
<li>
<a href="#" class="select"></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="inner-mall">
<div class="head">
<span class="tm-pic"></span>
<span class="tm">理想生活上天貓</span>
</div>
<a href="#">
<img src="img/pic3.png" alt="">
</a>
</div>
</div>
</div>
<div class="col-middle">
<a href="#" class="middle-pic1">
<img src="img/pic1.png" alt="">
</a>
<div class="middle-pic2">
<h5>今日熱賣</h5>
<img src="img/pic4.png" alt="">
</div>
</div>
<div class="main-bottom">
<div class="bottom-con">
<div class="logo">
<img src="img/tbtt.png" alt="">
</div>
<a href="#" class="tbttCon">
<img src="img/pic5.png" alt="">
<h4>十月養月季，自己做有機肥，肥料前都省了</h4>
<p>
汽車之家新聞 :兩年一度的東京車展即將在10月25日正式開幕，作爲日系廠家的本土主場，本屆車展上豐田、本田、日產、鈴木、雷克薩斯、馬自達、斯巴魯等廠家都將在車展上發佈自己的最新產品，包括全新皇冠概念車、豐田TjCruiser、豐田GRHVSPORTS、全新Supra、全新世紀、三。汽車之家新聞.兩年一度的東京車展即將在10月25日正式開幕，作爲日系廠家的本土主場，本屆車展上豐田、本田、日產、鈴木、雷克薩斯、馬自達、斯巴魯等廠家都將在車展上發佈自己的最新產品，包括全新皇冠概念車、豐田TjCruiser、豐田GRHVSPORTS、全新Supra、全新世紀、三。這裏查看文字樣式裏面的隱藏樣式會發生什麼呢？
</p>
</a>
</div>
</div>
</div>
<div class="col-right">
<div class="member">
<div class="member-bd">
<div class="tx">
<a href="#">
<img src="img/tx.jpg" alt="">
</a>
</div>
<span class="hello">嗨！ 你好</span>
<p>
<a href="#" class="icon">
<span class="pic"></span>
淘金幣領錢
</a>
<a href="#" class="club">
<span class="pic"></span>
會員俱樂部
</a>
</p>
</div>
<div class="member-ft">
<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="#">論壇</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li>
<a href="#" class="select">公益</a>
</li>
</ul>
</div>
<div class="con">
<ul>
<li>
<a href="#" class="select">九寨溝緊急救援</a>
</li>
<li>
<a href="#" class="select">公益寶貝准入公告</a>
</li>
<li>
<a href="#">數百萬商家感謝信</a>
</li>
<li>
<a href="#">公益寶貝發票索取</a>
</li>
</ul>
</div>
</div>
<div class="module">
<ul>
<li><a href="#"><span class="pic1"></span><p>充話費</p></a></li>
<li><a href="#"><span class="pic2"></span><p>旅行</p></a></li>
<li><a href="#"><span class="pic3"></span><p>車險</p></a></li>
<li><a href="#"><span class="pic4"></span><p>彩票</p></a></li>
<li><a href="#"><span class="pic5"></span><p>電影</p></a></li>
<li><a href="#"><span class="pic6"></span><p>理財</p></a></li>
<li><a href="#"><span class="pic7"></span><p>找服務</p></a></li>
<li><a href="#"><span class="pic8"></span><p>水電煤</p></a></li>
<li><a href="#"><span class="pic9"></span><p>車票</p></a></li>
<li><a href="#"><span class="pic10"></span><p>演出</p></a></li>
<li><a href="#"><span class="pic11"></span><p>遊戲</p></a></li>
<li><a href="#"><span class="pic12"></span><p>酒店</p></a></li>
</ul>
</div>
<div class="app">
<h3>阿里APP
<a href="#">更多》</a>
</h3>
<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>
<!-- 左邊區域 left -->
<!-- -->
</div><!-- 4. 中間圖片展示區域 -->
</div>
</body>
</html>CSS文件
*{
margin:0;
padding:0;
list-style:none;
text-decoration: none;
}
html,body{
width: 100%;
background-color: #f4f4f4;
height: 1000px;
}
.wrapper{
width:100%;
height: 100%;
}
/*父子選擇器 導航欄居中，自適應的*/
.wrapper .top-nav-wrap{
width:100%;
height: 35px;
background-color:#f5f5f5;
/*border:1xp solid #eee;*/
}
.wrapper .top-nav-wrap .top-nav{
width:1190px;
height: 35px;
margin:0px auto;
/*border:1px solid black;*/
}
.wrapper .top-nav-wrap .top-nav .top-nav-left{
float:left;
}
.wrapper .top-nav-wrap .top-nav .top-nav-right{
float:right;
}
.wrapper .top-nav-wrap .top-nav li{
float: left;
margin-left: 7px;
}
.wrapper .top-nav-wrap .top-nav a{
color:#6c6c6c;
font-size:12px;
line-height:35px;
padding: 6px;
}
.wrapper .top-nav-wrap .top-nav a:hover,
.wrapper .top-nav-wrap .top-nav li .login{
color:#f40;
}
.wrapper .top-nav-wrap .top-nav .bgPic{
display:inline-block;
width:6px;
height: 3px;
vertical-align: middle;
background-size:100% 100%;
/*border:1px solid black;*/
}
.wrapper .top-nav-wrap .top-nav .xsjPic{
background-image: url("img/xsj.png");
}/*其他的圖片就不引用了*/
.wrapper .top-nav-wrap .top-nav .shopCarPic{
width:12px;
height: 12px;
background-image: url(img/gwc.png);
}
.wrapper .top-nav-wrap .top-nav .likePic{
width:12px;
height:12px;
background-image:url(img/star.png);
}
.wrapper .top-nav-wrap .top-nav .webNavPic{
width:12px;
height:15px;
background-image:url(img/dh.png);
}
.wrapper .top-nav-wrap .top-nav .cutoff span{
color:#ddd;
line-height: 35px;
}
.wrapper .top-nav-wrap .china{
color:#3c3c3c;
font-size:12px;
line-height:35px;
}
.wrapper .top-nav-wrap .china .china-span{
padding: 6px;
}
/*導航條部分結束，搜索區域開始：*/
.wrapper .search-wrap{
width:100%;
height: 97px;
/*border:1px solid black;*/
}
.search-wrap .search-con{
width:1190px;
height: 88px;
/*border: 1px solid black;*/
margin:0 auto;
}
.search-wrap .search-con .logo-box{
display: inline-block;
vertical-align: middle;
width:190px;
height: 80px;
/*border:1px solid red;*/
}
.search-wrap .search-con .logo-box img{
width: 100%;
height: 100%;
}
/*LOGO 部分 結束了*/
.search-wrap .search-con .search-box{
display: inline-block;
vertical-align: middle;
width:627px;
height: 87px;
margin-left:50px;
/*border:1px solid red;*/
}
.search-wrap .search-con .search-box .search-bd{
width:627px;
height: 62px;
/*border:1px solid black;*/
}
.search-wrap .search-con .search-box .search-bd .search-tab{
width:610px;
height: 22px;
margin-left:17px;
/*border:1px solid black;*/
}
/*li的字體設置*/
.search-wrap .search-con .search-box .search-bd li{
float:left;
color:#f40;
width: 36px;
height:22px;
line-height: 22px;
text-align:center;
margin-right: 4px;
font-weight:12px;
}
.search-wrap .search-con .search-box .search-bd li:hover{
background-color:#ffeee5;
}
.search-wrap .search-con .search-box .search-bd .select{
background:linear-gradient(to right,#ff9000 0,#ff5000 100%);
color:#fff;
font-weight:700;
border-top-right-radius:6px;
border-top-left-radius:6px;
}
.search-wrap .search-con .search-box .search-panel{
height: 40px;
width:627px;
position: relative;
/*border:1px solid red;*/
}
.search-wrap .search-con .search-box .search-panel .sousuo,
.search-wrap .search-con .search-box .search-panel .camera{
display: inline-block;
position: absolute;
}
.search-wrap .search-con .search-box .search-panel .camera{
width:20px;
height:22px;
top:11px;
right:90px;
background:url(img/camera.png) no-repeat;
background-size:100% 100%;
}
.search-wrap .search-con .search-box .btn{
position: absolute;
right: 0px;
top: 0px;
width:74px;
height:40px;
z-index:1000;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
text-alingn:center;
}
.search-wrap .search-con .search-box .btn button{
border:none;
background:linear-gradient(to right,#ff9000 0,#ff5000 100%);
color:#fff;
width:100%;
height:100%;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
cursor:pointer;
font-size:18px;
font-weight:700;
}
.search-wrap .search-con .search-box .search-inp-box{
height:36px;
width:552px;
border:3px solid #ff5000;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
border-right:none;
overflow: hidden;
margin-right:74px;
}
.search-wrap .search-con .search-box .search-inp-box .search-inp{
width:552px;
height:36px;
overflow: hidden;
}
.search-wrap .search-con .search-box .search-inp-box .search-inp input{
width:552px;
height: 24px;
line-height: 24px;
border:none;
outline: 0;
text-indent:10px;
padding:6px 16px;
background-color: #fff;
}
.search-wrap .search-con .search-box .search-ft ul li{
float: left;
}
.search-wrap .search-con .search-box .search-ft ul li a{
color:#666;
margin-right: 8px;
font-size: 12px;
}
.search-wrap .search-con .search-box .search-ft ul li a:hover,
.search-wrap .search-con .search-box .search-ft .select a{
color:#ff5000;
}
.search-wrap .search-con .search-box .search-ft{
width:586px;
height: 18px;
/*border:1px solid red;*/
}
.search-wrap .search-con .search-box .search-ft .more{
float: right;
font-size: 12px;
}
.search-wrap .search-con .search-box .search-ft select{
}
/*二維碼部分樣式*/
.search-wrap .search-con .code-box{
display: inline-block;
vertical-align: middle;
width:90px;
height: 76px;
border:1px solid #eee;
margin-left:120px;
position:relative;
}
.search-wrap .search-con .code-box .p-tb{
display: inline-block;
line-height: 20px;
margin:4px auto 0;
width:78px;
color:#ff5000;
text-align: center;
font-size:14px;
}
.search-wrap .search-con .code-box .code{
display:inline-block;
margin-left:6px;
width:62px;
height:62px;
background:url(img/ewm.png) no-repeat;
background-size:100% 100%;
}
.search-wrap .search-con .code-box .close{
position: absolute;
top:0;
height:14px;
width:14px;
border:1px solid #eee;
left:-16px;
line-height:14px;
text-align:center;
color:#ddd;
font-size:14px;
}
/*3.中間導航條開始*/
.wrapper .scren-nav-wrap{
width:100%;
height:30px;
}
.wrapper .screen-nav-con{
width:1190px;
height:30px;
margin:0 auto;
background:linear-gradient(to right,#ff9000 0,#ff5000 100%);
}
.wrapper .screen-nav-con h2{
float: left;
width:190px;
height:30px;
color:#fff;
background-color: #ff5000;
font-size:16px;
text-align: center;
line-height:30px;
}
.wrapper .screen-nav-con ul{
height: 30px;
font-size:16px;
float: left;
}
.wrapper .screen-nav-con ul li{
float: left;
text-alingn:center;
padding:4px;
margin:0 3px;
line-height:30px;
font-weight: 700;
color:#fff;
}
.wrapper .screen-nav-con ul li a{
color:#fff;
text-align:center;
line-height: 30px;
}
/*4.主要區域開始了*/
.wrapper .screen-box-wrap {
width: 1190px;
margin:0 auto;
border:1px solid black;
height: 632px;
}
.wrapper .screen-box-wrap .main{
width:890px;
height:632px;
border:1px solid black;
float:left;
}
.wrapper .screen-box-wrap .main .main-inner{
width:720px;
height:552px;
border:1px solid black;
display:inline-block;
vertical-align:top;
float: left;
}
.wrapper .screen-box-wrap .main .main-inner .inner-left{
height:552px;
width:190px;
background-color:#fff;
float: left;
}
.wrapper .screen-box-wrap .main .main-inner .inner-left ul{
border:1px solid #ff5000;
border-top: none;
padding-top: 5px;
padding-bottom: 33px;
font-size:14px;
}
.wrapper .screen-box-wrap .main .main-inner .inner-left ul li{
height:32px;
width:144px;
line-height: 32px;
font-weight:400;
padding-left: 25px;
padding-right:15px;
position: relative;
}
.wrapper .screen-box-wrap .main .main-inner .inner-left ul li:hover{
color:#ffeee5;
background-color: #ffeee5;
}
.wrapper .screen-box-wrap .main .main-inner .inner-left ul li:hover a{
color:#ff5000;
}
.wrapper .screen-box-wrap .main .main-inner .inner-left ul li a{
color:#666;
}
.wrapper .screen-box-wrap .main .main-inner .inner-left ul li span{
position: absolute;
display: inline-block;
height:10px;
width: 5px;
background-image: url(img/yjt.png);
background-size:100% 100%;
top:50%;
margin-top:-6px;
margin-left:8px;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con{
width:520px;
height:512px;
/*background-color:red;*/
float: left;
margin-left:10px;
margin-top:10px;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .pic-box{
position: relative;
width: 520px;
height:280px;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .pic-box .list{
position: absolute;
bottom:15px;
left:50%;
margin-left: -35px;
background-color: rgba(255,255,255,.3);
height:13px;
/*width:170px;*/
border-radius: 10px;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .pic-box .list li{
float: left;
margin:3px;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .pic-box .list li a{
display: block;
width:8px;
padding-top: 8px;
height:0;
border-radius:50%;
background-color:#fff;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .pic-box .list li .select{
background-color: #ff5000;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .inner-mall{
width: 520px;
height:230px;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .inner-mall .head{
width:520px;
height:22px;
border-bottom: 3px solid #ff5000;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .inner-mall img{
width: 520px;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .inner-mall .head .tm-pic{
display: inline-block;
width:136px;
height:20px;
background-image:url(img/tm.png);
background-size:100% 100%;
}
.wrapper .screen-box-wrap .main .main-inner .inner-con .inner-mall .head .tm{
color:#666;
font-size:12px;
}
.wrapper .screen-box-wrap .main .col-middle{
display: inline-block;
width: 160px;
height: 512px;
margin-top:10px;
/*border:1px solid black;*/
vertical-align: top;
float: left;
}
.wrapper .screen-box-wrap .main .col-middle .middle-pic2 h5{
color:#a1a1a1;
font-size:12px;
line-height: 30px;
}
.wrapper .screen-box-wrap .main .main-bottom{
width:888px;
height: 100px;
/*position: relative;*/
float: left;
}
.wrapper .screen-box-wrap .main .main-bottom .bottom-con{
position: relative;
margin-top:10px;
height: 73px;
padding:14px 14px 12px 20px;
background-color: #fff;
}
.wrapper .screen-box-wrap .main .main-bottom .bottom-con .logo{
float: left;
}
.wrapper .screen-box-wrap .main .main-bottom .bottom-con .tbttCon{
width: 675px;
height:73px;
position: absolute;
top:14px;
left: 200px;
overflow: hidden;
}
.wrapper .screen-box-wrap .main .main-bottom .bottom-con .tbttCon img{
float: left;
width:130px;
height:73px;
}
.wrapper .screen-box-wrap .main .main-bottom .bottom-con .tbttCon h4{
font-size:16px;
font-weight:500;
lint-height:28px;
color:#333;
margin-top:2px;
margin-left:144px;
}
.wrapper .screen-box-wrap .main .main-bottom .bottom-con .tbttCon h4:hover{
color:#ff5000;
}
.wrapper .screen-box-wrap .main .main-bottom .bottom-con .tbttCon p{
color:#999;
line-height: 18px;
heighet:36px;
/*overflow: hidden;*/
font-size:12px;
margin-left: 144px;
}
.wrapper .screen-box-wrap .col-right{
width:285px;
height:632px;
/*border:1px solid black;*/
background-color: #fff;
float:left;
margin-left:10px;
margin-top:10px;
}
.wrapper .screen-box-wrap .col-right .member{
width: 290px;
height: 132px;
padding:3px 0px 10px 0px;
background:url(img/bg.png) no-repeat;
background-size: 100% 100%;
}
.wrapper .screen-box-wrap .col-right .member .member-bd{
width: 290px;
height: 91px;
/*border-bottom: 1px solid black;*/
}
.wrapper .screen-box-wrap .col-right .member .member-bd .tx{
width: 290px;
text-align: center;
height: 56px;
}
.wrapper .screen-box-wrap .col-right .member .member-bd .tx a{
display: inline-block;
width:50px;
height: 50px;
/*border-radius:50%;*/
}
.wrapper .screen-box-wrap .col-right .member .member-bd .tx a img{
border-radius:50%;
}
.wrapper .screen-box-wrap .col-right .member .member-bd .hello{
display: block;
height: 17px;
line-height: 17px;
text-align: center;
color:#333;
font-size:14px;
}
.wrapper .screen-box-wrap .col-right .member .member-bd p{
width: 290px;
height: 17px;
line-height: 17px;
text-align: center;
}
.wrapper .screen-box-wrap .col-right .member .member-bd p .icon,
.wrapper .screen-box-wrap .col-right .member .member-bd p .club{
display: inline-block;
height:17px;
position: relative;
color:#ff5000;
font-size:14px;
line-height: 17px;
padding:0 10px 0 20px;
background:#ffe4db;
border-radius:9px;
}
.wrapper .screen-box-wrap .col-right .member .member-bd p .pic{
display: inline-block;
height: 16px;
width: 16px;
vertical-align: middle;
position: absolute;
top: 0;
left:0;
background:url(img/pics.png) no-repeat;
}
.wrapper .screen-box-wrap .col-right .member .member-bd p .icon .pic{
background-position:0 -572.5px;
}
.wrapper .screen-box-wrap .col-right .member .member-bd p .club .pic{
background-position:0 -573px;
}
.wrapper .screen-box-wrap .col-right .member .member-ft{
width: 290px;
height: 40px;
text-align: center;
margin-top: 8px;
}
.wrapper .screen-box-wrap .col-right .member .member-ft a{
display: inline-block;
width:75px;
height: 25px;
text-align: center;
color:#fff;
background:linear-gradient(to right,#ff5000 0,#ff6f06 100%);
line-height: 25px;
font-size:14px;
font-weight: 700;
border-radius:4px;
margin-right: 7px;
}
.wrapper .screen-box-wrap .col-right .member .member-ft .login{
width: 92px;
}
.wrapper .screen-box-wrap .col-right .message{
width: 290px;
height: 26px;
background-color: #ffe4db;
}
.wrapper .screen-box-wrap .col-right .message a{
color:#ff5000;
line-height:26px;
position: relative;
padding-left: 82px;
font-size:12px;
}
.wrapper .screen-box-wrap .col-right .message a span{
position: absolute;
right:-72px;
top:7px;
height:7px ;
width:10px;
background:url(img/ysj.png) no-repeat;
background-size: 100% 100%;
}
.wrapper .screen-box-wrap .col-right .notice{
height: 98px;
padding-top:10px;
width:290px;
border-bottom:1px solid black;
}
.wrapper .screen-box-wrap .col-right .notice li{
float: left;
}
.wrapper .screen-box-wrap .col-right .notice .title{
/*width: 290px;*/
height: 24px;
margin-top:0 8px;
}
.wrapper .screen-box-wrap .col-right .notice .title li{
width:32px;
margin:0 10px;
line-height:20px;
text-align: center;
}
.wrapper .screen-box-wrap .col-right .notice .title li a{
color:#3c3c3c;
font-size:14px;
}
.wrapper .screen-box-wrap .col-right .notice .title li a:hover{
color:#ff5000;
}
.wrapper .screen-box-wrap .col-right .notice .title li .select{
font-weight: 400;
padding-bottom: 4px;
border-bottom: 3px solid #f40;
}
.wrapper .screen-box-wrap .col-right .notice .con li{
width:130px;
height: 25px;
line-height: 25px;
}
.wrapper .screen-box-wrap .col-right .notice .con li .select{
color:#f40;
}
.wrapper .screen-box-wrap .col-right .notice .con li a{
color:#3c3c3c;
font-size: 14px;
}
.wrapper .screen-box-wrap .col-right .notice .con li a:hover{
color:#ff5000;
}
.wrapper .screen-box-wrap .col-right .module{
height: 232px;
width: 290px;
border:1px solid #f4f4f4;
}
.wrapper .screen-box-wrap .col-right .module li{
float: left;
width: 71px;
height: 75px;
border-right: 1px solid #f4f4f4;
border-borrom:1px solid #f4f4f4;
}
.wrapper .screen-box-wrap .col-right .module li a{
display: block;
text-align:center;
}
.wrapper .screen-box-wrap .col-right .module li a span{
display: inline-block;
width:24px;
height:24px;
background: url(img/pics.png) 100% 100% no-repeat;
}
.wrapper .screen-box-wrap .col-right .module li a .pic1{
background-position:0px 0px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic2{
background-position:0px -85px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic3{
background-position:0px -44px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic4{
background-position:0px -132px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic5{
background-position:0px -176px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic6{
background-position:0px -220px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic7{
background-position:0px -264px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic8{
background-position:0px -308px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic9{
background-position:0px -352px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic10{
background-position:0px -396px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic11{
background-position:0px -440px;
}
.wrapper .screen-box-wrap .col-right .module li a .pic12{
background-position:0px -484px;
}
.wrapper .screen-box-wrap .col-right .module li a p{
color:##3c3c3c;
font-size:12px;
line-height: 24px;
}
.wrapper .screen-box-wrap .col-right .app{
height:110px;
width: 290px;
}
.wrapper .screen-box-wrap .col-right .app h3{
font-size:14px;
height: 30px;
line-height:30px;
padding-left: 14px;
position:relative;
}
.wrapper .screen-box-wrap .col-right .app h3 a{
position: absolute;
right: 10px;
color:#3c3c3c;
}
.wrapper .screen-box-wrap .col-right .app ul{
height: 84px;
padding-left: 23px;
}
.wrapper .screen-box-wrap .col-right .app ul li{
float: left;
width:32px;
height: 32px;
margin-right: 21px;
margin-bottom: 8px;
}
.wrapper .screen-box-wrap .col-right .app ul li img{
width:32px;
height: 32px;
}
/*定位 標籤 浮動 display*/經驗：
- CSS和HTML要有意義的結構格式，對等的結構樹。
- CSS與HTML的編寫過程都是現有結構，再有內容。實現上一條的效果。