QQ音樂靜態頁面設計
- 布局思路
- 一、 頂部導航欄設計< Header >
- 二、內容版塊設計< content >
- 歌單推薦
- 新歌首發
- 三、底部著作權、外鏈部分設計< footer >
- 四、關于不同瀏覽器格式的統一
- 五、完整代碼行
- 六、完整代碼實作效果
布局思路
這個練習專案通過模仿QQ音樂網頁版的布局模式和基礎影片效果達到以下目的：
1.掌味訓本的HTML標簽，乃至?些?較新的H5標簽，?如<header> <footer> ，
2.掌味訓本的CSS選擇器使?，CSS屬性的使? 行內樣式、*選擇器、id選擇器、類選擇器、標簽選擇器 塊級元素和?內元素各有哪些 CSS盒模型 ?種常見的定位
在這個練習專案中，主要模仿了QQ音樂網頁端的4大板塊：
1.頂部導航欄
2.歌單推薦
3.新歌首發
4.底部著作權、外鏈部分設計
一、 頂部導航欄設計< Header >
HTML
<!-- 頭部 -->
<div class="header">
<div class="nav inner">
<div class="nav_t">
<div class="logo">
<a href="#"><img src="../pics/(head)logo@2x.png" alt="" /></a>
</div>
<div class="top_nav__item">
<ul>
<li><a href="#" class="current" title ="音樂館">音樂館</a></li>
<li><a href="#" title="我的音樂">我的音樂</a></li>
<li><a href="#" title="客戶端">客戶端</a></li>
<li><a href="#" title="開放平臺">開放平臺</a></li>
<li><a href="#" title="VIP">VIP</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder=" 搜索音樂、MV、歌單、用戶" />
<i></i>
</div>
<div class="header_buttons">
<a href="#" class="sumbit">登錄</a>
<a href="#" class="start">開通VIP</a>
<a href="#" class="pay">充值</a>
</div>
</div>
<div class="nav_b">
<ul>
<li>
<a class="current" 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="#">MV</a>
</li>
<li>
<a href="#">數字專輯</a>
</li>
<li>
<a href="#">票務</a>
</li>
</ul>
</div>
</div>
</div>
<div class="cl"></div>
CSS
.nav{
width: 1200px;
height: 142px;
}
.nav .nav_t{
width: 1200px;
height: 90px;
border-bottom: 1px solid #F2F2F2;
}
.nav .nav_t .logo{
float: left;
}
.nav .nav_t .logo a img{
display: block;
width: 170px;
height: 46px;
padding-top: 22px;
}
.nav .nav_t .top_nav__item{
float: left;
overflow: hidden;
}
.nav .nav_t .top_nav__item ul{
list-style: none;
margin-left: 30px;
height: 90px;
}
.nav .nav_t .top_nav__item ul li{
float: left;
}
.nav .nav_t .top_nav__item ul li a{
display: block;
padding: 0 19px;
text-decoration: none;
color: #333;
font-size: 18px;
line-height: 90px;
}
.nav .nav_t .top_nav__item ul li a:hover{
color:#31c27c;
}
.nav .nav_t .top_nav__item ul li .current{
background-color: #31c27c;
color:white;
}
.nav .nav_t .top_nav__item ul li .current:hover{
color: white;
}
.nav .nav_t .search{
float: left;
overflow: hidden;
margin:26px 0 0 10px;
border: 1px solid #F2F2F2;
border-radius: 5px;
position: relative;
}
.nav .nav_t .search input{
width: 225px;
height: 40px;
text-shadow: none;
border: 1px solid #999;
border-radius: 3px;
font-size: 14px;
}
.nav .nav_t .search i{
width: 17px;
height: 17px;
position: absolute;
right: 25px;
top: 15px;
background-repeat: no-repeat;
background-position: 0 -40px;
}
.nav .nav_t .header_buttons{
width: 260px;
height: 90px;
float: right;
}
.nav .nav_t .header_buttons a{
display: block;
float: left;
margin-top: 24px;
text-decoration: none;
color: #333;
font-size: 13px;
}
.nav .nav_t .header_buttons .sumbit{
margin-top: 0px;
font-size: 16px;
line-height: 90px;
}
.nav .nav_t .header_buttons .start{
width: 91px;
height: 36px;
line-height: 36px;
text-align: center;
padding: 0 9px;
margin-left: 20px;
border:1px solid #2caf6f;
background-color: #2caf6f;
color: white;
border-radius: 3px;
}
.nav .nav_t .header_buttons .start:hover{
background-color:#279c63;
}
.nav .nav_t .header_buttons .pay{
width: 65px;
height: 36px;
border:1px solid #ccc;
padding: 0 9px;
margin-left:10px;
text-align: center;
line-height: 36px;
border-radius: 3px;
}
.nav .nav_t .header_buttons .pay:hover{
background-color:#ededed;
}
.nav .nav_b{
width: 1020px;
height: 50px;
padding-left: 230px;
}
.nav .nav_b ul{
list-style: none;
}
.nav .nav_b ul li{
float: left;
margin-right: 47px;
line-height: 50px;
text-align: center;
}
.nav .nav_b ul li a{
text-decoration: none;
color: #333;
font-size: 15px;
}
.nav .nav_b ul li .current{
color:#31c27c ;
}
.nav .nav_b li a:hover{
color:#31c27c ;
}
二、內容版塊設計< content >
歌單推薦
<!-- 歌單推薦 -->
<div class="content">
<div class="inner">
<div class="songSheet">
<div class="songSheet_head">
<span class="subtitle">歌 單 推 薦</span>
</div>
<div class="songSheet_table">
<ul>
<li>
<a href="#" class="current">為你推薦</a>
</li>
<li>
<a href="#">歐美榜單</a>
</li>
<li>
<a href="#">國語</a>
</li>
<li>
<a href="#">粵語精選</a>
</li>
<li>
<a href="#">00年代</a>
</li>
<li>
<a href="#">純音樂</a>
</li>
</ul>
</div>
<div class="songSheet_pics">
<ul>
<li>
<img src="../pics/RS1.webp" alt="" class="songSheet_pic"/>
<i class="mask"></i>
<i class="cover_icon_play"></i>
</li>
<li>
<img src="../pics/RS2.webp" alt="" class="songSheet_pic"/>
<i class="mask"></i>
<i class="cover_icon_play"></i>
</li>
<li>
<img src="../pics/RS3.jpeg" alt="" class="songSheet_pic"/>
<i class="mask"></i>
<i class="cover_icon_play"></i>
</li>
<li>
<img src="../pics/RS4.jpeg" alt="" class="songSheet_pic"/>
<i class="mask"></i>
<i class="cover_icon_play"></i>
</li>
<li>
<img src="../pics/RS5.jpeg" alt="" class="songSheet_pic"/>
<i class="mask"></i>
<i class="cover_icon_play"></i>
</li>
</ul>
</div>
<div class="songSheet_names">
<ul>
<li>
<a href="">Live：林俊杰的那些神級現場</a>
<span>播放量：1353萬</span>
</li>
<li>
<a href="">Ed sheeran | 冬日旋律</a>
<span>播放量：441萬</span>
</li>
<li>
<a href="">蒸汽波 | 落日飛車</a>
<span>播放量：13.6萬</span>
</li>
<li>
<a href="">吉他指彈：大師經典作品集</a>
<span>播放量：13.5萬</span>
</li>
<li>
<a href="">2021年1月華語新歌推薦</a>
<span>播放量：135.1萬</span>
</li>
</ul>
</div>
<div class="songSheet_circles">
<ol>
<li class="current"></li>
<li></li>
</ol>
</div>
<div class="carrousel">
<a href="#" class="leftBtn"></a>
<a href="#" class="rightBtn"></a>
</div>
</div>
</div>
</div>
<div class="cl"></div>
CSS
/***************歌單推薦**********************************************/
.content{
width: 100%;
height: 550px;
background-color: #fafafa;
background-repeat: no-repeat;
background-position: center top;
}
.content .songSheet{
position: relative;
}
.content .songSheet .songSheet_head{
width: 100%;
height: 114px;
}
.subtitle{
display: block;
font-size: 30px;
font-weight: 400;
font-style: normal;
width: 196px;
height: 40px;
padding-top: 47px;
margin:0 auto;
}
/****上面***************************************************/
.content .songSheet .songSheet_table{
height: 50px;
overflow: hidden;
}
.content .songSheet .songSheet_table ul{
width: 650px;
list-style: none;
margin: 0 auto;
font-size: 15px;
}
.content .songSheet .songSheet_table ul li{
float: left;
margin: 0 24px;
}
.content .songSheet .songSheet_table ul li a{
display: block;
text-decoration: none;
color: #333;
}
.content .songSheet .songSheet_table ul li .current{
color: #31c27c;
}
.content .songSheet .songSheet_table ul li a:hover{
color: #31c27c;
}
.content .songSheet .songSheet_pics{
width: auto;
height: 224px;
padding-bottom: 20px;
}
.content .songSheet .songSheet_pics ul{
list-style: none;
}
.content .songSheet .songSheet_pics ul li{
position: relative;
width: 224px;
height: 224px;
float: left;
margin-right:16px;
border-radius: 2px;
overflow: hidden;
}
/* 滑鼠指向圖片 顯示播放按鈕及放大影片的實作 */
.cover_icon_play {
position: absolute;
left: 112px;
top: 112px;
margin: -35px;
width: 70px;
height: 70px;
filter: alpha(opacity=0);
opacity: 0;
transform: scale(.7) translateZ(0);
transition-property: opacity, transform;
transition-duration: .5s;
zoom:1
}
.mask {
position: absolute;
left: 0px;
top: 0px;
width: 224px;
height: 224px;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
transition: opacity .5s;
transition:opacity .5s
}
.songSheet_pics ul li:hover .cover_icon_play {
opacity: 0.9;
transform: scale(1) translateZ(0);
transition-property: opacity, transform;
transition-duration: .5s;
cursor:pointer
}
.songSheet_pics ul li:hover .cover_icon_play, .cover_icon_play {
background-image: url(../pics/video.png);
background-repeat: no-repeat;
}
.songSheet_pics ul li:hover .songSheet_pic{
transform: scale(1.06);
}
.songSheet_pics ul li:hover .cover_icon_play {
opacity: 1;
filter:none
}
.songSheet_pics ul li:hover .mask {
opacity: .2;
filter: alpha(opacity=20);
transition: opacity .5s;
transition:opacity .5s
}
/* 影片效果部分完結 */
.content .songSheet .songSheet_pics ul li img{
width: 224px;
height: 224px;
transition: all 0.6s;
}
.content .songSheet .songSheet_names{
width: auto;
height: 76px;
padding-bottom: 10px;
}
.content .songSheet .songSheet_names ul{
list-style: none;
margin-left: px;
}
.content .songSheet .songSheet_names ul li{
width: 224px;
position: relative;
float: left;
font-size: 14px;
font-weight: 400;
margin-right: 16px;
}
.content .songSheet .songSheet_names ul li a{
display: block;
text-decoration: none;
color: #333;
line-height: 22px;
}
.content .songSheet .songSheet_names ul li a:hover{
color:#31c27c;
}
.content .songSheet .songSheet_names ul li span{
display: block;
font-size: 14px;
line-height: 21px;
color: #999;
}
/* 左右按鈕 */
.content .songSheet .songSheet_circles{
height: 38px;
}
.content .songSheet .songSheet_circles ol{
list-style: none;
width: 60px;
height: 10px;
margin: 15px auto;
line-height: 38px;
}
.content .songSheet .songSheet_circles ol li{
float: left;
margin: 0 10px;
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.content .songSheet .songSheet_circles ol .current{
background-color: rgba(0,0,0,.3)
}
.content .songSheet .carrousel a{
display:block;
width: 20px;
height: 38px;
position: absolute;
top: 250px;
background-image: url(../pics/icon.png);
background-repeat: no-repeat;
}
.content .songSheet .carrousel .leftBtn{
left:-80px;
background-position: -20px -120px;
}
.content .songSheet .carrousel .rightBtn{
right: -80px;
background-position: 0 -120px;
}
新歌首發
HTML
<!-- 新歌首發 -->
<div class="content">
<div class="inner">
<div class="songSheet">
<div class="songSheet_h new">
<span class="subtitle">新 歌 首 發</span>
</div>
<a href="#" class="playall"><i></i>播放全部</a>
<div class="songSheet_table area">
<ul>
<li>
<a href="#" class="current">內地</a>
</li>
<li>
<a href="#">港臺</a>
</li>
<li>
<a href="#">歐美</a>
</li>
<li>
<a href="#">日本</a>
</li>
<li>
<a href="#">韓國</a>
</li>
</ul>
</div>
<div class="newsongs">
<ul>
<li class="firstline">
<img src="../pics/NS1.webp" title ="No One Knows" class="newsongs_pics"/>
<a href="#" title="No One Knows 《南方有喬木》電視劇插曲" class="current">No One Knows 《南方有喬木...</a>
<a href="#" class="songer" title="汪蘇瀧">汪蘇瀧</a>
<span>3:55</span>
<i class="mask2"></i>
<i class="cover_icon_play2"></i>
</li>
<li class="firstline">
<img src="../pics/NS2.webp" title ="遠大前程" class="newsongs_pics"/>
<a href="#" title="遠大前程">遠大前程</a>
<a href="#" class="songer" title="南征北戰NZBZ">南征北戰NZBZ</a>
<span>3:23</span>
<i class="mask2"></i>
<i class="cover_icon_play2"></i>
</li>
<li class="firstline">
<img src="../pics/NS3.webp" title ="想你的一夜" class="newsongs_pics"/>
<a href="#" title="想你的一夜">想你的一夜</a>
<a href="#" class="songer" title="孫子涵">孫子涵</a>
<span>3:55</span>
<i class="mask2"></i>
<i class="cover_icon_play2"></i>
</li>
<li>
<img src="../pics/NS4.webp" title ="《北京女子圖鑒》網路劇主題曲" class="newsongs_pics"/>
<a href="#" title="《北京女子圖鑒》網路劇主題曲">送你一匹馬 《北京女子...</a>
<a href="#" class="songer" title="金志文">金志文</a>
<span>2:56</span>
<i class="mask2"></i>
<i class="cover_icon_play2"></i>
</li>
<li>
<img src="../pics/NS5.webp" title ="十八歲給我一個姑娘" class="newsongs_pics"/>
<a href="#" title="十八歲給我一個姑娘">十八歲給我一個姑娘 《十八歲</a>
<a href="#" class="songer" title="好妹妹樂隊">好妹妹樂隊</a>
<span>4:02</span>
<i class="mask2"></i>
<i class="cover_icon_play2"></i>
</li>
<li>
<img src="../pics/NS6.webp" title ="《新笑傲江湖》電視劇插曲" class="newsongs_pics"/>
<a href="#" title="《新笑傲江湖》電視劇插曲">落花 《新笑傲江湖》電視劇插..</a>
<a href="#" class="songer" title="李琦">李琦</a>
<span>3:35</span>
<i class="mask2"></i>
<i class="cover_icon_play2"></i>
</li>
<li>
<img src="../pics/NS7.webp" title ="Sorry" class="newsongs_pics"/>
<a href="#" title="Sorry">Sorry</a>
<a href="#" class="songer" title="艾福杰尼">艾福杰尼</a>
<span>5:07</span>
<i class="mask2"></i>
<i class="cover_icon_play2"></i>
</li>
<li>
<img src="../pics/NS8.webp" title ="我不想哭" class="newsongs_pics"/>
<a href="#" title="我不想哭">我不想哭</a>
<a href="#" class="songer" title="晨曦">晨曦</a>
<span>4:12</span>
<i class="mask2"></i>
<i class="cover_icon_play2"></i>
</li>
<li>
<img src="../pics/green book 2.jpg" title ="花開" class="newsongs_pics"/>
<a href="#" title="花開">花開</a>
<a href="#" class="songer" title="陳粒">陳粒</a>
<span>3:46</span>
<i class="mask2"></i>
<i class="cover_icon_play2"></i>
</li>
</ul>
</div>
<div class="songSheet_circles">
<ol class="four">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div class="carrousel">
<a href="#" class="leftBtn"></a>
<a href="#" class="rightBtn"></a>
</div>
</div>
</div>
</div>
<div class="cl"></div>
CSS
/********************新歌首發*********************************************/
.content .songSheet .new h2 span{
background-position: 0 -50px;
}
.content .songShee .playall a{
display: block;
width: 75px;
height: 36px;
position: absolute;
z-index: 3;
}
.content .songSheet .area ul{
width: 390px;
margin-top: 30px;
}
.content .songSheet .playall{
position: absolute;
left: 0;
top: initial;
border: 1px solid #c9c9c9;
color: #000;
margin-top: 20px;
border-radius: 2px;
font-size: 14px;
margin-right: 6px;
padding: 0 23px;
height: 38px;
line-height: 38px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
transition: all 0.6s;
filter: brightness(100%);
}
.content .songSheet .playall:hover{
background-color: #ededed;
filter: brightness(95%);
}
.content .songSheet .newsongs{
width: 1230px;
height: 333px;
}
.content .songSheet .newsongs ul{
list-style: none;
margin-top: 40px;
}
.content .songSheet .newsongs ul li{
width: 410px;
height: 86px;
float: left;
font-size: 14px;
color: #333;
position: relative;
border-top: 1px solid #ededed;
padding: 10px 0 10px 0;
}
.content .songSheet .newsongs ul .firstline{
border-top: none;
}
.content .songSheet .newsongs ul li .current{
color: #31c27c;
}
.content .songSheet .newsongs ul li img{
width: 86px;
height: 86px;
float: left;
transition: all 0.6s;
}
/* 滑鼠指向圖片 顯示播放按鈕及放大影片的實作 */
.cover_icon_play2 {
position: absolute;
left: 17px;
top: 30px;
margin: -13.4375px;
width: 86px;
height: 86px;
filter: alpha(opacity=0);
opacity: 0;
transform: scale(.1) translateZ(0);
transition-property: opacity, transform;
transition-duration: .5s;
zoom:1
}
.mask2 {
position: absolute;
left: 0px;
top: 10px;
width: 86px;
height: 86px;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
transition: opacity .5s;
transition:opacity .5s
}
.content .songSheet .newsongs ul li:hover .cover_icon_play2 {
opacity: 0.9;
transform: scale(0.5) translateZ(0);
transition-property: opacity, transform;
transition-duration: .5s;
cursor:pointer
}
.content .songSheet .newsongs ul li:hover .cover_icon_play2, .cover_icon_play2 {
background-image: url(../pics/video.png);
background-repeat: no-repeat;
}
.content .songSheet .newsongs ul li:hover .newsongs_pics{
transform: scale(1.06)
}
.content .songSheet .newsongs ul li:hover .cover_icon_play2 {
opacity: 1;
filter:none
}
.content .songSheet .newsongs ul li:hover .mask2 {
opacity: 0.2;
filter: alpha(opacity=20);
transition: opacity .5s;
transition:opacity .5s
}
/* 影片效果完結 */
.content .songSheet .newsongs ul li a{
display: block;
width: 310px;
line-height: 22px;
float: left;
padding: 20px 0 0 10px;
text-decoration: none;
color: #333;
}
.content .songSheet .newsongs ul li .songer{
color: #999;
padding-top: 0px;
}
.content .songSheet .newsongs ul li a:hover{
color:#31c27c;
}
.content .songSheet .newsongs ul li span{
display: block;
position: absolute;
right: 35px;
top: 45px;
color: #999;
font-family: "poppin";
}
.content .songSheet .songSheet_circles .four{
width: 120px;
}
三、底部著作權、外鏈部分設計< footer >
HTML
<!-- 尾部 -->
<div class="footer">
<div class="inner">
<div class="footer_h">
<div class="info client">
<h3>下載QQ音樂客戶端</h3>
<ul>
<li>
<a href="#" class="pc current"> <span>Pc版</span></a>
</li>
<li>
<a href="#" class="mac"><span>Mac版</span></a>
</li>
<li>
<a href="#" class="android"><span>Android版</span></a>
</li>
<li>
<a href="#" class="iphone"><span>iPhone版</span></a>
</li>
</ul>
</div>
<div class="info client special">
<h3>特色產品</h3>
<ul>
<li >
<a href="#" class="kge"><span>全民K歌</span></a>
</li>
<li >
<a href="#" class="super"><span>Super Sound</span></a>
</li>
<li >
<a href="#" class="Qp"><span>QPlay</span></a>
</li>
<li class="none"><a href="#"><span>車載互聯</span></a></li>
<li class="none"><a href="#"><span>QQ演出</span></a></li>
</ul>
</div>
<div class="info client nomargin links">
<h3>合作鏈接</h3>
<ul>
<li><a href="#">CJ E&M</a></li>
<li><a href="#">騰訊視頻</a></li>
<li><a href="#">手機QQ空間</a></li>
<li><a href="#">最新版QQ</a></li>
<li><a href="#">騰訊社交廣告</a></li>
<li><a href="#">電腦管家</a></li>
<li><a href="#">QQ瀏覽器</a></li>
<li><a href="#">騰訊微云</a></li>
<li><a href="#">騰訊云</a></li>
<li><a href="#">企鵝FM</a></li>
<li><a href="#">智能電視網</a></li>
<li><a href="#">當貝市場</a></li>
</ul>
</div>
</div>
<div class="cl"></div>
<div class="footer_platform">
<h3>開放平臺</h3>
<ul>
<li><a href="#">騰訊音樂人平臺</a></li>
<li><a href="#">音樂號認證</a></li>
<li><a href="#">上傳視頻</a></li>
<li><a href="#">上傳音頻</a></li>
</ul>
</div>
<div class="footer_copyright">
<p>
<a href="#">關于騰訊</a> |
<a href="#">About Tencent</a> |
<a href="#">服務條款</a> |
<a href="#">用戶服務協議</a> |
<a href="#">隱私政策</a> |
<a href="#">權利宣告</a> |
<a href="#">廣告服務</a> |
<a href="#">騰訊招聘</a> |
<a href="#">客服中心</a> |
<a href="#">網站導航</a> |
</p>
<p>Copyright ? 1998 - 2018 Tencent. by <a href="#">Cty</a><a href="#">All Rights Reserved.</a></p>
<p>騰訊公司
<a href="#">著作權所有</a>
<a href="#">騰訊網路文化經營許可證</a>
</p>
</div>
</div>
</div>
<!-- 右側反饋條 -->
<div class="feedback">
<a href="#" class="up"><span></span></a>
<a href="#" class="information"><span>反饋</span></a>
<a href="#" class="down"><span></span></a>
</div>
CSS
.footer{
width: 100%;
height: 590px;
background-color: #333;
font-family: "poppin";
}
.footer .footer_h .info{
width: 360px;
height: 230px;
float: left;
margin-right: 50px;
}
.footer .footer_h .client h3{
color: #999;
font-size: 15px;
font-weight: 400;
padding: 80px 0 46px 0 ;
}
.footer .footer_h .client ul{
list-style: none;
}
.footer .footer_h .client ul li{
float: left;
width: 90px;
height: 80px;
font-family: "poppin";
}
.footer .footer_h .client ul li a{
display: block;
width: 60px;
height: 48px;
margin:0 29px 12px 0;
background-image: url(../pics/footer.png);
background-repeat: no-repeat;
text-decoration: none;
}
.footer .footer_h .client ul li .pc{background-position: 12px -5px;}
.footer .footer_h .client ul li .mac{background-position: -80px -5px;}
.footer .footer_h .client ul li .android{background-position: -174px -5px;}
.footer .footer_h .client ul li .iphone{background-position: -261px -5px;}
.footer .footer_h .client ul li .current{
background-position: 12px -54px;
color: #31c27c;
}
.footer .footer_h .client ul li .pc:hover{background-position: 12px -54px;}
.footer .footer_h .client ul li .mac:hover{background-position: -80px -54px;}
.footer .footer_h .client ul li .android:hover{background-position: -174px -54px;}
.footer .footer_h .client ul li .iphone:hover{background-position: -261px -54px;}
.footer .footer_h .client ul li span{
display: block;
width: 70px;
height: 60px;
color: #999;
font-size: 14px;
text-align: center;
cursor: pointer;
padding-top: 55px;
}
.footer .footer_h .client ul li span:hover{
color: #31c27c;
}
.footer .footer_h .special ul li{
width: 110px;
}
.footer .footer_h .special ul li a span{
width: 110px;
text-align: left;
}
.footer .footer_h .special ul li .kge{background-position: -360px -5px;}
.footer .footer_h .special ul li .super{background-position: -446px -5px;}
.footer .footer_h .special ul li .Qp{background-position: -557px -5px;}
.footer .footer_h .special ul li .kge:hover{background-position: -360px -54px;}
.footer .footer_h .special ul li .super:hover{background-position: -446px -54px;}
.footer .footer_h .special ul li .Qp:hover{background-position: -557px -54px;}
.footer .footer_h .special ul .none a{
background-image: none;
}
.footer .footer_h .special ul .none a span{
width: 110px;
height: 30px;
padding-top: 15px;
}
.footer .footer_h .links ul {
list-style: none;
}
.footer .footer_h .links ul li{
width: 120px;
height: 30px;
line-height: 30px;
float: left;
font-size: 14px;
}
.footer .footer_h .links ul li a{
background-image: none;
display: block;
width: 110px;
height: 30px;
text-decoration: none;
color: #999;
}
.footer .footer_h .links ul li a:hover{
color: #31c27c;
}
.footer .footer_platform{
width: 1200px;
height: 200px;
padding-bottom: 45px;
}
.footer .footer_platform h3{
padding:80px 0 46px 0;
font-size: 15px;
color: #999;
font-weight: 400;
}
.footer .footer_platform ul{
list-style: none;
}
.footer .footer_platform ul li{
float: left;
padding: 0 5px 12px 0;
}
.footer .footer_platform ul li a{
padding-right: 30px;
text-decoration: none;
color: #999;
font-size: 14px;
}
.footer .footer_platform ul li a:hover{
color: #31c27c;
}
.footer .footer_copyright p{
line-height: 28px;
text-align: center;
color: #999;
font-size: 12px;
}
.footer .footer_copyright p a{
text-decoration: none;
color: #999;
padding: 0 2px;
}
.footer .footer_copyright p a:hover{
color: #31c27c;
}
.feedback{
width: 40px;
height: 130px;
position: fixed;
bottom: 50px;
right: 50px;
}
.feedback a{
display: block;
width: 40px;
height: 40px;
margin-bottom: 2px;
border: 1px solid #ccc;
text-decoration: none;
color: black;
font-size: 14px;
background-color: #fff;
transition: all 0.6s;
filter: brightness(100%);
}
.feedback a:hover{
background-color: #fff;
color: #31c27c;
filter: brightness(90%);
}
.feedback a span{
display: block;
width: 18px;
height: 10px;
margin: 15px 10px 0 10px;
background-image: url(../pics/icon.png);
background-repeat: no-repeat;
}
.feedback .up span{background-position: -160px 0;}
.feedback .information span{
width: 30px;
line-height: 22px;
background-image: none;
margin:10px 10px 10px 5px;
}
.feedback .down span{
width: 13px;
height: 16px;
margin:12px 10px 0 13px;
background-position: -60px -220px}
四、關于不同瀏覽器格式的統一
CSS
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}#yui3-css-stamp.cssreset{display:none}
五、完整代碼行
鏈接:
六、完整代碼實作效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253108.html
標籤：其他
上一篇：一對一直播腳本的開發與應用
下一篇：跟隨滑鼠移動的盒子