這是疫情在家時候無聊仿寫淘寶PC端的首屏，過去的時間比較久，可能頁面改了很多圖檔，但HTML大體排版都一樣，做為鞏固各種布局還是挺不錯的。因為是靜态的，是以沒有js代碼，大家看看就好。
更新：
Github傳送門
貼個樣式圖
首先是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">
<link rel="stylesheet" href="index.css">
<title>淘寶網 - 淘！我喜歡</title>
</head>
<body>
<div class="wrapper">
<div class="head">
<div class="head-text">
<div class="head-left">
<ul>
<li>中國大陸</li>
<li class="img-jb">
<img src="./img/little/Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(6).png" alt="#">
</li>
<li class="register">親，請登入</li>
<li class="free-register">免費注冊</li>
<li class="shopping-Taobao">手機逛淘寶</li>
</ul>
</div>
<div class="head-right">
<ul>
<li>
<img src="./img/little/Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(6).png" alt="#">
</li>
<li class="website">網站導航</li>
<li class="transverse-line">
<img src="./img/little/transverse-line.png" alt="#">
</li>
<li>
<img src="./img/little/Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(6).png" alt="#">
</li>
<li class="service">聯系客服</li>
<li>
<img src="./img/little/Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(6).png" alt="#">
</li>
<li class="seller">千牛賣家中心</li>
<li class="string">|</li>
<li class="trade">商品分類</li>
<li>
<img src="./img/little/Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(6).png" alt="#">
</li>
<li class="favorite">收藏夾</li>
<li class="star">
<img src="./img/little/star.png" alt="#">
</li>
<li>
<img src="./img/little/Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(6).png" alt="#">
</li>
<li>購物車</li>
<li class="shop-car">
<img src="./img/little/shop-car.png" alt="#">
</li>
<li>
<img src="./img/little/Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(6).png" alt="#">
</li>
<li class="my-taobao">我的淘寶</li>
</ul>
</div>
</div>
<div class="head-img">
<img src="./img/top/TB13_PTwAT2gK0jSZFkXXcIQFXa-1190-70.png" alt="">
</div>
</div>
<div class="search">
<div class="taobao-img">
淘寶網
</div>
<div class="search-box">
<div class="nav-search">
<div class="nav">
<ul>
<li class="cowry">寶貝</li>
<li class="f">天貓</li>
<li class="f">店鋪</li>
</ul>
</div>
<div class="search-in">
<form action="">
<div class="search-left">
<img class="search-P" src="./img/little/search.png" alt="#">
<input class="text" type="text" value="質熏鞋 超火情侶鞋">
<img class="photo-P" src="./img/little/photo.png" alt="#">
<input class="submit" type="submit" value="搜尋">
</div>
<div class="search-right">
<span></span>
</div>
</form>
</div>
</div>
<div class="top-content">
<ul>
<li>新款連衣裙</li>
<li>四件套</li>
<li class="T-S">潮流T恤</li>
<li>時尚女鞋</li>
<li>短褲</li>
<li>半身裙 </li>
<li>男士外套</li>
<li>牆紙</li>
<li>行車記錄儀</li>
<li>新款男鞋</li>
<li>耳機</li>
<li>時尚女包</li>
<li>沙發</li>
</ul>
</div>
</div>
<div class="QR-code">
<img src="./img/QR code./下載下傳.png" alt="">
</div>
</div>
<div class="middle-nav">
<ul>
<h2 class="supermarket">主題市場</h2>
<li class="one">天貓</li>
<li class="one">聚劃算</li>
<li class="one">天貓超市</li>
<li>|</li>
<li class="two">淘搶購</li>
<li class="two">電器城</li>
<li class="two">司法拍賣</li>
<li class="two">淘寶心選</li>
<li class="two">興農脫貧</li>
<li>|</li>
<li class="three">飛豬旅行</li>
<li class="three">智能生活</li>
<li class="three">蘇甯易購</li>
</ul>
</div>
<div class="body-content">
<div class="content">
<div class="left">
<div class="content-text">
<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>
</ul>
</div>
<div class="img">
<div class="img-left">
<div class="img-left-top">
<img src=".\img\shuffling figure-top\TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="#">
</div>
<div class="img-left-middle">
<div class="tianmao">
<img src=".\img\Screenshot_2020-02-28 淘寶網 - 淘！我喜歡.png" alt="#">
</div>
<div class="img-text">理想生活上天貓</div>
<div class="Num">
<div class="number-1">3</div>
<div class="number-2">/6</div>
</div>
<span class="three"></span>
</div>
<div class="img-left-bottom">
<div>
<img class="bottom-left" src=".\img\shuffling figure-buttom\2\TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg" alt="#">
<img class="bottom-right" src=".\img\shuffling figure-buttom\2\TB13xKuLVXXXXcHapXXSutbFXXX.jpg" alt="#">
</div>
</div>
</div>
<div class="img-right">
<div class="img-right-top">
<img src=".\img\right\top\O1CN013IhWLq1PYiUnkY2lq_!!1541853-0-lubanu.jpg_290x290q90.jpg_.webp" alt="#">
</div>
<div class="hot">今日熱賣</div>
<div clss="img-right-bottom">
<img src=".\img\right\buttom\TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg" alt="#">
</div>
</div>
</div>
</div>
<div class="right">
<div class="login-area">
<div class="head">
<div class="head-top">
<img src=".\img\little\Screenshot_2020-03-29 淘寶網 - 淘！我喜歡.png" alt="#">
</div>
<div class="text-HI">Hi 你好</div>
<div class="discounts">
<ul>
<li>
<img src=".\img/little\Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(3).png" alt="#">
</li>
<li class="Tao-gold">
領淘金币抵錢
</li>
<li class="crown">
<img src=".\img\little\Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(4).png" alt="#">
</li>
<li class="member">
會員俱樂部
</li>
</ul>
</div>
</div>
<div class="login">
<div class="Log-In">
<p>
登入
</p>
</div>
<div>
<P>
注冊
</P>
</div>
<div>
<p>
開店
</p>
</div>
</div>
</div>
<div class="report">
<span class="report-area">網上有害資訊舉報專區</span>
<span>
<img src=".\img\little\Screenshot_2020-02-28 淘寶網 - 淘！我喜歡(5).png" alt="#">
</span>
</div>
<div class="text">
<ul class="Annou">
<li class="annou">公告</li>
<li>規則</li>
<li>論壇</li>
<li>安全</li>
<li>公益</li>
</ul>
<div class="NEWS">
<ul class="new">
<li class="impor">95公益周阿裡、騰訊等六家公司同台聯合做公益</li>
<li>淘寶造物節之城市秘密</li>
<li>聚劃算88紅包省錢卡</li>
</ul>
</div>
</div>
<div class="live-fast">
<ul>
<li>
<p class="charge"></p>
<span>
充話費
</span>
</li>
<li>
<p class="travel"></p>
<span>
旅行
</span>
</li>
<li>
<p class="car-insurance"></p>
<span>
車險
</span>
</li>
<li>
<p class="game"></p>
<span>
遊戲
</span>
</li>
<li>
<p class="lottery"></p>
<span>
彩票
</span>
</li>
<li>
<p class="film"></p>
<span>
電影
</span>
</li>
<li>
<p class="hotel"></p>
<span>
酒店
</span>
</li>
<li>
<p class="money-management"></p>
<span>
理财
</span>
</li>
</ul>
</div>
<div class="AL-app">
<div class="More-app">
<h2>阿裡APP</h2>
<span>更多 ></span>
</div>
<ul>
<li>
<img src=".\img\al-app\index.webp" alt="#">
</li>
<li>
<img src=".\img\al-app\index1.webp" alt="#">
</li>
<li>
<img src=".\img\al-app\index2.webp" alt="#">
</li>
<li>
<img src=".\img\al-app\index3.webp" alt="#">
</li>
<li>
<img src=".\img\al-app\index4.webp" alt="#">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
下面就是css樣式部分，也挺多的
*{
padding: 0px;
margin: 0px;
list-style: none;
font-family: arial;
color: #3c3c3c;
text-decoration: none;
font-style: normal;
font-size: 12px;
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
.wrapper>.head{
background-color: #f4f4f4;
}
.wrapper .head .head-text{
margin: 0 auto;
height: 35px;
width: 1190px;
}
/* 頭部導航欄左邊文字部分 */
.wrapper .head-right{
height: 35px;
cursor: pointer;
margin-top: 2px;
}
.wrapper .head-left ul{
text-align: center;
line-height: 35px;
margin-left: 7px;
cursor: pointer;
}
.wrapper .head-left ul li{
float: left;
text-align: center;
line-height: 35px;
}
.wrapper .head-left ul .img-jb{
margin-bottom: -14px;
}
.wrapper .head-left ul li img{
margin: 10px;
}
.wrapper .head-left .register{
color: #f40;
}
.wrapper .head-left .free-register{
color: #6c6c6c;
margin-left: 8px;
}
.wrapper .head-left .shopping-Taobao{
color: #6c6c6c;
margin-left: 20px;
}
/* 頭部導航欄右邊文字部分 */
.wrapper .head .head-right{
height: 35px;
}
.wrapper .head .head-right ul li{
float: right;
padding: 0 3px;
margin-left: 3px;
line-height: 35px;
text-align: center;
color: #6c6c6c;
}
.wrapper .head .head-right ul .string{
padding: 0 10px;
color:#ddd;
font-style: normal;
}
.wrapper .head .head-right ul .star{
margin-bottom: -5px;
margin-left: 2px;
line-height: 40px;
text-align: center;
}
.wrapper .head .head-right ul .transverse-line{
line-height: 34px;
}
.wrapper .head .head-right ul .shop-car{
margin-bottom: -5px;
}
.wrapper .head .head-img img{
cursor: pointer;
}
/* 頭部導航欄圖檔部分 */
.wrapper .head .head-img{
height: 70px;
background-color: #ffefc3;
}
.wrapper .head .head-img img{
display: block;
margin: 0 auto;
width: 1190px;
}
/* 搜尋框部分 */
.wrapper .search{
height: 121px;
width: 1190px;
margin: 0 auto;
}
.wrapper .search>div{
float:left;
}
.wrapper .search-box{
margin-top: 20px;
}
.wrapper .search .taobao-img{
float: left;
width: 142px;
height: 0px;
background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
padding-top: 58px;
margin-left: 22px;
overflow:hidden;
color: #f40;
margin-top: 30px;
}
/* 中間部分 */
.wrapper .search .search-box{
height: 87px;
width:627px;
margin-left: 107px;
}
.wrapper .search .search-box .nav-search{
margin-left: -13px;
}
.wrapper .search .search-box .nav{
width: 610px;
height: 22px;
margin: 5px 0px 2px 12px;
}
.wrapper .search .search-box .nav-search ul li{
float: left;
margin-left: 5px;
height:25px;
width: 36px;
line-height: 25px;
text-align: center;
color: #f40;
cursor: pointer;
}
.wrapper .search .search-box .nav-search .cowry{
width: 36px;
font-weight: 700;
color: #fff;
background-color: #f40;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.wrapper .search .search-box .nav-search .search-in{
height: 35px;
width: 551px;
border: 2px solid #f40;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-right: 0px;
}
.wrapper .search .search-box .nav-search .search-in .search-left{
float: left;
height: 35px;
width: 540px;
line-height: 35px;
text-align: center;
}
.wrapper .search .search-box .nav-search .search-in .search-left .search-P{
margin-bottom: -4px;
margin-left: -311px;
}
.wrapper .search .search-box .nav-search .search-in .search-left .text{
border: none;
margin-left: 3px;
color: rgb(187, 182, 182);
outline: none;
}
.wrapper .search .search-box .nav-search .search-in .search-left .photo-P{
float: right;
/* width: 24px;
height: 36px; */
padding-right: 10px;
margin-right: 0px;
margin-top: 5px;
}
.wrapper .search .search-box .nav-search .search-in .search-left .submit{
float: right;
margin-right: -119px;
margin-top: -2px;
outline: none;
width: 74px;
height: 39px;
background-color:#f40;
color: #fff;
font-size: 16px;
font-weight: 700;
border: none;
text-align: center;
border-top-right-radius: 25px;
border-bottom-right-radius:25px;
background-image: -webkit-linear-gradient(left,#ff9000 0,#ff5000 100%);
}
.wrapper .search .search-box .top-content{
width: 627px;
height: 25px;
margin-left: -17px;
}
.wrapper .search .search-box .top-content ul .T-S{
color: #f40;
}
.wrapper .search .search-box .top-content ul li{
float: left;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 12px;
margin-left: 4px;
margin-bottom: -2px;
}
.wrapper .search .search-box .top-content ul li:hover{
color: #f40;
cursor: pointer;
}
.wrapper .search{
/* float: right;
width: 76px;
height: 90px;
*/
}
.wrapper .search .QR-code img{
display: block;
width: 111px;
height: 102px;
margin-left: 976px;
margin-top: -88px;
}
.wrapper .middle-nav{
background-color: #f4f4f4;
}
.wrapper .middle-nav ul{
width: 1190px;
height: 30px;
margin: 0 auto;
background-image: -webkit-linear-gradient(left,#ff9000 0,#ff5000 100%);
}
.wrapper .middle-nav ul h2{
float: left;
height: 30px;
width: 190px;
text-align: center;
line-height: 30px;
color: #fff;
font-size: 16px;
font-weight: 700;
background-color: #f40;
}
.wrapper .middle-nav ul li{
float: left;
line-height: 30px;
text-align: center;
font-size: 16px;
margin: 0 5px;
font-weight: 700;
color: #fff;
}
.wrapper .middle-nav ul .one{
font-weight: 900;
margin: 0 12px;
}
.wrapper .middle-nav ul .two{
font-weight: 800;
font-size: 14px;
margin: 0 8px;
}
.wrapper .middle-nav ul .three{
font-weight: 600;
font-size: 14px;
margin: 0 8px;
}
.wrapper .body-content{
background-color: #f4f4f4;
}
.wrapper .content{
position: relative;
width: 1190px;
height: 522px;
margin: 0px auto;
}
.wrapper .content .left{
width: 900px;
height: 522px;
}
.wrapper .content .left .content-text{
float:left;
width: 188px;
height: 522px;
border: 1px solid #ff5000;
border-top: none;
background-color:#fff;
}
.wrapper .content .left .content-text ul{
margin-top: 4px;
}
.wrapper .content .left .content-text ul li{
position: relative;
width: 189px;
height: 32px;
padding-left:21px;
}
.wrapper .content .left .content-text ul a{
position: relative;
font-size: 14px;
font-weight: 400;
text-align: center;
cursor: pointer;
line-height: 32px;
margin-left: 3px;
color: #666;
}
.wrapper .content .left .content-text ul li span{
position: absolute;
width: 8px;
height: 10px;
right: 33px;
margin-top: 9px;
background-image: url("img/left/角标1.png");
background-size: 100%;
}
.wrapper .content .img .img-left{
float: left;
width: 520px;
height: 512px;
margin-left: 10px;
margin-top: 10px;
}
.wrapper .content .img .img-left-top{
float: left;
width: 520px;
height: 280px;
}
.wrapper .content .img .img-left-top img{
background-size: 100%;
}
.wrapper .content .img .img-left-middle{
width: 520px;
height: 18px;
/* border-bottom: 3px solid #ff1648; */
}
.wrapper .content .img .img-left-middle div{
float: left;
}
.wrapper .content .img .img-left-middle .tianmao{
width: 136px;
height: 19px;
}
.wrapper .content .img .img-left-middle .tianmao img{
background-size: 100%;
}
.wrapper .content .img .img-left-middle{
float: left;
width: 520px;
height: 18px;
padding-top: 11px;
background-color: #f4f4f4;
border-bottom: 3px solid #ff1648;
}
.wrapper .content .img .img-left-middle div{
float:left;
}
.wrapper .content .img .img-left-middle .img-text{
font-size: 12px;
color: #666;
line-height: 19px;
}
.wrapper .content .img .img-left-middle .Num{
float: right;
margin-left: 272px;
line-height: 19px;
}
.wrapper .content .img .img-left-middle .Num .number-1{
color: #ff1648;
}
.wrapper .content .img .img-left-middle .three{
float:left;
background-color: #000;
height: 3px;
width:82px;
margin-left: -46px;
}
.wrapper .content .img .img-left-bottom img{
width: 250px;
height: 155px;
background-size: 100%;
padding-left: 3px;
}
.wrapper .content .img .img-left-bottom{
float: left;
width: 520px;
height: 210px;
padding-top: 22px;
background-color: #fff;
padding-left: 4px;
}
.wrapper .content .img .img-left-bottom .right{
margin-left: 16px;
}
.wrapper .content .img .img-right{
height: 512px;
width: 160px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.wrapper .content .img .img-right .img-right-top{
height: 280px;
width: 160px;
background-size: 100%;
}
.wrapper .content .img .img-right .hot{
color: #a1a1a1;
margin-top: 13px;
}
.wrapper .content .img .img-right .img-right-bottom{
float: left;
width: 160px;
height: 200px;
background-size: 100%;
}
wrapper .content .left::after{
content: "";
clear: both;
display: block;
}
.wrapper .content .right{
float:right;
width: 290px;
height: 522px;
margin-top: -512px;
background-color: #fff;
}
.wrapper .content .right .login-area{
width: 290px;
height: 142px;
background-image: url("data:image/png;base64,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");
background-size: 290px 142px;;
}
.wrapper .content .right .login-area .head{
width: 290px;
height: 91px;
text-align: center;
}
.wrapper .content .right .login-area .head .head-top{
width: 74px;
height: 56px;
line-height: 56px;
}
.wrapper .content .right .login-area .head .head-top img{
width: 50px;
height: 50px;
margin-top: 6px;
margin-left: 119px;
}
.wrapper .content .right .login-area .head .text-HI{
margin-top: 2px;
font-weight: 400;
}
.wrapper .content .right .login-area .head .discounts{
width: 290px;
height: 17px;
}
.wrapper .content .right .login-area .head .discounts ul{
margin-left: 47px;
}
.wrapper .content .right .login-area .head .discounts ul li{
float: left;
height: 17px;
background-color: #ffe4db;
}
.wrapper .content .right .login-area .head .discounts ul .crown{
margin-left: 15px;
}
.wrapper .content .right .login-area .head .discounts ul .Tao-gold,
.wrapper .content .right .login-area .head .discounts ul .member{
padding-right: 8px;
line-height: 17px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
color: #ff5000;
}
.wrapper .content .right .login-area .login{
width: 290px;
height: 40px;
margin-left: 5px;
}
.wrapper .content .right .login-area .login div{
float: left;
width: 75px;
height: 25px;
background-image: -webkit-linear-gradient(left,#ff5000 0,#ff6f06 100%);
background-image: -o-linear-gradient(left,#ff5000 0,#ff6f06 100%);
background-image: linear-gradient(to right,#ff5000 0,#ff6f06 100%);
margin-left: 8px;
margin-top: 10px;
border-radius: 4px;
}
.wrapper .content .right .login-area .login div p{
height: 25px;
line-height: 25px;
text-align: center;
color: #FFF;
font-weight: 700;
font-size: 14px;
}
.wrapper .content .right .login-area .login .Log-In{
width: 92px;
}
.wrapper .content .right .report{
width: 290px;
height: 26px;
background-color: #ffe4dd;
margin-top: 2px;
}
.wrapper .content .right .report-area{
display: block;
height: 26px;
line-height: 26px;
margin-left: 80px;
color: #f40;
font-size: 12px;
}
.wrapper .content .right .report img{
display: block;
margin-left: 225px;
line-height: 26px;
margin-top: -25px;
}
.wrapper .content .right .text{
width: 290px;
height: 108px;
margin-bottom: -10px;
}
.wrapper .content .right .text .Annou{
position: relative;
width: 292px;
height: 24px;
margin-left: 23px;
margin-top: 12px;
}
.wrapper .content .right .text .Annou li{
float: left;
height: 24px;
line-height: 24px;
text-align: center;
margin-right: 30px;
}
.wrapper .content .right .text .Annou .annou{
font-weight: 700;
border-bottom: 2px solid #f40;
}
.wrapper .content .right .text .NEWS{
width: 290px;
height: 65px;
}
.wrapper .content .right .text .NEWS .new{
width: 266px;
height: 65px;
margin-top: 15px;
margin-left: 8px;
}
.wrapper .content .right .text .NEWS .new li{
float: left;
height: 25px;
width: 130px;
text-align: center;
white-space: nowrap;
}
.wrapper .content .right .text .NEWS .new .impor{
width: 260px;
color: #f40;
}
.wrapper .content .right .live-fast{
width: 290px;
height: 155px;
border-top:1px solid #f4f4f4;
margin-left: 2px;
}
.wrapper .content .right .live-fast li{
float: left;
width: 70px;
height: 73px;
border: 1px solid #f4f4f4;
border-top-color: transparent;
border-left-color: transparent;
}
.wrapper .content .right .live-fast li p{
display: block;
width: 24px;
height: 24px;
background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) 0 0 no-repeat;
margin-left: 22px;
margin-top: 10px;
}
.wrapper .content .right .live-fast li span{
display: block;
text-align: center;
margin-top: -4px;
line-height: 40px;
}
.wrapper .content .right .live-fast li .charge{
background-position: 0 0;
}
.wrapper .content .right .live-fast li .travel{
background-position:0 -87px;
}
.wrapper .content .right .live-fast li .car-insurance{
background-position: 0 -44px;
}
.wrapper .content .right .live-fast li .game{
background-position: 0 -133px;
}
.wrapper .content .right .live-fast li .lottery{
background-position: 0 -175px;
}
.wrapper .content .right .live-fast li .film{
background-position: 0 -221px;
}
.wrapper .content .right .live-fast li .hotel{
background-position: 0 -264px;
}
.wrapper .content .right .live-fast li .money-management{
background-position:0 -307px;
}
.wrapper .content .right .AL-app{
height: 76px;
width: 290px;
margin-top: -2px;
}
.wrapper .content .right .AL-app .More-app{
width: 290px;
height: 30px;
}
.wrapper .content .right .AL-app .More-app h2{
float:left;
font-size: 14px;
line-height: 30px;
font-weight: 900;
margin-left: 15px;
}
.wrapper .content .right .AL-app .More-app span{
float: right;
line-height :30px;
margin-right: 15px;
}
.wrapper .content .right .AL-app ul{
width: 290px;
height: 44px;
}
.wrapper .content .right .AL-app ul li{
float: left;
width: 32px;
height: 32px;
margin-left: 21px;
}
.wrapper .content .right .AL-app ul li img{
width: 32px;
height: 32px;
}
圖檔就不用看官們截了，我上傳。（别打我，。）
al-app裡的圖檔
left-cornerMark裡的圖檔
little裡的圖檔
QR code裡的圖檔
right下的buttom裡的圖檔
right下的top裡的圖檔
shuffling figure-buttom下的2裡的圖檔
shuffling figure-top裡的
top裡的圖檔
還有兩個直接放在img檔案下
img檔案示例