時間：2023-07-06 03:00:02 | 來源：網(wǎng)站運營
時間：2023-07-06 03:00:02 來源：網(wǎng)站運營
育知前端開發(fā)培訓(xùn) 定位屬性、列表的高級應(yīng)用及帶有圖片列表的網(wǎng)頁制作（中）：五、 列表標(biāo)簽的高級應(yīng)用<!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;
}
關(guān)鍵詞：圖片,定位,培訓(xùn),屬性,高級
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
在線咨詢