html+css简单的歌曲列表和⼆级⽔平菜单
简单的歌曲播放列表
利⽤a:hover加上div就出现⿏标在链接上就会出现⼀个说明的div
html：
css <!DOCTYPE html>
<html>
<head>
<title>歌曲编辑列表</title>
<link rel="stylesheet"type="text/css"href="../css/gequ.css">
</head>
<body>
<h3>最新单曲</h3>
<ul>
<li><a href="#">01 爱的纹⾝<div><img src=""alt=""/>
<dl>
<dd><span>歌名:</span>爱的纹⾝</dd>
<dd><span>歌⼿:</span>黄圣依</dd>
<dd><span>介绍:</span>黄圣依唱⽚主打歌的确是她个⼈的内⼼写照，《爱的纹⾝》由⾹港⼤师⾦培达作曲，制作⼈陈少琪亲⾃填词</dd> </dl></div></a><audio src="../music/1.mp3"controls="autoplay"></audio></li>
<li><a href="#">02 累了阿信<div><img src=""alt=""/>
<dl>
<dd><span>歌名:</span>累了</dd>
<dd><span>歌⼿:</span>阿信</dd>
<dd><span>介绍:</span>很嗨即可将</dd>
</dl></div></a><audio src="../music/1.mp3"controls="autoplay"></audio>
</li>
</ul>
</body>
</html>
<!--
在a标签之内加⼊div div内可以加⼊⽂字和图⽚
使⽤a:hover 当⿏标悬浮在链接就出现这种效果
-->
*{
/*使⽤通配符把外边距和内边距全部设置为0 才能聚集⼀起*/
padding: 0px;
margin: 0px;
}
h3{
background: red;
color: white;
width: 100px;
text-align: center;
padding-top: 3px;
}
a:link{
text-decoration: none; /*去除链接下划线记不牢*/
}
body{
font-size: 20px;
margin: 10px;
}
ul li{
list-style: none; /*去除圆点记不牢*/
padding: 10px;
border-bottom: 1px solid #F60;
}
ul{
width: 00px;
border-top: 1px solid #F60;
padding: 9px;
}
a{
position: relative;
display: block;
/*让链接呈块状呈现，这样可以不⽤点链接⽂字就可以响应链接*/
}
a div{display: none;
/*初始化版⾯不显⽰即只有在⿏标移动在链接时才显⽰*/}
a:hover div{
css最新position: absolute;
padding: 5px;
display: block;
width: 300px; /*只给出宽度⾼度⾃动调整*/
left: 120px;
top: 20px;
border: 1px solid rgb(91,185,233); /*给弹出的窗体加上边框*/
background-color:rgb(228,246,255);
z-index: 999; /*提⾼⾯板信息，使链接⽂字过长时不会与⾯板重叠*/
}
a img{
width: 180px;
height: 180px;
border: none;
display: block;
position: absolute;
top: 5px;
left: 5px;
}
dl{width: 160px;float: right;line-height: 50px;}
dl dd span{font-weight: bold;}
/*链接颜⾊没有调*/
运⾏结果：
⼆级⽔平菜单
利⽤ li:hover ul 与上⾯⼀个差不多。html代码
<!DOCTYPE html>
<html>
<head>
<title>⼆级菜单</title>
<style type="text/css">
ul.a{
list-style-type: none;
}
ul.a li{
float: left;
list-style-type: none;
width: 100px;
background: red;
text-align: center;
}
ul.a li a{
ul.a li a{
display: block;
}
a{
text-decoration: none;
color: white;
}
a:hover{
background: black;
}
ul.a li:hover ul{ /*注意是li hover*/
left: auto;
display: block;
}
ul.a li ul li a:hover{
background: black;
}
ul.a li ul{
display: none;
}
ul.a li ul li{
width: 60px;
text-align:left;
}
</style>
</head>
<body>
<ul class="a">
<li><a href="#">第⼀</a>
<ul ><li><a href="#">第⼀</a></li>
<li><a href="#">第⼆</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第四</a></li></ul>
</li>
<li><a href="#">第⼆</a>
<ul >
<li><a href="#">第⼀</a></li>
<li><a href="#">第⼆</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第四</a></li>
</ul>
</li>
<li><a href="#">第三</a>
<ul ><li><a href="#">第⼀</a></li>
<li><a href="#">第⼆</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第四</a></li></ul>
</li>
<li><a href="#">第四</a>
<ul ><li><a href="#">第⼀</a></li>
<li><a href="#">第⼆</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第四</a></li></ul>
</li>
</ul>
</body>
</html>
<!-- 基本算是完成了花费了⽐较多的时间
功能实现样式瑕疵在⼆级菜单的长度与第⼀栏⼀样长不美观调了20多分钟没有把长度减短就放弃了
等过段时间精确掌握在来修改
完成度80%-->
运⾏结果：
⼼得：
使⽤了a:hover div 就能显⽰出像有窗体的效果 。
但是需要注意在初始化时 就是才加载⽹页时 链接不不应该出现⾯板信息 所以需要 display:none;
才开始怎么调整都不怎么能把页⾯排在⼀起 以致于上下划线总是离得很远 使⽤通配符 *{} 把内边距和外边距调为0就解决了。
css和html个别标签样式记不牢固。
对于display有些模糊。
需要多加练习。
参考书籍
100%动态⽹页设计密码
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论