时间：2023-07-06 03:00:02 | 来源：网站运营
时间：2023-07-06 03:00:02 来源：网站运营
育知前端开发培训 定位属性、列表的高级应用及带有图片列表的网页制作（中）：五、 列表标签的高级应用<!DOCTYPE html>CSS代码：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<h3><span>最新单曲</span></h3>
<ul>
<li><a href="#">01 爱的纹身 黄圣依</a>
<dl>
<dt><img src="img/a.jpg"></dt>
<dd><p><span>哥名:</span>爱的纹身</p>
<p><span>哥首:</span>黄圣依</p>
<p><span>简介:</span>爱的纹身爱的纹纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身</p>
</dd>
</dl>
</li>
<li><a href="#">02 爱的纹身 孙燕子</a>
<dl>
<dt><img src="img/a1.jpg"></dt>
<dd><p><span>哥名:</span>爱的纹身</p>
<p><span>哥首:</span>黄圣依</p>
<p><span>简介:</span>爱的纹身爱的纹纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身</p>
</dd>
</dl>
</li>
<li><a href="#">03 爱的纹身 王宝强</a>
<dl>
<dt><img src="img/hou.jpg"></dt>
<dd><p><span>哥名:</span>爱的纹身</p>
<p><span>哥首:</span>黄圣依</p>
<p><span>简介:</span>爱的纹身爱的纹纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身</p>
</dd>
</dl>
</li>
<li><a href="#">04 爱的纹身 宋吉吉</a>
<dl>
<dt><img src="img/huang.jpg"></dt>
<dd><p><span>哥名:</span>爱的纹身</p>
<p><span>哥首:</span>黄圣依</p>
<p><span>简介:</span>爱的纹身爱的纹纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身爱的纹身</p>
</dd>
</dl>
</li>
<li><a href="#">05 爱的纹身 林丹</a></li>
</ul>
</body>
</html>
*{显示效果：
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 615px;
margin: 0 auto;
font-size: 12px;
font-family: 微软雅黑,microsoft yahei;
}
ul,h3{
list-style: none;
width: 300px;
}
h3{
border-bottom: 1px solid #ff9900;
height: 30px;
line-height: 30px;
}
h3 span{
background: #ff9900;
padding: 6px 24px;
color: #fff;
}
li{
line-height:33px ;
border-bottom: 1px solid #333;
font-size: 14px;
position: relative;
}
li a{
color: #333;
text-decoration: none;
}
li a:hover{
color:#ff9900
}
dl{
width: 320px;
height: 190px;
background: #e4f6ff;
border:1px solid #5bb9e9;
padding: 20px 0 0 0;
position: absolute;
top:30px;
left:190px;
z-index: 9999;
display: none;
}
dl dt{
float: left;
margin: 0 24px 0 24px;
}
dl dd{
float: left;
width: 190px;
}
dl dd span{
color: #FF9900;
font-weight: bold;
}
li:hover dl{
display: block;
}
<!DOCTYPE html>CSS代码：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/demo1.css"/>
</head>
<body>
<div class="nav">
<ul>
<li>嘎哈嘻吉</li>
<li>嘎哈嘻吉
<div>
<p>1下拉菜单</p>
<p>1下拉菜单</p>
<p>1下拉菜单</p>
<p>1下拉菜单</p>
<p>1下拉菜单</p>
</div>
</li>
<li>嘎哈嘻吉<img src="img/new.png">
<div>
<p>2下拉菜单</p>
<p>2下拉菜单</p>
<p>2下拉菜单</p>
<p>2下拉菜单</p>
<p>2下拉菜单</p>
</div>
</li>
<li>嘎哈嘻吉
<div>
<p>3下拉菜单</p>
<p>3下拉菜单</p>
<p>3下拉菜单</p>
<p>3下拉菜单</p>
<p>3下拉菜单</p>
</div>
</li>
<li>嘎哈嘻吉
<div>
<p>4下拉菜单</p>
<p>4下拉菜单</p>
<p>4下拉菜单</p>
<p>4下拉菜单</p>
<p>4下拉菜单</p>
</div>
</li>
<li>嘎哈嘻吉</li>
<li>嘎哈嘻吉</li>
<li>嘎哈嘻吉<img src="img/new.png"></li>
</ul>
</div>
<div class="banner">
<img src="img/banner.jpg" width="1000"/>
</div>
</body>
</html>
*{3.案例三
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
margin-top: 100px;
}
.nav{
height: 35px;
background: red;
line-height: 35px;
width: 1000px;
margin: 0 auto;
}
.nav li{
float: left;
width: 120px;
text-align: center;
position: relative;
}
.nav li img{
position: absolute;
left: -2px;
top:-31px;
}
.nav div{
background: rgba(254,24,224,0.5);
display: none;
position: absolute;
left:0;
top:35px;
width: 120px;
}
.nav li:hover div{
display: block;
}
.banner{
width: 1000px;
margin: 0 auto;
}
<!DOCTYPE html>CSS代码：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/demo2.css"/>
</head>
<body>
<div class="qin">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
*{显示效果：
margin: 0;
padding: 0;
box-sizing: 0;
}
ul{
list-style: none;
}
.qin{
width: 1100px;
margin: 0 auto;
}
.qin ul{
width: 1100px;
height: 360px;
}
.qin li{
height: 360px;
width: 100px;
float: left;
}
.qin li:first-child{
background: url(../img/0Qvwqqc37bm2T5U4.jpg);
}
.qin li:nth-child(2){
background: url(../img/I8qsPnCHL82adc8s.jpg);
}
.qin li:nth-child(3){
background: url(../img/LKMHwpOP1Ou7SgqC.jpg);
}
.qin li:last-child{
background: url(../img/nW4pjGVlliIg0aKI.jpg);
width: 800px;
}
.qin ul:hover li{
width: 100px;
}
.qin ul li:hover{
width: 800px;
}
关键词：图片,定位,培训,属性,高级
在线咨询
