【H5】ul,li练习
练习一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>d24c04429</title>
<style>
.title {
background-color: firebrick;
text-align: center;
color: white;
line-height: 40px;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: orange;
text-decoration: none;
}
ul li a {
text-decoration: none;
margin-right: 20px;
}
html {
margin: 0 auto;
width: 400px;
}
ul li {
list-style: none;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="table"></div>
<ul>
<li class="title">
<h3>大家都喜欢买的美容品</h3>
</li>
<li class="goods"><a href="">1 雅诗兰黛即时修护眼部精华霜15ml</a></li>
<li class="goods"><a href="">2 伊丽莎白雅顿显效复合活肤霜75ml</a></li>
<li class="goods"><a href="">3 OLAY玉兰油多效修护霜50g</a></li>
<li class="goods"><a href="">4 巨型一号丝瓜水320ML</a></li>
<li class="goods"><a href="">5 倩碧保湿洁肤水2号 200ml</a></li>
<li class="goods"><a href="">6 SK-II护肤精华露215ml</a></li>
</ul>
</table>
</body>
</html>练习二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>热播</title>
<style>
ul {
list-style: none;
display: flex;
}
li {
margin: 5px 0;
}
li>p:last-child {
color: blue;
font-size: 12px;
}
li>p:nth-of-type(1) {
color: #640000;
font-size: 14px;
}
h2 {
font-size: 16px;
color: #4d4d4d;
}
html {
margin: 0 auto;
width: 1200px;
}
</style>
</head>
<body>
<div class="rebo">
<h1>热播</h1>
<ul>
<li>
<h2>狂飙</h2>
<img src="https://odocs.top/zb_users/upload/2025/03/1.gif" alt="" width="250px" />
<p>张泽张颂文黑白较量</p>
<p>点击次数：242445次</p>
</li>
<li>
<h2>归路</h2>
<img src="https://odocs.top/zb_users/upload/2025/03/2.gif" alt="" width="250px" />
<p>井柏然谭松韵破镜重圆</p>
<p>点击次数:242445次</p>
</li>
<li>
<h2>流浪地球2</h2>
<img src="https://odocs.top/zb_users/upload/2025/03/3.gif" alt="" width="250px" />
<p>吴京刘德华救地球</p>
<p>点击次数:242445次</p>
</li>
<li>
<h2>人生之路</h2>
<img src="https://odocs.top/zb_users/upload/2025/03/4.gif" alt="" width="250px" />
<p>陈晓李沁重返80年代</p>
<p>点击次数:242445次</p>
</li>
</ul>
</div>
</body>
</html>练习三：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>d24c04429欧永鸿</title>
<style>
nav {
background-color: black;
}
.nava {
padding: 0 20px;
height: 65px;
line-height: 65px;
display: block;
color: white;
text-decoration: none;
}
.nava:hover {
background-color: gold;
}
* {
padding: 0;
margin: 0;
}
.nav {
margin: 0% auto;
width: 10%;
text-align: center;
}
</style>
</head>
<body>
<nav>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="nav"><a href="#" class="nava">首页</a></td>
<td class="nav"><a href="#" class="nava">个人简介</a></td>
<td class="nav"><a href="#" class="nava">成长故事</a></td>
<td class="nav"><a href="#" class="nava">获奖作品</a></td>
<td class="nav"><a href="#" class="nava">作品集锦</a></td>
<td class="nav"><a href="#" class="nava">影迷注册</a></td>
</table>
</nav>
</body>
</html>
微信扫一扫，打赏作者吧～
Osinghong">