位置: IT常识 - 正文
推荐整理分享HTML唱吧导航栏(唱吧地图)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:html唱吧导航栏图片,唱吧界面,唱吧导唱怎么调成原唱,唱吧控制台,唱吧地图,html唱吧导航栏图片,html唱吧导航栏案例代码,唱吧导航栏网页制作,内容如对您有帮助，希望把文章链接给更多的朋友！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>唱吧导航栏</title> <link href="../css/5-17.css" type="text/css" rel="stylesheet"/> <style> body,h1,h2,h3,ul,li,img,p{padding: 0;margin: 0;list-style: none;border: 0;} body{font-size: 14px;font-family: "宋体";color: #fff;} .all{ width: 952px; height: 175px; margin: 50px auto; padding: 0 14px; background: #f6f3e9; border: 1px solid #ccc; } .text{ height: 50px; line-height: 50px; color: #a84848; } .text h2 { width: 175px; padding-left: 32px; font-size: 16px; background: url(../img/iconh.png) no-repeat left center; float: left; } .text a { display: inline-block; width: 60px; padding-left: 25px; float: right; font-weight: bold; font-size: 14px; } .text a:link,.text a:visited { color: #a84848; text-decoration: none; background: url(../img/play1.png) no-repeat left center; } .text a:hover{color: #000000; background: url(../img/play2.png) no-repeat left center; } .con li {width: 148px; height: 105px; float: left; padding: 20px 0 0 90px; } .radio {background: #52a6b6 url(img/icon1.png) no-repeat 15px 15px;} .radio:hover {background: #313131 url(img/icon5.png) no-repeat 15px 15px;} .song {background: #52a6b6 url(img/icon2.png) no-repeat 15px 15px;} .song:hover {background: #313131 url(img/icon6.png) no-repeat 15px 15px;} .album {background: #52a6b6 url(img/icon3.png) no-repeat 15px 15px;} .album:hover {background: #313131 url(img/icon7.png) no-repeat 15px 15px;} .mv {background: #52a6b6 url(img/icon4.png) no-repeat 15px 15px;} .mv:hover {background: #313131 url(img/icon8.png) no-repeat 15px 15px;} .radio h2,song h2,.album h2,.mv h2{font-size: 44px;} .radio p,.song p,.album p,.mv p{line-height: 22px;} .radio a:link,.radio a:visited,.song a:link,.song a:visited,.album a:link,.album a:visited,.mv a:link,.mv a:visited{ color: #fff; text-decoration: none; } </style> </head> <body> <div class="all"> <div class="text"> <h2>MUSIC--精选歌单</h2> <a href="#">连播本页</a> </div> <ul class="con"> <li class="song"> <h2>Song</h2> <p>音乐达人</p> <p><a href="#">随便听听</a></p> </li> <li class="radio"> <h2>Radio</h2> <p>音乐达人</p> <p><a href="#">音乐专辑</a></p> <li class="album"> <h2>Album</h2> <p>音乐达人</p> <p><a href="#">最新单曲</a></p> </li> <li class="mv"> <h2>MV</h2> <p>音乐达人</p> <p><a href="#">劲爆MV</a></p> </li> </ul> </div> </body> </html>
上一篇：YOLOv5图像分割--SegmentationModel类代码详解(yolov3图像识别)
下一篇：vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能)(vue 跳转页面)