酷狗官网
<!doctype html>
<html><head><meta charset="UTF-8"><title>酷狗音樂</title>
</head>
<link rel="stylesheet" type="text/css" href="CSS/reset.css" />
<link rel="stylesheet" type="text/css" href="CSS/kugou.css" />
<!--1.href.src.url的提示，需要安裝什么插件？？？？-->
<!--2.怎樣才能看出來link標(biāo)簽起作用了即添加成功了？-->
<body><div class="mainPage"><!--header部分開始--><div class="header"><h1 class="logo"><a href="http://www.kugou.com/"></a></h1><div class="search_wrapper top_search"><div class="search_input"><input type="text"><div class="searh_btn"><i class="search_icon"></i></div></div></div><div class="topNav fr"><ul><li><a target="_blank" href="http://www.kugou.com/shop/help/serviceCenter">客服中心</a></li><li><a target="_blank" href="http://www.kugou.com/job/hr/html/index.html">招賢納士</a></li><li><a target="_blank" href="http://vip.kugou.com/">會(huì)員中心 </a></li></ul><div class="login_area"><div class="clearfix"><a class="login_btn" >登錄</a><a class="regin_btn" >注冊</a></div></div></div></div><!--nav部分開始--><div class="nav"><div class="navMin"><ul class="menuBox"><li><a style="background-color:#0c8ed9;">首頁</a></li><li><a>榜單</a></li><li><a>下載客戶端</a></li><li class="b"><a class="more">更多</a><ul class="b" style="z-index: 999;"><li><a>電臺(tái)</a></li><li><a>MV</a></li><li><a>歌單</a></li><li><a>歌手</a></li></ul></li></ul><div class="subNav"><a class="subNav-Btn1" href="#">音樂直播</a><a class="subNav-Btn2" href="#">酷狗LIVE</a><a class="subNav-Btn3" href="#">音樂人</a><a class="subNav-Btn4" href="#">游戲</a><a class="subNav-Btn5" href="#">商城</a></div></div></div><!--banner部分開始--><div class="banner" style="width:1349px;"> <!--為什么style="width:1349px;這樣寫可以而在CSS中設(shè)寬度為1349px就不行？？？？--><div class="bannerMin" style="width:1349px;"></div><a class="prev-icon"></a><a class="next-icon"></a><div class="PagesMin"><div><a></a><a></a><a></a><a></a><a style="background-position: 0 -37px;"></a><a></a></div></div></div><!--style="width:1349px;為瀏覽器的寬度，--><!--nav2部分開始--><div class="banner-cover"></div><div class="nav2"><ul class="nav2-box"><li class="nav2-btn1"><a href="#">下載PC版</a></li><li class="nav2-btn2"><a href="#">下載Iphone版</a></li><li class="nav2-btn3"><a class="noborder" href="#">下載Android版</a></li></ul></div><!--mainMin部分開始--><div class="main"><div class="mainMin clearfix"><div class="mainLeft"><!--精選歌單--><!--itemTitle部分--><div class="itemTitle clearfix"><h3><b>精選</b>歌單</h3><a class="more">更多</a></div><!--productMin部分--><div class="productMin clearfix"><div class="productBig productLeft"><p class="topTxt"><span class="topTxt-icon"></span><span class="num">2279.2萬</span></p><img src="img/product-img1.jpg" /><div class="cover"><div class="playBtn"></div></div><div class="bottomTxt"><p>回憶是種揪心的痛</p><p>WITHOUTME</p></div></div><div class="productMid productLeft"><p class="topTxt"><span class="topTxt-icon"></span><span class="num">2279.2萬</span></p><img src="img/product-img2.jpg" /><div class="cover"><div class="playBtn"></div></div><div class="bottomTxt"><p>一定聽過的經(jīng)典網(wǎng)絡(luò)紅歌</p><p>精靈龍</p></div></div><div class="productMid productLeft"><p class="topTxt"><span class="topTxt-icon"></span><span class="num">2279.2萬</span></p><img src="img/product-img3.jpg" /><div class="cover"><div class="playBtn"></div></div><div class="bottomTxt"><p>一人一首古風(fēng)曲</p><p>蝶舞清風(fēng)</p></div></div><div class="productMid productLeft"><p class="topTxt"><span class="topTxt-icon"></span><span class="num">2279.2萬</span></p><img src="img/product-img4.jpg" /><div class="cover"><div class="playBtn"></div></div><div class="bottomTxt"><p>《超強(qiáng)音浪》合輯</p><p>蒽蒽</p></div></div><div class="productMid productLeft"><p class="topTxt"><span class="topTxt-icon"></span><span class="num">2279.2萬</span></p><img src="img/product-img5.jpg" /><div class="cover"><div class="playBtn"></div></div><div class="bottomTxt"><p>譜寫一個(gè)人的單戀曲</p><p>魚哭了</p></div></div></div></div><div class="mainRight clearfix"><div class="itemTitle"><h3><b>熱門</b>榜單</h3><a class="more">更多</a></div><ul class="mainRightMin clearfix"><li class="mainRightList"><div class="pic"><img style="width:98px; height:98px;" src="img/mainRight-pic1.jpg" /></div><div class="cover"><div class="playBtn"></div></div><div class="mainRight-content"><dl style="display:inline-block"><dt>酷音樂流行風(fēng)向標(biāo)</dt><dd>1 . 郁可唯 - 思</dd><dd>2 . 香香 - 就算沒有</dd></dl></div></li><li class="mainRightList"><div class="pic"><img style="width:98px; height:98px;" src="img/mainRight-pic2.jpg" /></div><div class="cover"><div class="playBtn"></div></div><div class="mainRight-content"><dl style="display:inline-block"><dt>酷音樂流行風(fēng)向標(biāo)</dt><dd>1 . 郁可唯 - 思</dd><dd>2 . 香香 - 就算沒有</dd></dl></div></li><li class="mainRightList"><div class="pic"><img style="width:98px; height:98px;" src="img/mainRight-pic3.jpg" /></div><div class="cover"><div class="playBtn"></div></div><div class="mainRight-content"><dl style="display:inline-block"><dt>酷音樂流行風(fēng)向標(biāo)</dt><dd>1 . 郁可唯 - 思</dd><dd>2 . 香香 - 就算沒有</dd></dl></div></li></ul></div></div></div><!--main2部分開始--><div class="main2" "><div class="main2Min "><img style="height:80px; width:1000px " src="img/main2-pic.jpg "/></div>
</div>
<!--main3部分開始-->
<div class="main3 "><div class="main3Min "><div class="main3-left "><div class="itemTitle main3Bottom clearfix "><h3><b>新歌</b>首發(fā)</h3><div class="itemTitle-menu "><span class="menuItem " style="color:#009af3;">華語</span><span class="menuItem ">歐美</span><span class="menuItem ">韓國</span><span class="menuItem ">日本</span></div><bottom class="playAll "><span class="icon-play "></span><em>全部播放</em></bottom><div class="clear "></div></div><ul><li><a class="main3-left-l ">徐良 - 簡單的溫?zé)帷静灰粯拥拿滥凶?插曲】</a><span class="icon-play "></span><span class="icon-download "></span><span class="icon-share " style="display:none "></span><a class="main3-left-R " style="margin-right:10px; ">03:52</a></li><li><a class="main3-left-l ">金志文 - 迷途之光</a><span class="icon-play "></span><span class="icon-download "></span><span class="icon-share "></span><a class="main3-left-R " style="margin-right:10px; ">04:54</a></li><li><a class="main3-left-l ">許嵩、洛天依 - 深夜書店</a><span class="icon-play "></span><span class="icon-download "></span><span class="icon-share " style="display:none "></span><a class="main3-left-R " style="margin-right:10px; ">03:24</a></li><li><a class="main3-left-l ">張信哲 - 好好愛個(gè)女孩</a><span class="icon-play "></span><span class="icon-download "></span><span class="icon-share " style="display:none "></span><a class="main3-left-R " style="margin-right:10px; ">02:58</a></li><li><a class="main3-left-l ">張碧晨 - 紅玫瑰</a><span class="icon-play "></span><span class="icon-download "></span><span class="icon-share "></span><a class="main3-left-R " style="margin-right:10px; ">04:34</a></li><li><a class="main3-left-l ">許佳慧 - 從未開口的秘密</a><span class="icon-play "></span><span class="icon-download "></span><span class="icon-share "></span><a class="main3-left-R " style="margin-right:10px; ">03:49</a></li><li><a class="main3-left-l ">陳曉 - 悲前喜劇【云巔之上插曲】</a><span class="icon-play "></span><span class="icon-download "></span><span class="icon-share "></span><a class="main3-left-R " style="margin-right:10px; ">05:13</a></li><li><a class="main3-left-l ">劉珂矣 - 墨痕</a><span class="icon-play "></span><span class="icon-download "></span><span class="icon-share "></span><a class="main3-left-R " style="margin-right:10px; ">02:39</a></li></ul><div class="pages"><a class="prev"></a><div class="page"><span class="fastPage">1</span>/<span class="lastPage">3</span></div><a class="next next2"></a><!--注意這里css樣式的用法.......................................--></div></div><div class="main3-right clearfix "><div class="itemTitle clearfix "><h3><b>推薦</b></span></h3><a class="more ">更多</a><div class="clear "></div></div><div class="main3-rightMin "><a class="box1 "><img style="width:320px; height:175px; " src="img/main3Right-pic1.jpg "/><div class="Cover"><div class="playBtn"></div></div><div class="bottomTxt"><p class="bottomTxt1">音浪(影視版)</p><p class="bottomTxt2">黃立行</p></div></a><a class="box2 "><img style="width:154px; height:125px; " src="img/main3Right-pic2.jpg "/><div class="Cover"><div class="playBtn"></div></div><div class="bottomTxt"><p class="bottomTxt1">我管你(真我版)</p><p class="bottomTxt2">華晨宇</p></div></a><a class="box2 " style="margin-right:0;"><img style="width:154px; height:125px; " src="img/main3Right-pic3.jpg "/><div class="Cover"><div class="playBtn"></div></div><div class="bottomTxt"><p class="bottomTxt1">C3PO</p><p class="bottomTxt2">李克勤</p></div></a></div></div><div class="clear "></div></div>
</div>
<!--main4部分開始-->
<div class="main4 "><div class="main4Min "><img style="height:80px; width:1000px " src="img/main4-pic.jpg "/></div>
</div>
<!--main5部分開始-->
<div class="main5 "><div class="main5Min clearfix"><div class="main5-left "><div class="itemTitle clearfix "><h3><b>熱門</b>電臺(tái)</h3><a class="more ">更多</a></div><ul class="clearfix"><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_1.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">KTV必點(diǎn)曲</div></a></li><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_2.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">中文DJ</div></a></li><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_3.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">酷狗熱歌</div></a></li><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_4.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">網(wǎng)絡(luò)紅歌</div></a></li><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_5.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">經(jīng)典</div></a></li><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_6.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">老情歌</div></a></li><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_7.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">新歌</div></a></li><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_8.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">動(dòng)漫</div></a></li><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_9.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">輕音樂</div></a></li><li><a><div class="radioLogo"><img width="100" height="100" src="img/radio_10.jpg "></div><div class="Cover"><div class="playBtn"></div></div><div class="radioItem">最愛成名曲</div></a></li></ul></div><div class="main5-right "><div class="itemTitle clearfix "><h3><b>熱門</b>歌手</h3><div class="tabT" id="tabMenu"><span class="active" style="color:#009af3;">華語</span><span data="1">歐美</span><span data="2">日韓</span><span style="margin-right:0;"><a class="more">更多</a></span></div></div><div class="itemContent"><div><ul class="firstUl clearFix" ><li class="item"><ul class="chinaSinger secondUl clearFix" ><li class="clearfix"><div class="cpt cptMid"><a><img class="singerImg" src="img/main5Right-pic1.jpg" ><div class="Cover"></div><p class="cptBg"></p><div class="cptB"><p class="songListSinger">薛之謙</p></div></a></div><div class="cpt cptMid"><a><img class="singerImg" src="img/main5Right-pic2.jpg" ><div class="Cover"></div><p class="cptBg"></p><div class="cptB"><p class="songListSinger">莊心妍</p></div></a></div><div class="cpt cptSmall"><a><img class="singerImg" src="img/main5Right-pic3.jpg" ><div class="Cover"></div><p class="cptBg"></p><div class="cptB"><p class="songListSinger">周杰倫</p></div></a></div><div class="cpt cptSmall"><a><img class="singerImg" src="img/main5Right-pic4.jpg" ><div class="Cover"></div><p class="cptBg"></p><div class="cptB"><p class="songListSinger">冷漠</p></div></a></div><div class="cpt cptSmall"><a><img class="singerImg" src="img/main5Right-pic5.jpg" ><div class="Cover"></div><p class="cptBg"></p><div class="cptB"><p class="songListSinger">陳奕迅</p></div></a></div></li></ul><div class="tab"><a ></a><a class="date2"></a><a ></a></div></li></ul></div></div></div></div>
</div>
<!--main6部分開始-->
<div class="main6 ""><div class="main6Min"><img style="height:80px; width:1000px" src="img/main6-pic.jpg" /></div></div><!--main7部分開始--><div class="main7"><div class="main7Min clearfix"><div class="itemTitle clearfix"><h3><b>合作</b>伙伴</h3></div><div class="main7-picMin"><a class="main7-pic1"></a><a class="main7-pic2"></a><a class="main7-pic3"></a><a class="main7-pic4"></a><a class="main7-pic5"></a><a class="main7-pic6"></a><a class="main7-pic7"></a><a class="main7-pic8"></a><a class="main7-pic9"></a><a class="main7-pic10"></a><a class="main7-pic11"></a><a class="main7-pic12"></a><a class="main7-pic13"></a><a class="main7-pic14"></a><a class="main7-pic15"></a><a class="main7-pic16"></a><a class="main7-pic17"></a><a class="main7-pic18"></a><a class="main7-pic19"></a><a class="main7-pic20"></a><a class="main7-pic21"></a></div></div></div><!--main8部分開始--><div class="main8"><div class="main8Min"><div class="itemTitle clearfix"><h3><b>友情</b>鏈接</h3><a class="more">更多</a></div><div><a class="main8Txt">愛美網(wǎng)</a><a class="main8Txt">央視網(wǎng)綜藝頻道</a><a class="main8Txt">華數(shù)唱片</a><a class="main8Txt">汽車論壇</a><a class="main8Txt">IT之家</a><a class="main8Txt">iPhone游戲</a><a class="main8Txt">旅游攻略</a><a class="main8Txt">悅聲無限</a><a class="main8Txt">華為商城</a><a class="main8Txt">365音樂網(wǎng)</a><a class="main8Txt">軟件下載</a><a class="main8Txt">漫漫看漫畫</a><a class="main8Txt">手機(jī)游戲</a></div></div></div><!--footer部分開始--><div class="footer"><div class="footerTxt"><a>關(guān)于酷狗</a><a>廣告服務(wù)</a><a>版權(quán)指引</a><a>隱私政策</a><a>用戶服務(wù)協(xié)議</a><a>推廣合作</a><a>酷狗音樂人</a><a>酷狗音樂推</a><a>招聘信息</a><a>客服中心</a><a class="noborder">用戶體驗(yàn)提升計(jì)劃</a></div><div class="footerMin"><p>我們致力于推動(dòng)網(wǎng)絡(luò)正版音樂發(fā)展，相關(guān)版權(quán)合作請聯(lián)系copyrights@kugou.com</p><p>信息網(wǎng)絡(luò)傳播視聽節(jié)目許可證 1910564 增值電信業(yè)務(wù)經(jīng)營許可證粵B2-20060339 ???粵ICP備09017694號(hào)-2<a><span class="footerIcon">????</span></a></p><p>廣播電視節(jié)目制作經(jīng)營許可證（粵）字第01270號(hào)????營業(yè)性演出許可證穗天演440106026</p><p>穗公網(wǎng)監(jiān)備案證第44010650010167????互聯(lián)網(wǎng)藥品信息服務(wù)資格證編號(hào)（粵）-非經(jīng)營性-2012-0018</p><p>Copyright??©??2004-2017 KuGou-Inc.All Rights Reserved<a><span class="footerIcon2">????</span></a></p></div></div>
</body></html>
@charset "UTF-8"; .header, .search_wrapper {height: 78px;position: relative; } a {text-decoration: none; }/* header部分公用css樣式 */.header {width: 1000px;margin: 0 auto; } .logo, .topNav {position: absolute; } .clearfix:after {content:'';/**給復(fù)合的盒子加一個(gè)空內(nèi)容，將復(fù)合的盒子撐起來。**/display:block;clear:both; } /* header部分css樣式 */.logo {display: inline-block;height: 37px;width: 153px;background: url(../img/logo.png) no-repeat left top;margin-top: 20px; } .logo a {display: block; }/* search部分css樣式 */.search_wrapper {width: 300px;height: 36px;margin-left: 193px;padding-top: 20px;z-index: 9999; } .search_input {position: relative;width: 298px;height: 34px;border: 1px solid #ccc;line-height: 34px; } .search_input input {position: absolute;left: 0;top: 0;width: 249px;height: 24px;line-height: 24px;border: none;margin-left: 14px;padding: 5px 0;color: #666; } .search_input .searh_btn {position: absolute;right: 0;top: 0;width: 34px;height: 34px;margin: 0;border: none;padding: 0;background: 0 0;outline: none;cursor: pointer; } .search_input .searh_btn i {display: block;margin: 9px 0 0 9px;width: 16px;height: 16px;background-position: -40px -56px;cursor: pointer; } .search_icon {background: url(../img/search.png) no-repeat; } .search_input .searh_btn i:hover {background-position: -40px -86px; }/* topNav部分css樣式 */.topNav {top: 30px;right: 0;width: 402px; } .topNav ul {float: left;width: 250px;border-right: 1px solid #e6e6e6;padding-right: 11px;text-align: right; } .topNav li {float: left;padding: 0 15px; } .topNav li a {font-size: 12px;text-decoration: none;color: #777; } .topNav li a:hover{color: #009af3; } .topNav .login_area {position: relative;float: left;width: 110px;margin-top: -5px;margin-left: 30px; } .topNav .regin_btn, .topNav .login_btn {float: left;display: block;width: 48px;height: 28px;line-height: 28px;border-radius: 2px;text-align: center;cursor: pointer;text-decoration: none; } .topNav .login_btn {border: 1px solid #169af3;color: #fff;background-color: #169af3;margin-right: 5px; } .topNav .login_btn:hover{color: #fff;border: 1px solid #158fe1;background-color: #158fe1; } .topNav .regin_btn {border: 1px solid #999;color: #666; } .topNav .regin_btn:hover {border: 1px solid #169af3;color: #169af3; } /* nav部分css樣式 */.nav {height: 55px;background: #2c323b; } .navMin {width: 1000px;height: 55px;margin: 0 auto;background: #2c323b; } .menuBox {display: inline-block;width: 520px;height: 55px;margin: 0 76px 0 0;background: #2c323b;font-size: 0; } .menuBox li {background: #2c323b;display: inline-block;position: relative; } .menuBox .more {background:url(../img/arrowMored.png) no-repeat 88px 27px; } .menuBox li a {text-decoration: none;cursor: pointer;font-size: 16px;line-height: 55px;display: block;padding: 0 40px;color: #fff; } .nav .b:hover .more{color: #fff;background-color: #0c8ed9;background: url(../img/arrowMoreu2.png) no-repeat 88px 27px; } .menuBox li:hover {background: #0c8ed9; }.menuBox li ul {display: none;position: absolute; } .menuBox li ul li {width: 100%;height: 40px; } .menuBox li ul li a {cursor: pointer;text-decoration: none;background: #252b34;font-size: 16px;white-space: nowrap;line-height: 40px; } .menuBox li ul li a:hover {background: #2c323b; } .menuBox li:hover ul {display: block; }/* 設(shè)置subNav樣式 */.subNav {display: inline-block;font-size: 0;width: 400px; } .subNav a {display: inline-block;line-height: 15px;font-size: 13px;text-decoration: none;padding: 0 0px 0px 40px;color: #fff; } .subNav a:hover{color: #14a9ff; } .subNav-Btn1 {background: url(../img/sprite.png) no-repeat 20px -122px; } .subNav-Btn1:hover {background-position: 20px -104px; } .subNav-Btn2 {background: url(../img/sprite.png) no-repeat 20px -158px; } .subNav-Btn2:hover {background-position: 20px -140px; } .subNav-Btn3 {background: url(../img/sprite.png) no-repeat 20px -193px; } .subNav-Btn3:hover {background-position: 20px -175px; } .subNav-Btn4 {background: url(../img/sprite.png) no-repeat 20px -230px; } .subNav-Btn4:hover {background-position: 20px -212px; } .subNav-Btn5 {background: url(../img/sprite.png) no-repeat 20px -284px; } .subNav-Btn5:hover {background-position: 20px -248px; } /* 設(shè)置subNav樣式 */ .banner{position: relative;width:1439px;height: 445px; } .bannerMin {background: url(../img/banner.jpg) center;height: 445px;width:1439px;margin: 0 auto; } .banner:hover a{display: block; } .prev-icon{display:none;position: absolute;top: 37%;left:0;width: 60px;height: 120px;background-image: url(../img/sprite.png);background-position: 0 -755px; } .prev-icon:hover{background-position: 0 -880px; } .next-icon{display:none;position: absolute;right:0;top: 37%;width: 60px;height: 120px;background-image: url(../img/sprite.png);background-position: 0 -1130px; } .next-icon:hover{background-position: 0 -1005px; } .PagesMin {position: absolute;bottom: 80px;width: 100%;text-align: center; } .PagesMin div {width: 160px;margin: 0 auto; } .PagesMin a {float: left;margin: 0 7px;display: inline-block;width: 12px;height: 10px;font-size: 0;background: url(../img/sprite.png);background-position: 0 -22px; } /* 設(shè)置nav2樣式 */ .banner-cover {background: rgba(0,0,0,.5);height: 64px;width:100%;position: absolute;top:513px;left: 0; } .nav2 {height: 64px;width:100%;position: absolute;top:513px; } .nav2-box {margin: 0 auto;width: 698px;line-height: 64px;height: 64px; } .nav2 li {display: inline-block;line-height: 25px; } .nav2 a {text-decoration: none;display: inline-block;line-height: 16px;font-size: 16px;color: #fff;padding: 0 40px 0 100px;border-right: 1px solid #ccc; } .nav2 .noborder {border-right: 0; } .nav2 .nav2-btn1 {background: url(../img/nav-btn1.png) no-repeat 40px; } .nav2 .nav2-btn2 {background: url(../img/nav-btn2.png) no-repeat 40px; } .nav2 .nav2-btn3 {background: url(../img/nav-btn3.png) no-repeat 40px; }/* 設(shè)置mainMin樣式 */.mainMin {width: 1000px;margin: 0 auto;margin-top: 40px; }/* 設(shè)置itemTitle樣式 */.itemTitle {height: 30px;padding-bottom: 30px; } .itemTitle h3 {width: 120px;height: 30px;margin-right: 25px;color: #555;font-size: 25px;float: left; } .itemTitle h3 b {font-weight: 400;color: #009af3; } .itemTitle .more {margin-top: 7px;color: #999; }/* 設(shè)置mainLeft樣式 */.mainLeft {width: 660px;height: 390px;float: left; } .productMin {width: 668px;height: 330px; } .productLeft {float: left; }/* 設(shè)置topTxt樣式 */.topTxt {position: absolute;top: 0;right: 0;width: 152px;height: 30px;line-height: 30px;background: url(../img/topTxt-btn.png) no-repeat right center;color: #fff;text-align: right; } .productMin .topTxt-icon {margin-right: 10px;position: relative;top: 2px;background: url(../img/sprite.png) no-repeat;background-position: 0 -267px;display: inline-block;width: 14px;height: 14px; } .productMin .num {margin-right: 10px;font-size: 12px;color: #fff;display: inline-block;width: 55px;height: 17px; } .productBig {display: inline-block;width: 325px;height: 325px;margin: 0 5px 5px 0;position: relative; } .productBig img {width: 325px;height: 325px; } .productBig .cover {visibility: hidden;width: 325px;height: 325px;background: rgba(0, 0, 0, .3);position: absolute;top: 0;left: 0; } .productBig .playBtn {position: absolute;top: 300px;left: 300px;cursor: pointer;margin-left: -18px;margin-top: -18px;background-image: url(../img/sprite.png);background-position: 0 -401px;width: 36px;height: 36px; } .productBig:hover .cover {visibility: visible; }/* 設(shè)置bottomTxt樣式 */.productBig .bottomTxt {position: absolute;bottom: 0;left: 0;width: 309px;padding: 6px 8px;background: rgba(0, 0, 0, .5);font-size: 14px;height: 38px; } .productBig .bottomTxt p {width: 295px;padding: 0px 8px 8px;color: #fff;font-size: 14px; }/* 設(shè)置productMid樣式 */.productMid {display: inline-block;width: 160px;height: 160px;margin: 0 5px 5px 0;position: relative; } .productMid img {width: 160px;height: 160px; } .productMid .cover {visibility: hidden;width: 160px;height: 160px;background: rgba(0, 0, 0, .3);position: absolute;top: 0;left: 0; } .productMid .playBtn {position: absolute;top: 134px;left: 134px;cursor: pointer;margin-left: -18px;margin-top: -18px;background-image: url(../img/sprite.png);background-position: 0 -401px;width: 36px;height: 36px; } .productMid:hover .cover {visibility: visible; }/* 設(shè)置bottomMid-Txt樣式 */.productMid .bottomTxt {position: absolute;bottom: 0;left: 0;width: 142px;padding: 6px 8px;background: rgba(0, 0, 0, .5);font-size: 14px;height: 38px; } .productMid .bottomTxt p {width: 140px;padding: 0px 8px 8px 0;color: #fff;font-size: 14px; }/* 設(shè)置mainRight樣式 */.mainRight {width: 326px;height: 390px;float: right; } .mainRightMin {width: 326px;height: 325px; } .mainRightList {width: 326px;height: 98px;margin-bottom: 15px;background-color: #f6f6f6; } .mainRight .pic {width: 98px;height: 98px;float: left;position: relative; } .mainRight a {display: inline-block; } .mainRight .cover {display: none;width: 98px;height: 98px;background: rgba(0, 0, 0, .3);position: absolute; } .mainRight .playBtn {cursor: pointer;margin-left: 30px;margin-top: 32px;background-image: url(../img/sprite.png);background-position: 0 -401px;width: 36px;height: 36px; } .mainRight li:hover .cover {display: block; } .mainRight .mainRight-content {display: inline-block;width: 200px;height: 72px;padding: 13px 10px;float: left; } .mainRight dt {overflow: hidden;line-height: 24px;color: #333;font-weight: 700; } .mainRight dd {overflow: hidden;width: 180px;line-height: 24px;font-size: 14px;color: #555; } .clear {clear: both; }/* 設(shè)置main2樣式 */.main2Min {width: 1000px;height: 80px;margin: 40px auto; }/* 設(shè)置main3樣式 */.main3Min {width: 1000px;margin: 0 auto 0; }/* 設(shè)置main3-left樣式 */.main3-left {float: left;display: inline-block;width: 650px;height: 375px;margin-right: 20px; } .itemTitle-menu{line-height: 30px;float:left; } .itemTitle-menu .menuItem:hover{color: #009af3; } .itemTitle-menu .menuItem{margin-right: 20px;cursor: pointer;font-size: 14px; } .main3-left .playAll{float: right;border: 1px solid #dbdbdb;border-radius: 2px;padding: 10px 10px;color: #555; } .playAll:hover {color: #009af3;border: 1px solid #009af3; } .icon-play{display: inline-block;background: url(../img/icon_splice.png) no-repeat;background-position: 0px 0px;width: 12px;height: 14px;vertical-align: middle;margin: -4px 5px 0 0; } .playAll:hover .icon-play{background-position: 0 -30px; } .main3Bottom {border-bottom: 1px solid #f0f0f0; } .main3-left ul {width: 650px;height: 290px;margin-top: 10px; } .main3-left li {cursor: pointer;position: relative;overflow: hidden;padding: 0 10px;color: #333; } .main3-left a {font-size: 13px;line-height: 35px;display: inline-block;text-decoration: none;cursor: pointer; } .main3-left-l {float: left; } .main3-left-R {float: right; } .main3-left li .icon-share {display: block;right: 55px;width: 21px;height: 15px;float: left;margin:12px 0 0 10px;background: url(../img/icon_splice.png) no-repeat;background-position: -120px -240px; } .main3-left li .icon-play {display: none;position: absolute;top:13px;right: 88px;width: 12px;height: 14px;background: url(../img/icon_splice.png) no-repeat;background-position: 0px 0px; } .main3-left li .icon-play:hover {background-position: 0 -30px; } .main3-left li .icon-download{display: none;position: absolute;top:10px;right: 63px;width: 15px;height: 15px;background:url(../img/icon_splice.png);background-position: -90px 0; } .main3-left li .icon-download:hover {background-position: -90px -30px; } .main3-left li:hover .icon-play,.main3-left li:hover .icon-download{display: block; } .main3-left li:hover .icon-share{display: none; } /* 設(shè)置main3-page樣式 */ .main3 .pages {display: inline-block;_display: inline;height: 9px;padding-left: 290px;margin: 10px auto 0;font-size: 12px;color: #8d8d8d; } .main3 .prev {float: left;display: block;width: 6px;height: 9px;line-height: 9px;margin-top: 5px;text-indent: -999em;background:url(../img/pageChange.jpg) no-repeat 0 0;cursor: pointer;text-decoration: none; } .main3 .page {display: inline;float: left;margin: 3px 15px;font-size: 12px;color: #8d8d8d; } .main3 .next {float: left;display: block;width: 6px;height: 9px;line-height: 9px;margin-top: 5px;text-indent: -999em;background:url(../img/pageChange.jpg) no-repeat 0 0;cursor: pointer; } .main3 .next2{background-position: -13px 0;height: 9px; } /* 設(shè)置main3-right樣式 */.main3-right {float: right;display: inline-block;width: 320px;height: 400px; } .main3-rightMin {width: 320px;height: 360px; } .main3-rightMin .box1 {position: relative;display: inline-block;width: 320px;height: 175px; } .main3-rightMin .box1 .Cover {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.2); } .main3-rightMin .box1:hover .Cover {display: block; } .main3-rightMin .playBtn {display:none;position: absolute;top: 38%;left: 42%;text-indent: -999em;cursor: pointer;background-image: url(../img/sprite.png);background-position: 0 -542px;width: 48px;height: 48px; } .main3-rightMin .box1:hover .playBtn {display:block; } .main3-rightMin .playBtn:hover{background-position: 0 -489px; } .main3-rightMin .box1 .bottomTxt{position: absolute;bottom: 0;left: 0;padding: 6px 8px;background: rgba(0,0,0,.5);font-size: 14px;color: #fff;height: 38px;width: 304px; } .bottomTxt1,.bottomTxt2{line-height: 19px;font-size:13px;font-weight: bold; } .main3-rightMin .box2 {position: relative;display: inline-block;margin: 8px 8px 0 0;width: 154px;height: 125px; } .main3-rightMin .box2 .Cover {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.2); } .main3-rightMin .box2:hover .Cover {display: block; } .main3-rightMin .box2 .playBtn {position: absolute;top: 38%;left: 42%;text-indent: -999em;cursor: pointer;background-image: url(../img/sprite.png);background-position: 0 -542px;width: 48px;height: 48px; } .main3-rightMin .box2:hover .playBtn {display:block; } .main3-rightMin .box2 .playBtn:hover{background-position: 0 -489px; } .main3-rightMin .box2 .bottomTxt{position: absolute;bottom:-51px;left: 0;padding: 6px 8px;background: #fff;color: #666;font-size: 14px;height: 38px;width: 144px; } .main3-rightMin .box2 .bottomTxt1,.bottomTxt2{line-height: 19px;font-size:13px; } /* 設(shè)置main4樣式 */.main4Min {width: 1000px;height: 80px;margin: 40px auto; }/* 設(shè)置main5樣式 */.main5Min {width: 1000px;margin: 40px auto 0; }/* 設(shè)置main5-left樣式 */.main5-left {display: inline-block;width: 650px;margin-right: 21px; } .main5-left ul {width: 685px; } .main5-left li {position: relative;position: relative;float: left;cursor: pointer;width: 100px;margin-right: 37px;margin-bottom: 25px; } .main5-left ul .main5-left li:nth-child(4),.main5-left ul .main5-left li:nth-child(8){margin-right:0; } .main5-left li a {text-decoration:none;/*text-decoration:none;加在別的地方?jīng)]有效果 */ } .main5-left li .Cover {display: none;position: absolute;top:0px;width: 100px;height: 100px;border-radius: 50px;background: rgba(0,0,0,.2);background-size: 100% 100%; } .main5-left li:hover .Cover {display: block; } .main5-left li .playBtn {position: absolute;top: 50%;left: 50%;margin-top: -21px;margin-left: -21px;background-image: url(../img/sprite.png);background-position: 0 -442px;width: 42px;height: 42px; } .main5-left li .radioLogo {width: 100px;height: 100px;margin-bottom: 10px;margin-right: 0; } .main5-left li .radioItem {width: 100px;text-align: center;line-height: 20px;font-size: 14px; } /* 設(shè)置main5-right樣式 */.main5-right {display: inline-block;width: 325px;float: right; } .main5-right .itemContent{overflow: hidden;width: 325px; } .main5-right .itemTitle .tabT {width: 330px;line-height: 30px; } .itemTitle .tabT span {margin-right: 20px;cursor: pointer;font-size: 14px; } .tabT span:hover{color: #009af3; } .itemTitle .more {margin-top: 7px;color: #999;float:right; } .main5-right .itemTitle .more {margin-top: 0px;color: #999; } .main5-right .firstUl {width: 100%;position: relative;height: 320px; } .main5-right .firstUl li {position: absolute;top: 0;left: 0;overflow: hidden;width: 330px;height: 320px; } .main5-right .secondUl {position: relative;width: 330px;height: 270px; } .main5-right .secondUl li {position: absolute;top: 0;left: 0;height: 270px; } .secondUl li:nth-child(2+5){margin-right:0; } .main5-right .cptMid {width: 160px;height: 160px;padding: 0;margin: 0 5px 5px 0;position: relative; } .main5-right .cpt{float: left; } .main5-right .cptMid img {width: 160px;height: 160px;position:relative;vertical-align: middle; } .main5-right .cptMid .Cover {display: none;width: 160px;height: 160px;background: rgba(0,0,0,.3);position: absolute;top: 0;left: 0; } .main5-right .cptMid:hover .Cover {display: block; } .main5-right .cptMid .cptB {background: url(../img/album_cpt_bg.png) no-repeat left bottom;width: 144px;padding: 6px 8px;font-size: 14px;height: 38px;position: absolute;bottom: 0;left: 0; } .main5-right .cptMid .songListSinger {line-height: 50px;color: #fff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } .main5-right .cptSmall {width: 105px;height: 105px;padding: 0;margin: 0 5px 0 0;position: relative; } .main5-right .cptSmall img {width: 105px;height: 105px;position:relative;vertical-align: middle; } .main5-right .cptSmall .Cover {display:none;width: 105px;height: 105px;background: rgba(0,0,0,.3);position: absolute;top: 0;left: 0; } .main5-right .cptSmall:hover .Cover{display:block; } .main5-right .cptSmall .cptB {background: url(../img/album_cpt_bg.png) no-repeat left bottom;width: 89px;padding: 6px 8px;font-size: 14px;height: 33px;position: absolute;bottom: 0;left: 0; } .main5-right .cptSmall .songListSinger {line-height: 40px;color: #fff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } .main5-right .tab {position: relative;padding-top: 17px;height: 6px;line-height: 6px;text-align: center; } .main5-right .tab a {display: inline-block;margin: 0 5px;vertical-align: middle;background-image: url(../img/sprite.png);background-position: 0 -11px;width: 6px;height: 6px;text-decoration: none; } .main5-right .tab .date2{background-position: 0 0px; }/* 設(shè)置main6樣式 */.main6Min {width: 1000px;height: 80px;margin: 40px auto; }/* 設(shè)置main7樣式 */.main7Min {width: 1000px;margin: 40px auto; } .main7-picMin a {display: inline-block;width: 130px;height: 58px;margin: 3px;border: 1px dashed #CCCCCC; } .main7-pic1 {background: url(../img/main7-pic1.jpg); } .main7-pic2 {background: url(../img/main7-pic2.jpg); } .main7-pic3 {background: url(../img/main7-pic3.jpg); } .main7-pic4 {background: url(../img/main7-pic4.jpg); } .main7-pic5 {background: url(../img/main7-pic5.jpg); } .main7-pic6 {background: url(../img/main7-pic6.jpg); } .main7-pic7 {background: url(../img/main7-pic7.jpg); } .main7-pic8 {background: url(../img/main7-pic8.jpg); } .main7-pic9 {background: url(../img/main7-pic9.jpg); } .main7-pic10 {background: url(../img/main7-pic10.jpg); } .main7-pic11 {background: url(../img/main7-pic11.jpg); } .main7-pic12 {background: url(../img/main7-pic12.jpg); } .main7-pic13 {background: url(../img/main7-pic13.jpg); } .main7-pic14 {background: url(../img/main7-pic14.jpg); } .main7-pic15 {background: url(../img/main7-pic15.jpg); } .main7-pic16 {background: url(../img/main7-pic16.jpg); } .main7-pic17 {background: url(../img/main7-pic17.jpg); } .main7-pic18 {background: url(../img/main7-pic18.jpg); } .main7-pic19 {background: url(../img/main7-pic19.jpg); } .main7-pic20 {background: url(../img/main7-pic20.jpg); } .main7-pic21 {background: url(../img/main7-pic21.jpg); }/* 設(shè)置main樣式 */.main8Min {width: 1000px;margin: 40px auto; } .main8Min a {overflow: hidden;display: inline-block;width: 121px;height: 24px;line-height: 24px;margin-bottom: 20px;text-decoration: none;color: #555;cursor: pointer; } .main8Min .more {width: 30px; }/* 設(shè)置footer樣式 */.footer {background: #2c323b;padding-bottom: 50px; } .footerTxt {text-align: center;margin: 0 auto;height: 46px;background: #2c323b;font-size: 0;line-height: 50px;border-bottom: 1px solid #3d424a; } .footerTxt a {display: inline-block;padding: 0 15px;border-right: 1px solid #b19676;font-size: 12px;line-height: 15px;text-decoration: none;color: #b1b3b9;cursor: pointer; } .main8Min a:hover, .footerTxt a:hover {color: #009af3; } .footer .noborder {border-right: 0; } .footer .footerMin {width: 1000px;margin: 40px auto 0; } .footer .footerMin p {position: relative;line-height: 30px;text-align: center;color: #b1b3b9; } .footer .footerIcon {width: 16px;height: 16px;position: absolute;margin-left: 5px;margin-top: 7px;background: url(../img/footer_icon.png) no-repeat 0 0; } .footer .footerIcon2 {width: 20px;height: 20px;position: absolute;margin-left: 10px;margin-top: 1px;background: url(../img/logo_down.png) no-repeat 0 0; }
@charset "UTF-8"; .header, .search_wrapper {height: 78px;position: relative; } a {text-decoration: none; }/* header部分公用css樣式 */.header {width: 1000px;margin: 0 auto; } .logo, .topNav {position: absolute; } .clearfix:after {content:'';/**給復(fù)合的盒子加一個(gè)空內(nèi)容，將復(fù)合的盒子撐起來。**/display:block;clear:both; } /* header部分css樣式 */.logo {display: inline-block;height: 37px;width: 153px;background: url(../img/logo.png) no-repeat left top;margin-top: 20px; } .logo a {display: block; }/* search部分css樣式 */.search_wrapper {width: 300px;height: 36px;margin-left: 193px;padding-top: 20px;z-index: 9999; } .search_input {position: relative;width: 298px;height: 34px;border: 1px solid #ccc;line-height: 34px; } .search_input input {position: absolute;left: 0;top: 0;width: 249px;height: 24px;line-height: 24px;border: none;margin-left: 14px;padding: 5px 0;color: #666; } .search_input .searh_btn {position: absolute;right: 0;top: 0;width: 34px;height: 34px;margin: 0;border: none;padding: 0;background: 0 0;outline: none;cursor: pointer; } .search_input .searh_btn i {display: block;margin: 9px 0 0 9px;width: 16px;height: 16px;background-position: -40px -56px;cursor: pointer; } .search_icon {background: url(../img/search.png) no-repeat; } .search_input .searh_btn i:hover {background-position: -40px -86px; }/* topNav部分css樣式 */.topNav {top: 30px;right: 0;width: 402px; } .topNav ul {float: left;width: 250px;border-right: 1px solid #e6e6e6;padding-right: 11px;text-align: right; } .topNav li {float: left;padding: 0 15px; } .topNav li a {font-size: 12px;text-decoration: none;color: #777; } .topNav li a:hover{color: #009af3; } .topNav .login_area {position: relative;float: left;width: 110px;margin-top: -5px;margin-left: 30px; } .topNav .regin_btn, .topNav .login_btn {float: left;display: block;width: 48px;height: 28px;line-height: 28px;border-radius: 2px;text-align: center;cursor: pointer;text-decoration: none; } .topNav .login_btn {border: 1px solid #169af3;color: #fff;background-color: #169af3;margin-right: 5px; } .topNav .login_btn:hover{color: #fff;border: 1px solid #158fe1;background-color: #158fe1; } .topNav .regin_btn {border: 1px solid #999;color: #666; } .topNav .regin_btn:hover {border: 1px solid #169af3;color: #169af3; } /* nav部分css樣式 */.nav {height: 55px;background: #2c323b; } .navMin {width: 1000px;height: 55px;margin: 0 auto;background: #2c323b; } .menuBox {display: inline-block;width: 520px;height: 55px;margin: 0 76px 0 0;background: #2c323b;font-size: 0; } .menuBox li {background: #2c323b;display: inline-block;position: relative; } .menuBox .more {background:url(../img/arrowMored.png) no-repeat 88px 27px; } .menuBox li a {text-decoration: none;cursor: pointer;font-size: 16px;line-height: 55px;display: block;padding: 0 40px;color: #fff; } .nav .b:hover .more{color: #fff;background-color: #0c8ed9;background: url(../img/arrowMoreu2.png) no-repeat 88px 27px; } .menuBox li:hover {background: #0c8ed9; }.menuBox li ul {display: none;position: absolute; } .menuBox li ul li {width: 100%;height: 40px; } .menuBox li ul li a {cursor: pointer;text-decoration: none;background: #252b34;font-size: 16px;white-space: nowrap;line-height: 40px; } .menuBox li ul li a:hover {background: #2c323b; } .menuBox li:hover ul {display: block; }/* 設(shè)置subNav樣式 */.subNav {display: inline-block;font-size: 0;width: 400px; } .subNav a {display: inline-block;line-height: 15px;font-size: 13px;text-decoration: none;padding: 0 0px 0px 40px;color: #fff; } .subNav a:hover{color: #14a9ff; } .subNav-Btn1 {background: url(../img/sprite.png) no-repeat 20px -122px; } .subNav-Btn1:hover {background-position: 20px -104px; } .subNav-Btn2 {background: url(../img/sprite.png) no-repeat 20px -158px; } .subNav-Btn2:hover {background-position: 20px -140px; } .subNav-Btn3 {background: url(../img/sprite.png) no-repeat 20px -193px; } .subNav-Btn3:hover {background-position: 20px -175px; } .subNav-Btn4 {background: url(../img/sprite.png) no-repeat 20px -230px; } .subNav-Btn4:hover {background-position: 20px -212px; } .subNav-Btn5 {background: url(../img/sprite.png) no-repeat 20px -284px; } .subNav-Btn5:hover {background-position: 20px -248px; } /* 設(shè)置subNav樣式 */ .banner{position: relative;width:1439px;height: 445px; } .bannerMin {background: url(../img/banner.jpg) center;height: 445px;width:1439px;margin: 0 auto; } .banner:hover a{display: block; } .prev-icon{display:none;position: absolute;top: 37%;left:0;width: 60px;height: 120px;background-image: url(../img/sprite.png);background-position: 0 -755px; } .prev-icon:hover{background-position: 0 -880px; } .next-icon{display:none;position: absolute;right:0;top: 37%;width: 60px;height: 120px;background-image: url(../img/sprite.png);background-position: 0 -1130px; } .next-icon:hover{background-position: 0 -1005px; } .PagesMin {position: absolute;bottom: 80px;width: 100%;text-align: center; } .PagesMin div {width: 160px;margin: 0 auto; } .PagesMin a {float: left;margin: 0 7px;display: inline-block;width: 12px;height: 10px;font-size: 0;background: url(../img/sprite.png);background-position: 0 -22px; } /* 設(shè)置nav2樣式 */ .banner-cover {background: rgba(0,0,0,.5);height: 64px;width:100%;position: absolute;top:513px;left: 0; } .nav2 {height: 64px;width:100%;position: absolute;top:513px; } .nav2-box {margin: 0 auto;width: 698px;line-height: 64px;height: 64px; } .nav2 li {display: inline-block;line-height: 25px; } .nav2 a {text-decoration: none;display: inline-block;line-height: 16px;font-size: 16px;color: #fff;padding: 0 40px 0 100px;border-right: 1px solid #ccc; } .nav2 .noborder {border-right: 0; } .nav2 .nav2-btn1 {background: url(../img/nav-btn1.png) no-repeat 40px; } .nav2 .nav2-btn2 {background: url(../img/nav-btn2.png) no-repeat 40px; } .nav2 .nav2-btn3 {background: url(../img/nav-btn3.png) no-repeat 40px; }/* 設(shè)置mainMin樣式 */.mainMin {width: 1000px;margin: 0 auto;margin-top: 40px; }/* 設(shè)置itemTitle樣式 */.itemTitle {height: 30px;padding-bottom: 30px; } .itemTitle h3 {width: 120px;height: 30px;margin-right: 25px;color: #555;font-size: 25px;float: left; } .itemTitle h3 b {font-weight: 400;color: #009af3; } .itemTitle .more {margin-top: 7px;color: #999; }/* 設(shè)置mainLeft樣式 */.mainLeft {width: 660px;height: 390px;float: left; } .productMin {width: 668px;height: 330px; } .productLeft {float: left; }/* 設(shè)置topTxt樣式 */.topTxt {position: absolute;top: 0;right: 0;width: 152px;height: 30px;line-height: 30px;background: url(../img/topTxt-btn.png) no-repeat right center;color: #fff;text-align: right; } .productMin .topTxt-icon {margin-right: 10px;position: relative;top: 2px;background: url(../img/sprite.png) no-repeat;background-position: 0 -267px;display: inline-block;width: 14px;height: 14px; } .productMin .num {margin-right: 10px;font-size: 12px;color: #fff;display: inline-block;width: 55px;height: 17px; } .productBig {display: inline-block;width: 325px;height: 325px;margin: 0 5px 5px 0;position: relative; } .productBig img {width: 325px;height: 325px; } .productBig .cover {visibility: hidden;width: 325px;height: 325px;background: rgba(0, 0, 0, .3);position: absolute;top: 0;left: 0; } .productBig .playBtn {position: absolute;top: 300px;left: 300px;cursor: pointer;margin-left: -18px;margin-top: -18px;background-image: url(../img/sprite.png);background-position: 0 -401px;width: 36px;height: 36px; } .productBig:hover .cover {visibility: visible; }/* 設(shè)置bottomTxt樣式 */.productBig .bottomTxt {position: absolute;bottom: 0;left: 0;width: 309px;padding: 6px 8px;background: rgba(0, 0, 0, .5);font-size: 14px;height: 38px; } .productBig .bottomTxt p {width: 295px;padding: 0px 8px 8px;color: #fff;font-size: 14px; }/* 設(shè)置productMid樣式 */.productMid {display: inline-block;width: 160px;height: 160px;margin: 0 5px 5px 0;position: relative; } .productMid img {width: 160px;height: 160px; } .productMid .cover {visibility: hidden;width: 160px;height: 160px;background: rgba(0, 0, 0, .3);position: absolute;top: 0;left: 0; } .productMid .playBtn {position: absolute;top: 134px;left: 134px;cursor: pointer;margin-left: -18px;margin-top: -18px;background-image: url(../img/sprite.png);background-position: 0 -401px;width: 36px;height: 36px; } .productMid:hover .cover {visibility: visible; }/* 設(shè)置bottomMid-Txt樣式 */.productMid .bottomTxt {position: absolute;bottom: 0;left: 0;width: 142px;padding: 6px 8px;background: rgba(0, 0, 0, .5);font-size: 14px;height: 38px; } .productMid .bottomTxt p {width: 140px;padding: 0px 8px 8px 0;color: #fff;font-size: 14px; }/* 設(shè)置mainRight樣式 */.mainRight {width: 326px;height: 390px;float: right; } .mainRightMin {width: 326px;height: 325px; } .mainRightList {width: 326px;height: 98px;margin-bottom: 15px;background-color: #f6f6f6; } .mainRight .pic {width: 98px;height: 98px;float: left;position: relative; } .mainRight a {display: inline-block; } .mainRight .cover {display: none;width: 98px;height: 98px;background: rgba(0, 0, 0, .3);position: absolute; } .mainRight .playBtn {cursor: pointer;margin-left: 30px;margin-top: 32px;background-image: url(../img/sprite.png);background-position: 0 -401px;width: 36px;height: 36px; } .mainRight li:hover .cover {display: block; } .mainRight .mainRight-content {display: inline-block;width: 200px;height: 72px;padding: 13px 10px;float: left; } .mainRight dt {overflow: hidden;line-height: 24px;color: #333;font-weight: 700; } .mainRight dd {overflow: hidden;width: 180px;line-height: 24px;font-size: 14px;color: #555; } .clear {clear: both; }/* 設(shè)置main2樣式 */.main2Min {width: 1000px;height: 80px;margin: 40px auto; }/* 設(shè)置main3樣式 */.main3Min {width: 1000px;margin: 0 auto 0; }/* 設(shè)置main3-left樣式 */.main3-left {float: left;display: inline-block;width: 650px;height: 375px;margin-right: 20px; } .itemTitle-menu{line-height: 30px;float:left; } .itemTitle-menu .menuItem:hover{color: #009af3; } .itemTitle-menu .menuItem{margin-right: 20px;cursor: pointer;font-size: 14px; } .main3-left .playAll{float: right;border: 1px solid #dbdbdb;border-radius: 2px;padding: 10px 10px;color: #555; } .playAll:hover {color: #009af3;border: 1px solid #009af3; } .icon-play{display: inline-block;background: url(../img/icon_splice.png) no-repeat;background-position: 0px 0px;width: 12px;height: 14px;vertical-align: middle;margin: -4px 5px 0 0; } .playAll:hover .icon-play{background-position: 0 -30px; } .main3Bottom {border-bottom: 1px solid #f0f0f0; } .main3-left ul {width: 650px;height: 290px;margin-top: 10px; } .main3-left li {cursor: pointer;position: relative;overflow: hidden;padding: 0 10px;color: #333; } .main3-left a {font-size: 13px;line-height: 35px;display: inline-block;text-decoration: none;cursor: pointer; } .main3-left-l {float: left; } .main3-left-R {float: right; } .main3-left li .icon-share {display: block;right: 55px;width: 21px;height: 15px;float: left;margin:12px 0 0 10px;background: url(../img/icon_splice.png) no-repeat;background-position: -120px -240px; } .main3-left li .icon-play {display: none;position: absolute;top:13px;right: 88px;width: 12px;height: 14px;background: url(../img/icon_splice.png) no-repeat;background-position: 0px 0px; } .main3-left li .icon-play:hover {background-position: 0 -30px; } .main3-left li .icon-download{display: none;position: absolute;top:10px;right: 63px;width: 15px;height: 15px;background:url(../img/icon_splice.png);background-position: -90px 0; } .main3-left li .icon-download:hover {background-position: -90px -30px; } .main3-left li:hover .icon-play,.main3-left li:hover .icon-download{display: block; } .main3-left li:hover .icon-share{display: none; } /* 設(shè)置main3-page樣式 */ .main3 .pages {display: inline-block;_display: inline;height: 9px;padding-left: 290px;margin: 10px auto 0;font-size: 12px;color: #8d8d8d; } .main3 .prev {float: left;display: block;width: 6px;height: 9px;line-height: 9px;margin-top: 5px;text-indent: -999em;background:url(../img/pageChange.jpg) no-repeat 0 0;cursor: pointer;text-decoration: none; } .main3 .page {display: inline;float: left;margin: 3px 15px;font-size: 12px;color: #8d8d8d; } .main3 .next {float: left;display: block;width: 6px;height: 9px;line-height: 9px;margin-top: 5px;text-indent: -999em;background:url(../img/pageChange.jpg) no-repeat 0 0;cursor: pointer; } .main3 .next2{background-position: -13px 0;height: 9px; } /* 設(shè)置main3-right樣式 */.main3-right {float: right;display: inline-block;width: 320px;height: 400px; } .main3-rightMin {width: 320px;height: 360px; } .main3-rightMin .box1 {position: relative;display: inline-block;width: 320px;height: 175px; } .main3-rightMin .box1 .Cover {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.2); } .main3-rightMin .box1:hover .Cover {display: block; } .main3-rightMin .playBtn {display:none;position: absolute;top: 38%;left: 42%;text-indent: -999em;cursor: pointer;background-image: url(../img/sprite.png);background-position: 0 -542px;width: 48px;height: 48px; } .main3-rightMin .box1:hover .playBtn {display:block; } .main3-rightMin .playBtn:hover{background-position: 0 -489px; } .main3-rightMin .box1 .bottomTxt{position: absolute;bottom: 0;left: 0;padding: 6px 8px;background: rgba(0,0,0,.5);font-size: 14px;color: #fff;height: 38px;width: 304px; } .bottomTxt1,.bottomTxt2{line-height: 19px;font-size:13px;font-weight: bold; } .main3-rightMin .box2 {position: relative;display: inline-block;margin: 8px 8px 0 0;width: 154px;height: 125px; } .main3-rightMin .box2 .Cover {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.2); } .main3-rightMin .box2:hover .Cover {display: block; } .main3-rightMin .box2 .playBtn {position: absolute;top: 38%;left: 42%;text-indent: -999em;cursor: pointer;background-image: url(../img/sprite.png);background-position: 0 -542px;width: 48px;height: 48px; } .main3-rightMin .box2:hover .playBtn {display:block; } .main3-rightMin .box2 .playBtn:hover{background-position: 0 -489px; } .main3-rightMin .box2 .bottomTxt{position: absolute;bottom:-51px;left: 0;padding: 6px 8px;background: #fff;color: #666;font-size: 14px;height: 38px;width: 144px; } .main3-rightMin .box2 .bottomTxt1,.bottomTxt2{line-height: 19px;font-size:13px; } /* 設(shè)置main4樣式 */.main4Min {width: 1000px;height: 80px;margin: 40px auto; }/* 設(shè)置main5樣式 */.main5Min {width: 1000px;margin: 40px auto 0; }/* 設(shè)置main5-left樣式 */.main5-left {display: inline-block;width: 650px;margin-right: 21px; } .main5-left ul {width: 685px; } .main5-left li {position: relative;position: relative;float: left;cursor: pointer;width: 100px;margin-right: 37px;margin-bottom: 25px; } .main5-left ul .main5-left li:nth-child(4),.main5-left ul .main5-left li:nth-child(8){margin-right:0; } .main5-left li a {text-decoration:none;/*text-decoration:none;加在別的地方?jīng)]有效果 */ } .main5-left li .Cover {display: none;position: absolute;top:0px;width: 100px;height: 100px;border-radius: 50px;background: rgba(0,0,0,.2);background-size: 100% 100%; } .main5-left li:hover .Cover {display: block; } .main5-left li .playBtn {position: absolute;top: 50%;left: 50%;margin-top: -21px;margin-left: -21px;background-image: url(../img/sprite.png);background-position: 0 -442px;width: 42px;height: 42px; } .main5-left li .radioLogo {width: 100px;height: 100px;margin-bottom: 10px;margin-right: 0; } .main5-left li .radioItem {width: 100px;text-align: center;line-height: 20px;font-size: 14px; } /* 設(shè)置main5-right樣式 */.main5-right {display: inline-block;width: 325px;float: right; } .main5-right .itemContent{overflow: hidden;width: 325px; } .main5-right .itemTitle .tabT {width: 330px;line-height: 30px; } .itemTitle .tabT span {margin-right: 20px;cursor: pointer;font-size: 14px; } .tabT span:hover{color: #009af3; } .itemTitle .more {margin-top: 7px;color: #999;float:right; } .main5-right .itemTitle .more {margin-top: 0px;color: #999; } .main5-right .firstUl {width: 100%;position: relative;height: 320px; } .main5-right .firstUl li {position: absolute;top: 0;left: 0;overflow: hidden;width: 330px;height: 320px; } .main5-right .secondUl {position: relative;width: 330px;height: 270px; } .main5-right .secondUl li {position: absolute;top: 0;left: 0;height: 270px; } .secondUl li:nth-child(2+5){margin-right:0; } .main5-right .cptMid {width: 160px;height: 160px;padding: 0;margin: 0 5px 5px 0;position: relative; } .main5-right .cpt{float: left; } .main5-right .cptMid img {width: 160px;height: 160px;position:relative;vertical-align: middle; } .main5-right .cptMid .Cover {display: none;width: 160px;height: 160px;background: rgba(0,0,0,.3);position: absolute;top: 0;left: 0; } .main5-right .cptMid:hover .Cover {display: block; } .main5-right .cptMid .cptB {background: url(../img/album_cpt_bg.png) no-repeat left bottom;width: 144px;padding: 6px 8px;font-size: 14px;height: 38px;position: absolute;bottom: 0;left: 0; } .main5-right .cptMid .songListSinger {line-height: 50px;color: #fff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } .main5-right .cptSmall {width: 105px;height: 105px;padding: 0;margin: 0 5px 0 0;position: relative; } .main5-right .cptSmall img {width: 105px;height: 105px;position:relative;vertical-align: middle; } .main5-right .cptSmall .Cover {display:none;width: 105px;height: 105px;background: rgba(0,0,0,.3);position: absolute;top: 0;left: 0; } .main5-right .cptSmall:hover .Cover{display:block; } .main5-right .cptSmall .cptB {background: url(../img/album_cpt_bg.png) no-repeat left bottom;width: 89px;padding: 6px 8px;font-size: 14px;height: 33px;position: absolute;bottom: 0;left: 0; } .main5-right .cptSmall .songListSinger {line-height: 40px;color: #fff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } .main5-right .tab {position: relative;padding-top: 17px;height: 6px;line-height: 6px;text-align: center; } .main5-right .tab a {display: inline-block;margin: 0 5px;vertical-align: middle;background-image: url(../img/sprite.png);background-position: 0 -11px;width: 6px;height: 6px;text-decoration: none; } .main5-right .tab .date2{background-position: 0 0px; }/* 設(shè)置main6樣式 */.main6Min {width: 1000px;height: 80px;margin: 40px auto; }/* 設(shè)置main7樣式 */.main7Min {width: 1000px;margin: 40px auto; } .main7-picMin a {display: inline-block;width: 130px;height: 58px;margin: 3px;border: 1px dashed #CCCCCC; } .main7-pic1 {background: url(../img/main7-pic1.jpg); } .main7-pic2 {background: url(../img/main7-pic2.jpg); } .main7-pic3 {background: url(../img/main7-pic3.jpg); } .main7-pic4 {background: url(../img/main7-pic4.jpg); } .main7-pic5 {background: url(../img/main7-pic5.jpg); } .main7-pic6 {background: url(../img/main7-pic6.jpg); } .main7-pic7 {background: url(../img/main7-pic7.jpg); } .main7-pic8 {background: url(../img/main7-pic8.jpg); } .main7-pic9 {background: url(../img/main7-pic9.jpg); } .main7-pic10 {background: url(../img/main7-pic10.jpg); } .main7-pic11 {background: url(../img/main7-pic11.jpg); } .main7-pic12 {background: url(../img/main7-pic12.jpg); } .main7-pic13 {background: url(../img/main7-pic13.jpg); } .main7-pic14 {background: url(../img/main7-pic14.jpg); } .main7-pic15 {background: url(../img/main7-pic15.jpg); } .main7-pic16 {background: url(../img/main7-pic16.jpg); } .main7-pic17 {background: url(../img/main7-pic17.jpg); } .main7-pic18 {background: url(../img/main7-pic18.jpg); } .main7-pic19 {background: url(../img/main7-pic19.jpg); } .main7-pic20 {background: url(../img/main7-pic20.jpg); } .main7-pic21 {background: url(../img/main7-pic21.jpg); }/* 設(shè)置main樣式 */.main8Min {width: 1000px;margin: 40px auto; } .main8Min a {overflow: hidden;display: inline-block;width: 121px;height: 24px;line-height: 24px;margin-bottom: 20px;text-decoration: none;color: #555;cursor: pointer; } .main8Min .more {width: 30px; }/* 設(shè)置footer樣式 */.footer {background: #2c323b;padding-bottom: 50px; } .footerTxt {text-align: center;margin: 0 auto;height: 46px;background: #2c323b;font-size: 0;line-height: 50px;border-bottom: 1px solid #3d424a; } .footerTxt a {display: inline-block;padding: 0 15px;border-right: 1px solid #b19676;font-size: 12px;line-height: 15px;text-decoration: none;color: #b1b3b9;cursor: pointer; } .main8Min a:hover, .footerTxt a:hover {color: #009af3; } .footer .noborder {border-right: 0; } .footer .footerMin {width: 1000px;margin: 40px auto 0; } .footer .footerMin p {position: relative;line-height: 30px;text-align: center;color: #b1b3b9; } .footer .footerIcon {width: 16px;height: 16px;position: absolute;margin-left: 5px;margin-top: 7px;background: url(../img/footer_icon.png) no-repeat 0 0; } .footer .footerIcon2 {width: 20px;height: 20px;position: absolute;margin-left: 10px;margin-top: 1px;background: url(../img/logo_down.png) no-repeat 0 0; }
總結(jié)
- 上一篇： 从私服下载 jar包
- 下一篇： 使用nexus私服下载和上传依赖