【QQ音乐Html + CSS静态笔记】
生活随笔
收集整理的這篇文章主要介紹了
【QQ音乐Html + CSS静态笔记】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?最大的<div>表示全頭部? div表示盒子的意思
<div class="header"></div>?第二個div表示上圖的所有? 表示一個div盒子將5部分裝起來? ?
<div class="header"><div class="nav"></div> </div>我們將將1234放在一個盒子里面? ?分別做成不同的div盒子
<div class="header"><div class="nav"><div class="nav_t"></div></div> </div>先加圖片
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div></div></div> </div>效果是這樣的?
?明顯圖片的比例不太對? 我們給class=nav的? div加上寬高? ?新建css文件 和html在同一個文件下
/*導航頭部加寬高*/ .nav{width: 100%;height: 142px; } /*導航第一部分加效果*/ .nav .nav_t{width: 100%;height: 90px;border-bottom: 1px solid #F2F2F2; }引入css樣式?
在html的header里面添加
<link rel="stylesheet" href="header.css">查看效果 據左上角??
?添加居中 離開坐標的效果
在css文件里面加
/*logo浮動居左 和左邊間隔10像素*/ .nav .nav_t .logo{float: left;margin-left: 10px;} /*圖片設置寬高 和距離上面的位置 左邊的位置 */ .nav .nav_t .logo a img{display: block;width: 170px;height: 46px;padding-top: 22px;padding-left: 40px;}第二部分 左側文字? 看加的文字開始和結束 別全部抄
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div><!-- 左側文字導航--><div class="top_nav__item"><!-- 導航條左邊的列表--><ul><!--class="current 加背景 加title --><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></div> </div>?需要添加css樣式排版
/*向左浮動 和上邊距0px*/ .nav .nav_t .top_nav__item{float: left;overflow: hidden;margin-top: 0px; }?橫向排列的css
/*去掉列表前面的 點 · 設置列表的寬高 */ .nav .nav_t .top_nav__item ul{list-style: none;margin-left: 30px;margin-top: 0px;margin-bottom: 0px;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; }搜索框 制作
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div> <!-- 左側文字導航--><div class="top_nav__item"><!-- 導航條左邊的列表--><ul><!--class="current 加背景 加title --><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、歌單、用戶" /></div><!--搜索框結束--></div></div> </div>添加樣式
/*搜索框盒子div 靠在左側導航欄的右邊*/ .nav .nav_t .search{float: left;margin:26px 0 0 10px;border: 1px solid #F2F2F2;position: relative; }/*調整寬高 字體大小*/ .nav .nav_t .search input{width: 225px;height: 30px;font-size: 104px; }右邊部分
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div> <!-- 左側文字導航--><div class="top_nav__item"><!-- 導航條左邊的列表--><ul><!--class="current 加背景 加title --><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、歌單、用戶" /></div><!--搜索框結束--><!--導航右邊開始--><div class="header_buttons"><a href="#" class="sumbit">登錄</a><a href="#" class="start">開通VIP</a><a href="#" class="pay">充值</a></div><!--導航右邊結束--></div></div> </div>?添加樣式? 右對齊橫向分布
/*使整個右邊的div靠右 設置寬高*/ .nav .nav_t .header_buttons{width: 200px;height: 90px;float: right;position: relative;margin-right: 30px; }.nav .nav_t .header_buttons a{display: block;float: left;margin-top: 36px;text-decoration: none;color: #333;padding-right: 5px;font-size: 16px;margin-right: 20px; }添加文字的效果
/*登錄添加白色 背景邊框 保持一致 */ .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;} /*開通vip的添加效果*/ .nav .nav_t .header_buttons .start{margin-top: 28px;width: 91px;height: 36px;line-height: 36px;text-align: center;padding: 0 9px;margin-left: 10px;border:1px solid #2caf6f;background-color: #2caf6f;color: white;border-radius: 3px; } /*充值添加效果*/ .nav .nav_t .header_buttons .pay{width: 35px;height: 36px;border:1px solid #ccc;padding: 0 9px;margin-top: 28px;margin-left: 0px;text-align: center;line-height: 36px;border-radius: 3px; }添加第五部分
<div class="header"><div class="nav"><div class="nav_t"><div class="logo"><a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a></div> <!-- 左側文字導航--><div class="top_nav__item"><!-- 導航條左邊的列表--><ul><!--class="current 加背景 加title --><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、歌單、用戶" /></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></ul></div><!--第五部分結束--></div> </div>添加效果
/*添加樣式 寬高*/ .nav .nav_b{width: 1200px;height: 50px;align:center;margin: 0 auto ; } /*沒有序號的樣式 */ .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 ; }添加中間部分
<div class="content"></div>css?
/*添加中間div的背景顏色和寬高*/ .content{width: 100%;height: 550px;background-color: #fafafa;background-repeat: no-repeat;background-position: center top; } <div class="content"><div class="content"><div class="songSheet"></div></div> </div> <div class="content"><div class="content"><div class="songSheet"><div class="songSheet_head"><span class="subtitle">歌 單 推 薦</span></div></div></div> </div>css
/*設置表浮動*/ .content .songSheet{position: relative; } /*設置內容div的寬高*/ .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; }html
//和歌單推薦平級 <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>css
//表格的高.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;} //a標簽加效果.content .songSheet .songSheet_table ul li a{display: block;text-decoration: none;color: #333;} //第一個a標簽加顏色.content .songSheet .songSheet_table ul li .current{color: #31c27c;} //超鏈接加效果.content .songSheet .songSheet_table ul li a:hover{color: #31c27c;}html
//和上面平級 圖片自己改<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>css
/*添加寬高 */ .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(../pic/logo.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; }html
//平級<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>css
/*寬高*/ .content .songSheet .songSheet_names{width: auto;height: 76px;padding-bottom: 10px; } /*樣式*/ .content .songSheet .songSheet_names ul{list-style: none;margin-left: 0px; } /*li橫向展示*/ .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; } /*播放量span標簽*/ .content .songSheet .songSheet_names ul li span{display: block;font-size: 14px;line-height: 21px;color: #999; }html
//平級 表示歌曲海報下的下面的兩個點 和左右按鍵 <div class="songSheet_circles"><ol><li class="current"></li><li></li></ol></div><div class="carrousel"><a href="#" class="leftBtn"> <img src="pic/qq.png"></a><a href="#" class="rightBtn"><img src="pic/qq.png"></a></div>底部————————————————
<div id="b_div"><div id="b_t_div"><img src="5.jpg" ></div><div id="b_b_div"><div id="b_b_l_div"><ul><li>抵制不良游戲</li><li>拒絕盜版游戲</li><li>注意自我保護</li><li>謹防受騙上當</li><li>適度游戲益腦</li><li>沉迷游戲傷身</li><li>合理安排時間</li><li>享受健康生活</li></ul><p>《王者榮耀》全部背景故事發生于架空世界“王者大陸”中。相關人物、地理、事件均為 藝術創作，并非正史。若因觀看王者故事對相關歷史人物產生興趣，建議查閱正史記載。</p></div><div id="b_b_r_div"><div id="b_b_r_t_div"><p>騰訊互動娛樂|服務條款|隱私保護指引|兒童隱私保護指引|騰訊游戲招聘|騰訊游戲客服|游戲列表|廣告服務及商務合作</p><p>COPYRIGHT ? 1998 - 2022 TENCENT. ALL RIGHTS RESERVED. 騰訊公司版權所有 網絡游戲行業防沉迷自律公約</p></div><div id="b_b_r_b_div"><img id="img_2" src="https://game.gtimg.cn/images/js/2018foot/logo/gswj.png"><p>工商網監電子標識 |粵網文[2020]3396-195號|（署）網出證（粵）字第054號</p><img id="img_3" src="https://game.gtimg.cn/images/js/2018foot/logo/icplogo.png"><p>文網游備字[2016]M-CSG 0059 號|新廣出審[2017] 6712號|ISBN 978-7-7979-8408-9</p><span>仿王者榮耀制作 肖行</span></div></div></div> </div>css
#b_div{width: 1165px;height: 350px;margin-left: 150px;margin: 0 auto; } #b_t_div{width: 1165px;height: 80px;margin-bottom: 20px; } #b_b_div{display: inline-block;width: 100%;height: 200px;overflow: hidden; } #b_b_l_div{width: 510px;height: 200px;float: left; } #b_b_r_div{width: 500px;height: 200px;float: right; } #b_b_r_t_div{width: 630px;height: 80px; } #b_b_r_b_div{width: 630px;height: 80px;position: relative; } #b_b_l_div>ul{list-style-type: none;overflow: hidden; } #b_b_l_div>ul>li{width: 72px;height: 16px;line-height: 16px;font-size: 12px;color: #6D6D6D;float: left;margin-top: 12px;margin-right: 12px; } #b_b_l_div>p{padding-left: 38px;color: #666666;font-size: 12px;margin-top: 6px; } #b_b_r_t_div>p{color: #646467;font-size: 12px;margin-top: 12px;margin-bottom: 12px; } #b_b_r_b_div>p{display: block;margin-left: 15px;color: #646467;font-size: 12px;margin-top: 0;margin-bottom: 12px;position: relative;top: 0; } #img_2{position: absolute;top:1px; } #img_3 {position: absolute; } #b_b_r_b_div>span{color: #666666;font-size: 12px;margin-top: 40px; }總結
以上是生活随笔為你收集整理的【QQ音乐Html + CSS静态笔记】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机高级语言与型号是否有关,高级语言与
- 下一篇： 预备篇 I ：范畴与函子