请老师帮忙看一下代码还有哪些值得优化的地方(评论区感觉套个无序列表更清晰一些)
来源:2-6 编程练习
Bailey_
2021-03-17 16:15:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: green;
}
ul {
list-style: none;
}
.star {
color: orange;
}
a {
text-decoration: none;
color: #009;
}
</style>
</head>
<body>
<h1>大话西游之大圣娶亲的影评</h1>
<div class="keyword">
<a href="">热门/最新/好友</a>
</div>
<div class="comment-area">
<hr>
<ul class="user1">
<li><a href="" class="name">罗红霉素</a><span class="star">★★★★★</span>2010-07-26</li>
<li>有人跟我比赛背台词么</li>
<li>阅读:1615 <a href="" class="useful">有用</a></li>
</ul>
<hr>
<ul class="user2">
<li><a href="" class="name">十七只猫和鱼</a><span class="star">★★★★</span>2006-04-26</li>
<li>任何时候任何场合都可以再看一遍的电影</li>
<li>阅读:515 <a href="" class="useful">有用</a></li>
</ul>
<hr>
<ul class="user3">
<li><a href="" class="name">暖家男</a><span class="star">★★★★</span>2006-04-22</li>
<li>一定有一些电影 永远都不能被超越</li>
<li>阅读:490 <a href="" class="useful">有用</a></li>
</ul>
</div>
</body>
</html>
1回答
同学你好,样式很整洁,只是效果与练习要求不符:
原因就是嵌套的ul标签,左侧有自带的间隙样式。虽然嵌套列表后结构会更清晰,但是当前阶段,我们还没学习怎么去掉这个多余的间隙,所以可以不嵌套列表标签:
祝学习愉快!
相似问题