代碼千遍, 其義自見 (純手擼)~~來一波效果圖!!!都是HTML CSS 有一些css3新樣式, 非常基礎喔。
資源地址:https://github.com/feishanglantian/HEGUOBAO-Example.git
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PC端王者榮耀</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="allbox">
<!-- 頭部開始 -->
<div class="header">
<div class="logo"><img src="images/header-logo.png" title="騰訊遊戲"></div>
<div class="son">
<div class="tubiao"></div>
<div class="chengzhang">
<a href="#">成長守護平臺</a></div>
</div>
<div class="tengxun"><a href="#">騰訊遊戲排行榜</a></div>
<div id="v">v</div>
</div>
<!-- 頭部結束 -->
<!-- 背景圖片 -->
<div class="background-images">
</div>
<!-- 背景圖片 -->
<!-- 導航欄開始 -->
<div class="nav">
<div class="logo"><img src="images/logo.png" alt=""></div>
<div class="info">
<ul>
<li>
<a href="#">官網首頁</a>
<h5>HOME</h5>
</li>
<li>
<a href="#">遊戲資料</a>
<h5>DATA</h5>
</li>
<li>
<a href="#">內容中心</a>
<h5>CONTENTS</h5>
</li>
<li>
<a href="#">賽事中心</a>
<h5>MATCH</h5>
</li>
<li>
<a href="#">百態王者</a>
<h5>CULTURE</h5>
</li>
<li>
<a href="#">社區互動</a>
<h5>COMMUNITY</h5>
</li>
<li>
<a href="#">玩家支持</a>
<h5>PLAYER</h5>
</li>
</ul>
</div>
<div class="ren">
</div>
<div class="denglu">
<a href="#">歡迎登陸 <h5>登陸後查看遊戲戰績</h5></a>
</div>
</div>
<!-- 導航欄結束 -->
</div>
<!-- 皮膚設計 -->
<div class="skin">
<img src="images/皮膚設計大賽.png" alt="">
</div>
<!-- 皮膚設計 -->
<!-- 盒子1開始 -->
<div class="box">
<div class="one"><img src="images/1.jpeg" alt="">
<ul>
<li>
<a href="#">小喬青蛇皮膚上架</a>
</li>
<li>
<a href="#">賽事戰令李白星元</a>
</li>
<li>
<a href="#">小喬青蛇COS</a>
</li>
<li>
<a href="#">王者茶館</a>
</li>
<li>
<a href="#" id="hao">萬鏡覺醒的春晚</a>
</li>
</ul>
</div>
<div class="two">
<div class="top">
<ul class=" ">
<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 id="teshu"><a href="#">...</a></li>
</ul>
<ul class="jieshao">
<li>
<a href="#">
<h3>3月18全服不停機更新公告</h3>
</a>
</li>
<li>
<a href="#">【KPL今日預報】成都AG超玩會 vs 重慶QG,揭幕戰宿敵再遇誰能首勝?</a>
<span>03.16</span>
</li>
<li>
<a href="#">關於王者榮耀國際輪迴賽(KPLGT)積分年的計算規則</a>
<span>03.18</span>
</li>
<li>
<a href="#">王者榮耀國際巡迴賽(KPLGT)2020年春季賽開賽時間公告</a>
<span>03.18</span>
</li>
<li>
<a href="#">2020年KPL春季賽大名單公佈</a>
<span>03.17</span>
</li>
<li>
<a href="#">2020年KPL春季賽“雲開賽”在即 全新視覺與六大城市主場來襲!</a>
<span>03.17</span>
</li>
<li>
<a href="#">高校聯賽女神挑戰賽週末開賽啦!來看高顏值組合強強聯手</a>
<span>03.17</span>
</li>
<li>
<a href="#">你和那個TA會是峽谷校園最佳CP嗎?高校聯賽白色情人節開啓CP大作戰!</a>
<span>03.17</span>
</li>
</ul>
</div>
</div>
<div class="three">
<div class="css"></div>
</div>
</div>
<!-- 盒子1結束 -->
<!-- section開始 -->
<div class="section">
<div><img src="images/section1.jpg" alt=""></div>
<div><img src="images/section2.jpg" alt=""></div>
<div><img src="images/section3.jpg" alt=""></div>
<div><img src="images/section4.jpg" alt="" class="aa"></div>
</div>
<!-- section結束 -->
<!-- 導航欄1開始 -->
<div class="nav1">
<div class="icon">
<h3>內容中心</h3>
</div>
<div class="yingsong">
<h3>內容/英雄</h3>
</div>
<div class="icon2">
<h6>更多</h6>
<div class="icon2l">
<h6>更多</h6>
</div>
</div>
</div>
<!-- 導航欄1結束 -->
<!-- 頭部開始1 -->
<div class="header1">
<div id="header11">
<div class="header111">
<ul>
<li>
<a href="#">精品欄目</a>
<a href="#">賽事精品</a>
<a href="#">英雄攻略</a>
</li>
</ul>
</div>
<div class="header112">
<ol>
<li>
<a href="#">最新英雄</a>
<a href="#">最新皮膚</a>
<a href="#">周免英雄</a>
</li>
</ol>
</div>
</div>
</div>
<!-- 頭部結束1 -->
<!-- nav2開始 -->
<div class="nav2">
<li class="b"><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="#">棋高一招</a></li>
</div>
<!-- nav2結束 -->
<!-- pic開始 -->
<div class="pic">
<div>
<img src="images/one.jpg" alt="">
<div class="mask">
<div class="mask1"></div>
</div>
<p>職業教學第二季】第23期:Yang亞瑟無限遊走打法,帶爆節奏</p>
<h6>3.6萬 <span>2019-10-1</span></h6>
</div>
<div><img src="images/two.jpg" alt="">
<div class="mask">
<div class="mask1"></div>
</div>
<p>【QG榮耀學院】第63期 Mojo墨子 一炮一個小朋友</p>
<h6>3.6萬 <span>2019-10-1</span></h6>
</div>
<div><img src="images/three.jpg" alt="">
<div class="mask">
<div class="mask1 "></div>
</div>
<p>【QG榮耀學院】第62期 Hurt公孫離 最靈活的英雄</p>
<h6>3.6萬 <span>2019-10-1</span></h6>
</div>
<div class="four"><img src="images/four.jpg" alt="">
<div class="mask">
<div class="mask1 "></div>
</div>
<p>【QG榮耀學院】第61期 Song李信 真正的戰士</p>
<h6>3.6萬 <span>2019-10-1</span></h6>
</div>
<div><img src="images/five.jpg" alt="">
<div class="mask2">
<div class="mask2 "></div>
</div>
<p>【QG榮耀學院第60期】版本最強打野一姐教學視頻!</p>
<h6 id="cc">3.6萬 <span>2019-10-1</span></h6>
</div>
<div><img src="images/six.jpg" alt="">
<div class="mask2">
<div class="mask2 "></div>
</div>
<p>【QG榮耀學院】第60期 Hico娜可露露 阿里嘎多 瑪瑪哈哈</p>
<h6 id="cc">3.6萬 <span>2019-10-1</span></h6>
</div>
<div><img src="images/seven.jpg" alt="">
<div class="mask2">
<div class="mask2 "></div>
</div>
<p i>【QG榮耀學院】五十九期 Song典韋,身體裏沉睡的野獸覺醒了</p>
<h6 id="cc">3.6萬 <span>2019-10-1</span></h6>
</div>
<div class="eight"><img src="images/eight.jpg" alt="">
<div class="mask2">
<div class="mask2 "></div>
</div>
<p>【QG榮耀學院】五十八期 YANG太乙真人,重生丹的奧祕,盡在此爐</p>
<h6 id="cc">3.6萬 <span>2019-10-1</span></h6>
</div>
</div>
<!-- pic結束 -->
<!-- aside開始 -->
<div class="aside">
<div><img src="images/aside.png" alt=""></div>
<div class="js">
<h4>新英雄:蒙犽</h4>
<p>上線時間:2020.01.09</p>
</div>
<div class="aline">
<span>
<p class="yy">
魯 <br> 班 <br>大 <br> 師
</p>
<img src="images/魯班大師.png" title="魯班大師"></span>
<span><img src="images/西施.png" title="西施">
<p class="yy1">西 <br> 施 <br>
</p>
</span>
<span>
<p class="yy2">
馬<br>超
</p>
<img src="images/馬超.png" title="馬超"></span>
<span>
<p class="yy3">
耀
</p>
<img src="images/耀.png" title="耀" ></span>
</div>
</div>
<!-- aside結束 -->
<!-- nav3開始 -->
<div class="nav3">
<div class="left">
<h3>賽事中心</h3>
<div class="lef">
<h6>更多</h6>
</div>
</div>
<div class="right">
<div class="icon"></div>
<h3>KBL賽程</h3>
<div class="icon1">
<span>購票</span>
</div>
<div class="icon3">
<span>更多</span>
</div>
</div>
</div>
<!-- nav3結束 -->
<!-- nav4開始 -->
<div class="nav4">
<div class="left1">
<ul>
<li>
<a href="#">KPL</a>
</li>
<li>
<a href="#">冠軍盃</a>
</li>
<li>
<a href="#">LPLGT</a>
</li>
<li>
<a href="#">城市賽</a>
</li>
<li>
<a href="#">高校聯賽</a>
</li>
<li>
<a href="#">TGA</a>
</li>
<li>
<a href="#">微信遊戲邀請賽</a>
</li>
<li>
<a href="#">模擬戰冬賽</a>
</li>
</ul>
</div>
<div class="right1">
<ol>
<li><a href="#">時間</a></li>
<li><a href="#">戰隊</a></li>
<li>
<a href="#"></a>
</li>
<li><a href="#">戰隊</a></li>
</ol>
</div>
</div>
<!-- nav4結束 -->
<!-- nav4_pic開始 -->
<div class="nav4_pic">
<div class="img"><img src="images/KPL.jpg" alt=""></div>
<div class="asidel">
<ul>
<li>
<h2>【KPL今日預報】重慶QG vs 廣州TTG.XQ,新生代中路對決誰能掌控全場?</h2>
</li>
<li>
<a href="#">請各位召喚師們暢所欲言對於3月21日重慶QGhappy vs 廣州TTG.XQ比賽的賽果預測及看法,優質評論更將會有機會獲取Q幣獎勵 。</a>
</li>
<li>
<span id="span">KPL</span> <a href="#">春季賽快訊:TS讓二追三擊敗重慶QG,精彩戰術逆轉大局</a>
<span id="span1">03-20</span>
</li>
<li>
<span id="span">KPL</span><a href="#">春季賽快訊:DYG零封RNG.M拿下開賽首勝,久誠不負衆望火力壓制</a>
<span id="span1">03-20</span>
</li>
<li>
<span id="span"> KPL</span><a href="#">春季賽快訊:YTG力克RW俠獲首勝,巧妙運營成關鍵</a>
<span id="span1">03-20</span>
</li>
<li>
<span id="span">KPL</span> <a href="#">春季賽快訊:GK零封上海EDGM拿下開門紅,鵬鵬公孫離四連超凡></a>
<span id="span1">03-20</span>
</li>
<li>
<span id="span">KPL</span><a href="#">春季賽快訊:GK零封上海EDGM拿下開門紅,鵬鵬公孫離四連超凡</a>
<span id="span1">03-20</span></a>
</li>
<li>
<span id="span">KPL</span> <a href="#">春季賽快訊:LGD大鵝苦戰五局終獲勝,VG頑強對抗精神可嘉</a>
<span id="span1">03-20</span>
</li>
</ul>
</div>
</div>
<!-- nav4_pic結束 -->
<!-- nav4_right開始 -->
<div class="nav4_right">
<div class="on">
<h6>3-21 15:00</h6>
<span> <img src="images/大.png" alt="">
<em>LED大鵬</em>
</span>
<span class="vs">VS</span>
<span><img src="images/TES.png" alt="">
<i>TES</i>
</span>
</div>
<div class="tw">
<h6>3-21 18:00</h6>
<span> <img src="images/we.png" alt="">
<em>WE</em>
</span>
<span class="vs">VS</span>
<span><img src="images/ts.png" alt="">
<i>TS</i>
</span>
</div>
<div class="thr">
<h6>3-21 20:00</h6>
<span> <img src="images/happy.png" alt="">
<em>重慶QG</em>
</span>
<span class="vs">VS</span>
<span><img src="images/廣州.png" alt="">
<i>廣州XQ</i>
</span>
</div>
</div>
<!-- nav4_right結束 -->
<!-- 該我上場了 -->
<div class="pic_pic">
<img src="images/該我上場.jpg" alt="">
</div>
<!-- 該我上場了 -->
<!-- nav_pic3開始 -->
<div class="nav_pic3">
<div>
<img src="images/王者榮耀.jpg" alt="">
<p id="em"><em>GO</em></p>
<p>【棋高一招】第九期:冠軍RW女俠納蘭手手,教你新版本高爆發制霸棋盤!</p>
</div>
<div><img src="images/王者榮耀.jpg" alt="">
<p id="em"><em>GO</em></p>
<p>【棋高一招】第九期:冠軍RW女俠納蘭手手,教你新版本高爆發制霸棋盤!</p>
</div>
<div><img src="images/王者榮耀.jpg" alt="">
<p id="em"><em>GO</em></p>
<p>【棋高一招】第九期:冠軍RW女俠納蘭手手,教你新版本高爆發制霸棋盤!</p>
</div>
<div><img src="images/王者榮耀.jpg" alt="">
<p id="em"><em>GO</em></p>
<p>【棋高一招】第九期:冠軍RW女俠納蘭手手,教你新版本高爆發制霸棋盤!</p>
</div>
<div class="div"><img src="images/王者榮耀.jpg" alt="">
<p id="em"><em>GO</em></p>
<p>【棋高一招】第九期:冠軍RW女俠納蘭手手,教你新版本高爆發制霸棋盤!</p>
</div>
<div class="div"><img src="images/王者榮耀.jpg" alt="">
<p id="em"><em>GO</em></p>
<p>【棋高一招】第九期:冠軍RW女俠納蘭手手,教你新版本高爆發制霸棋盤!</p>
</div>
<div class="div"> <img src="images/王者榮耀.jpg" alt="">
<p id="em"><em>GO</em></p>
<p>【棋高一招】第九期:冠軍RW女俠納蘭手手,教你新版本高爆發制霸棋盤!</p>
</div>
<div class="div"><img src="images/王者榮耀.jpg" alt="">
<p id="em"><em>GO</em></p>
<p>【棋高一招】第九期:冠軍RW女俠納蘭手手,教你新版本高爆發制霸棋盤!</p>
</div>
</div>
<!-- nav_pic3結束 -->
<!-- footer開始 -->
<div class="footer">
<div class="logo">
</div>
<div class="lef_lig">
<div class="lef">
<em>抵制不良遊戲</em>
<em>拒絕盜版遊戲</em>
<em>注意自我保護</em>
<em>注意自我保護</em>
<em>適度遊戲益腦</em>
<em>沉迷遊戲傷身</em>
<em>合理安排時間</em>
<em>享受健康生活</em>
<p>《王者榮耀》全部背景故事發生於架空世界“王者大陸”中。相關人物、地理、事件均爲藝術創作,並非正史。若因觀看王者故事對相關歷史人物產生興趣,建議查閱正史記載。</p>
</div>
<div class="lig">
<em>騰訊互動娛樂</em>
<em>服務條款</em>
<em>隱私保護指引</em>
<em>兒童隱私保護指引</em>
<em>騰訊遊戲招聘</em>
<em>沉迷遊戲傷身</em>
<em>騰訊遊戲招聘</em>
<em><strong>【hgb】到此就結束了!總計代碼量1763行~~~~感謝看到這裏!!</strong></em>
</div>
</div>
</div>
<!-- footer結束 -->
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: rgb(119, 114, 114);
}
em,
i {
font-style: normal
}
.allbox {
position: relative;
}
/* 頭部開始 */
.header {
position: relative;
width: 1265px;
height: 41px;
background-color: rgba(219, 219, 210, 0.445);
margin: 0 auto;
}
.header .logo img {
float: left;
width: 150px;
height: 40px;
margin-left: 80px;
}
.header .son {
position: absolute;
top: 0px;
left: 870px;
width: 118px;
height: 40px;
}
.header .son .tubiao {
float: left;
height: 20px;
width: 20px;
background-color: green;
background: url(images/精靈圖1.png) no-repeat;
background-position: -139px -7px;
margin-top: 10px;
}
.header .son .chengzhang {
float: right;
height: 40px;
width: 84px;
line-height: 40px;
margin-right: 5px;
font-size: 14px;
}
.header .son .chengzhang a {
color: #000;
}
.header .tengxun a {
position: absolute;
top: 0;
left: 1000px;
height: 40px;
font-size: 14px;
color: #000;
line-height: 40px;
}
#v {
position: absolute;
top: 0;
left: 1110px;
height: 40px;
font-size: 14px;
color: gray;
line-height: 40px;
}
/* 頭部結束 */
/* 背景圖片 */
.background-images {
width: 1287px;
height: 1100px;
background: url(images/背景圖.jpg) no-repeat;
background-position: center top;
}
/* 導航欄開始 */
/* 盒子1 */
.nav {
position: absolute;
top: 42px;
width: 1287px;
height: 84px;
background-color: rgba(0, 0, 0, .5);
}
.nav .logo {
margin-top: 10px;
margin-left: 40px;
}
.nav .info ul {
position: absolute;
top: 0;
left: 270px;
}
.nav .info ul li {
float: left;
line-height: 84px;
margin: 0px 22px;
}
.nav .info ul li a {
font-size: 18px;
color: rgb(207, 197, 197);
}
.nav .info ul li h5 {
width: 0px;
height: 0px;
margin-top: -54px;
margin-left: 6px;
font-weight: normal;
font-size: 10px;
background-color: #fff;
color: rgb(207, 197, 197)
}
.nav .ren {
position: absolute;
top: 10px;
left: 1109px;
height: 60px;
width: 60px;
background: url(images/精靈圖1.png);
background-position: -180px 0;
}
.nav .denglu a {
position: absolute;
top: 18px;
left: 1176px;
color: #fff;
}
.nav .denglu a h5 {
color: rgb(207, 197, 197);
font-weight: normal;
}
/* 導航欄結束 */
/* 皮膚開始 */
.skin {
position: fixed;
top: 50%;
left: 85%;
width: 166px;
height: 290px;
z-index: 1;
}
/* 皮膚結束 */
/* 盒子樣式1開始 */
.box {
position: absolute;
top: 588px;
left: 63px;
width: 1198px;
height: 339px;
background-color: #2f313a;
}
.box .one {
float: left;
width: 600px;
height: 300px;
background-color: yellow;
}
.box .one img {
height: 100%;
width: 100%;
}
.box .one ul li {
float: left;
font-size: 14px;
margin-right: 27px;
}
#hao {
display: block;
width: 98px;
height: 30px;
background-color: gray;
}
.box .one ul li a {
height: 30px;
line-height: 30px;
color: #b1b2be;
}
.box .two {
float: left;
width: 340px;
height: 339px;
background-color: #29262d;
}
.box .two .top {
width: 340px;
height: 46px;
background-color: #29262e;
}
.box .two .top ul li {
float: left;
widows: 340px;
height: 46px;
text-align: center;
line-height: 46px;
}
.box .two .top ul li a {
float: left;
margin: 0px 14px;
color: gray;
font-size: 14px;
}
.box .two .top ul li a:hover {
color: yellow;
border-bottom: 2px solid yellow;
}
#teshu {
margin-right: 0px;
}
.box .two .top .jieshao li {
float: left;
margin-bottom: -10px;
color: gray;
font-size: 14px;
}
.box .two .top .jieshao li a {
float: left;
color: gray;
width: 275px;
height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align-last: left;
margin: 0 auto;
text-indent: 1em;
}
.box .two .top .jieshao li a h3 {
position: absolute;
top: 50px;
right: 276px;
height: 33px;
width: 260px;
color: rgb(129, 129, 46);
line-height: 33px;
padding-left: 20px;
}
.box .two .top .jieshao li a:hover {
text-decoration: underline;
color: gray;
border: 0px;
}
.box .three {
float: left;
width: 226px;
height: 339px;
background-color: #fff;
}
.box .three .css {
width: 258px;
height: 339px;
background: url(images/精靈圖1.png) no-repeat;
background-size: 391px;
background-position: 0 -212px;
}
/* 盒子樣式1結束 */
/* section開始*/
.section {
position: absolute;
top: 960px;
left: 63px;
width: 1215px;
height: 134px;
background-color: #fff;
}
.section img {
float: left;
transition: width .5s, height .5s;
margin-right: 12px;
}
.section img:hover {
width: 300px;
height: 140px;
}
.section .aa {
margin-right: 0px;
}
/* section結束 */
/* 導航欄1樣式開始 */
.nav1 {
position: absolute;
top: 1128px;
left: 63px;
width: 1215px;
height: 26px;
background-color: #fff;
}
.nav1 .icon {
float: left;
width: 140px;
height: 26px;
background: url(images/精靈圖1.png) no-repeat;
background-position: 0px -106px;
}
.nav1 .icon h3 {
margin-left: 26px;
}
.nav1 .icon2 {
position: relative;
float: left;
width: 410px;
height: 26px;
background: url(images/精靈圖1.png) no-repeat;
background-position: -253px 8px;
margin-left: 653px;
}
.nav1 .icon2 h6 {
margin-left: 20px;
margin-top: 6px;
}
.nav1 .yingsong {
position: absolute;
top: 0px;
left: 912px;
width: 140px;
height: 26px;
background: url(images/精靈圖1.png) no-repeat;
background-position: 0 -144px;
}
.nav1 .yingsong h3 {
margin-left: 24px;
}
.nav1 .icon2l {
position: absolute;
top: 0px;
left: 362px;
background: url(images/精靈圖1.png) no-repeat;
background-position: -253px 8px;
margin-left: 0px;
}
/* 導航欄1樣式結束 */
/* 頭部開始1 */
.header1 {
position: relative;
}
.header1 #header11 {
position: absolute;
top: 28px;
left: 63px;
width: 1198px;
height: 34px;
background-color: #f5f5f5;
}
.header1 #header11 .header111 {
float: left;
width: 867px;
height: 34px;
background-color: rgb(194, 185, 185);
}
.header1 #header11 .header111 a {
float: left;
width: 287px;
height: 32px;
color: #a08e8e;
border-right: 1px solid gray;
text-align: center;
line-height: 32px;
}
.header1 #header11 .header111 a:hover {
color: rgb(59, 51, 51);
border-bottom: 6px solid yellow;
}
.header1 #header11 .header111 a:last-child {
border-right: 0px;
}
.header1 #header11 .header112 {
float: left;
width: 291px;
height: 34px;
background-color: rgb(194, 185, 185);
margin-left: 40px;
}
.header1 #header11 .header112 a {
float: right;
width: 97px;
height: 32px;
text-align: center;
color: #a08e8e;
line-height: 32px;
}
.header1 #header11 .header112 a:hover {
color: rgb(59, 51, 51);
border-bottom: 6px solid yellow;
}
/* 頭部結束1 */
/* nav2開始 */
.nav2 {
position: absolute;
top: 1218px;
left: 62px;
width: 876px;
height: 26px;
}
/* .nav2 .b a {
float: left;
width: 59px;
height: 26px;
line-height: 26px;
text-align: center;
border: 1px solid gray;
border-radius: 8px;
background-color: #c3b9b9;
color: #fff;
font-size: 14px;
} */
.nav2 a {
float: left;
margin: 2px 10px;
padding: 0 13px 0 8px;
border: 1px solid gray;
border-radius: 8px;
background-color: #c3b9b9;
color: #fff;
font-size: 14px;
}
.nav2 li:last-child {
padding: 0px 0px 0px 8px;
}
/* nav2結束 */
/* pic開始 */
.pic {
position: absolute;
top: 1259px;
left: 62px;
width: 872px;
height: 410px;
}
.pic div {
float: left;
margin-right: 8px;
margin-bottom: 30px;
width: 212px;
height: 175px;
background-color: #fff;
}
.pic div p {
width: 212px;
height: 48px;
overflow: hidden;
font-size: 14px;
}
.pic div h6 {
position: absolute;
top: 111px;
background: url(images/精靈圖1.png);
background-position: -256px -62px;
background-color: rgba(0, 0, 0, .6);
padding-left: 13px;
margin-bottom: -100px;
height: 14px;
width: 209px;
color: #fff;
}
.pic div h6 span {
float: right;
margin-right: 8px;
}
.pic div #cc {
position: absolute;
top: 316px;
background: url(images/精靈圖1.png);
background-position: -256px -62px;
background-color: rgba(0, 0, 0, .6);
padding-left: 13px;
margin-bottom: -100px;
height: 14px;
width: 209px;
color: #fff;
}
.pic div #cc span {
float: right;
margin-right: 8px;
}
.pic .mask {
display: none;
position: absolute;
top: 130px;
width: 209px;
height: 127px;
margin-top: -130px;
background-color: rgba(0, 0, 0, .6);
}
.pic .mask .mask1 {
width: 49px;
height: 60px;
margin-left: 81px;
margin-top: 35px;
background: url(images/精靈圖1.png) no-repeat;
background-position: -186px -56px;
}
.pic .mask2 {
display: none;
position: absolute;
top: 335px;
width: 209px;
height: 127px;
margin-top: -130px;
background-color: rgba(0, 0, 0, .6);
}
.pic .mask2 .mask2 {
width: 49px;
height: 60px;
margin-left: 81px;
margin-top: -300px;
background: url(images/精靈圖1.png) no-repeat;
background-position: -186px -56px;
}
.pic img {
width: 209px;
height: 127px;
}
.pic :hover .mask {
display: block;
}
.pic :hover .mask2 {
display: block;
}
.pic div:nth-child(4n) {
margin-right: 0px;
}
/* pic結束 */
/* aside開始 */
.aside {
position: absolute;
top: 1227px;
left: 971px;
width: 292px;
height: 223px;
background-color: pink;
}
.aside img {
width: 292px;
height: 156px;
}
.aside .js {
text-indent: 2em;
margin: 4px 0px;
}
.aside .js p {
font-size: 10px;
margin-top: 6px;
color: gray;
}
.aside .aline {
position: relative;
width: 292px;
height: 170px;
}
.aside .aline .yy {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 70px;
height: 170px;
background-color: rgba(0, 0, 0, .7);
color: rgb(155, 155, 49);
text-align: center;
padding: 40px 0px;
}
.aside .aline .yy1 {
display: none;
position: absolute;
top: 0px;
left: 73px;
width: 70px;
height: 170px;
background-color: rgba(0, 0, 0, .7);
color: rgb(155, 155, 49);
text-align: center;
padding: 57px 0px;
}
.aside .aline .yy2 {
display: none;
position: absolute;
top: 0px;
left: 147px;
width: 70px;
height: 170px;
background-color: rgba(0, 0, 0, .7);
color: rgb(155, 155, 49);
text-align: center;
padding: 57px 0px;
}
.aside .aline .yy3 {
display: none;
position: absolute;
top: 0px;
left: 219px;
width: 70px;
height: 170px;
background-color: rgba(0, 0, 0, .7);
color: rgb(155, 155, 49);
text-align: center;
padding: 57px 0px;
}
.aside .aline :hover .yy {
display: block;
}
.aside .aline :hover .yy1 {
display: block;
}
.aside .aline :hover .yy2 {
display: block;
}
.aside .aline :hover .yy3 {
display: block;
}
.aside .aline img {
float: left;
width: 70px;
height: 170px;
margin-right: 3px;
}
/* aside結束 */
/* nav3開始 */
.nav3 {
position: absolute;
top: 1691px;
left: 57px;
width: 1200px;
height: 26px;
background-color: #fff;
}
.nav3 .left {
float: left;
width: 872px;
height: 26px;
background-color: pink;
background: url(images/精靈圖1.png) no-repeat;
background-position: 0px -183px;
}
.nav3 .left h3 {
float: left;
text-indent: 2em;
}
.nav3 .left .lef {
width: 80px;
height: 20px;
float: right;
background: url(images/精靈圖1.png) no-repeat;
background-position: -238px 5px;
}
.nav3 .left .lef h6 {
padding: 2px 0px;
padding-left: 39px;
text-align: center;
font-size: 14px;
}
.nav3 .right {
position: relative;
float: right;
width: 288px;
height: 26px;
}
.nav3 .right .icon {
float: left;
height: 30px;
width: 26px;
background: url(images/精靈圖1.png) no-repeat;
background-position: -157px -106px;
}
.nav3 .right h3 {
position: absolute;
top: 0px;
left: 24px;
font-weight: 900;
}
.nav3 .right .icon1 {
float: left;
width: 66px;
height: 30px;
margin-left: 100px;
border: 1px solid yellow;
background: url(images/精靈圖1.png) no-repeat;
background-position: -250px -82px;
}
.nav3 .right .icon1 span {
padding-left: 24px;
height: 26px;
line-height: 26px;
}
.nav3 .right .icon3 {
float: right;
height: 26px;
width: 60px;
background: url(images/精靈圖1.png) no-repeat;
background-position: -243px 7px;
}
.nav3 .right .icon3 span {
height: 26px;
line-height: 26px;
padding-left: 28px;
font-size: 14px;
}
/* nav3結束 */
/* nav4開始 */
.nav4 {
position: absolute;
top: 1738px;
left: 57px;
width: 1200px;
height: 36px;
}
.nav4 .left1 {
float: left;
width: 872px;
height: 36px;
background-color: #f5f5f5;
}
.nav4 .left1 ul li {
display: block;
float: left;
padding: 6px 24px;
border-right: 1px solid gray;
}
.nav4 .left1 ul li a {
font-size: 14px;
color: gray;
}
.nav4 .left1 ul li:hover {
color: black;
border-bottom: 3px solid yellow;
}
.nav4 .left1 ul li:last-child {
border-right: 0px;
}
.nav4 .right1 {
float: right;
width: 288px;
height: 36px;
background-color: #f5f5f5;
}
.nav4 .right1 ol li {
float: left;
padding: 7px 24px;
font-size: 14px;
color: gray;
}
/* nav4結束 */
/* nav4_pic開始 */
.nav4_pic {
position: absolute;
top: 1797px;
left: 58px;
width: 872px;
height: 260px;
}
.nav4_pic .img {
float: left;
width: 211px;
height: 260px;
}
.nav4_pic .asidel {
float: right;
width: 630px;
height: 258px;
}
.nav4_pic .asidel ul :first-child {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 577px;
height: 32px;
font-weight: 900;
margin: 0px 0px;
}
.nav4_pic .asidel ul li:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 450px;
height: 23px;
margin: 0px 0px;
font-size: 14px;
}
.nav4_pic .asidel ul li {
margin: 10px 0px;
padding: -19px 0px;
}
.nav4_pic .asidel a {
font-size: 14px;
color: gray;
}
.nav4_pic .asidel a:hover {
text-decoration: underline;
}
.nav4_pic .asidel #span {
display: inline-block;
width: 52px;
height: 23px;
margin: -6px 10px;
font-size: 14px;
border: 1px solid gray;
border-radius: 8px;
text-align: center;
line-height: 23px;
color: rgb(175, 167, 167);
}
.nav4_pic .asidel #span1 {
float: right;
color: rgb(175, 167, 167);
font-size: 11px;
}
/* nav4_pic結束 */
/* nav4_right開始 */
.nav4_right {
position: absolute;
top: 1775px;
left: 968px;
width: 288px;
height: 204px;
}
.nav4_right .on {
width: 289px;
height: 67px;
line-height: 67px;
padding: 0px 20px;
border-bottom: 1px solid gray;
}
.nav4_right .on h6 {
float: left;
}
.nav4_right .on span {
margin-left: 35px;
}
.nav4_right .on span {
position: relative;
}
.nav4_right .on span em {
position: absolute;
top: -4px;
left: -13px;
width: 70px;
font-size: 10px;
}
.nav4_right .on .vs {
color: rgb(240, 240, 17);
}
.nav4_right .on span i {
position: absolute;
top: -4px;
left: 0px;
font-size: 10px;
}
.nav4_right .on span img {
width: 25px;
height: 25px;
}
.nav4_right .tw {
width: 289px;
height: 67px;
line-height: 67px;
padding: 0px 20px;
border-bottom: 1px solid gray;
}
.nav4_right .tw h6 {
float: left;
}
.nav4_right .tw span {
margin-left: 35px;
}
.nav4_right .tw span {
position: relative;
}
.nav4_right .tw span em {
position: absolute;
top: -4px;
left: 3px;
width: 70px;
font-size: 10px;
}
.nav4_right .tw .vs {
color: rgb(240, 240, 17);
}
.nav4_right .tw span i {
position: absolute;
top: -4px;
left: 5px;
font-size: 10px;
}
.nav4_right .tw span img {
width: 25px;
height: 25px;
}
.nav4_right .thr {
width: 289px;
height: 67px;
line-height: 67px;
padding: 0px 20px;
border-bottom: 1px solid gray;
}
.nav4_right .thr h6 {
float: left;
}
.nav4_right .thr span {
margin-left: 35px;
}
.nav4_right .thr span {
position: relative;
}
.nav4_right .thr span em {
position: absolute;
top: -4px;
left: -7px;
width: 70px;
font-size: 10px;
}
.nav4_right .thr .vs {
color: rgb(240, 240, 17);
}
.nav4_right .thr span i {
position: absolute;
top: -4px;
left: -16px;
font-size: 10px;
}
.nav4_right .thr span img {
width: 25px;
height: 25px;
}
/* nav4_right結束 */
/* 該我上場了 */
.pic_pic {
position: absolute;
top: 1999px;
left: 969px;
}
.pic_pic img {
width: 288px;
height: 159px;
}
/* 該我上場了 */
/* .nav_pic3開始 */
.nav_pic3 {
position: absolute;
top: 2076px;
left: 57px;
width: 872px;
height: 410px;
}
.nav_pic3>div {
float: left;
width: 214px;
height: 201px;
margin: 2px 2px;
}
.nav_pic3>div img {
width: 214px;
height: 127px;
}
.nav_pic3>div p {
width: 214px;
height: 49px;
font-size: 14px;
padding: 9px 0px;
overflow: hidden;
}
.nav_pic3 div #em {
display: none;
position: absolute;
top: 0px;
width: 214px;
height: 127px;
background-color: rgba(0, 0, 0, .6);
}
.nav_pic3 div #em em {
width: 214px;
height: 127px;
line-height: 127px;
color: rgb(159, 206, 105);
padding: 0px 96px;
}
.nav_pic3 div:hover #em {
display: block;
}
.nav_pic3 .div #em {
display: none;
position: absolute;
top: 207px;
width: 214px;
height: 127px;
background-color: rgba(0, 0, 0, .6)
}
/* .nav_pic3結束 */
/* footer開始 */
.footer {
position: absolute;
top: 2620px;
left: 47px;
width: 1200px;
height: 78px;
}
.footer .logo {
width: 1200px;
height: 78px;
background: url(images/精靈圖3.png) no-repeat;
background-position: 0px 14px;
}
.lef_lig {
width: 1200px;
height: 300px;
margin-top: 10px;
border-top: 3px solid gray;
}
.lef_lig .lef {
float: left;
width: 460px;
height: 200px;
}
.lef_lig .lef em {
font-size: 12px;
color: #666;
padding: 3px 0px;
}
.lef_lig .lef p {
margin-top: 7px;
font-size: 12px;
color: #666;
}
.lef_lig .lig {
float: right;
width: 600px;
height: 200px;
}
.lef_lig .lig em {
font-size: 12px;
color: #666;
padding: 3px 0px;
}
/* footer結束 */
今天就到這裏了!持續更新中~~~~