请老师帮我看一下代码
来源:2-6 编程练习
weibo__没趣味_03683219
2021-05-26 18:47:06
相关代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
h1 {
color: #0A0;
}
ul {
list-style:none;
padding-left:0;
}
li {
border-bottom:1px solid #000;
border-collapse:collapse;
}
ul li:first-child{
border-top: 1px solid #000;
}
a {
color: #00f;
text-decoration:none;
}
.star-3::before {
content: "⭐⭐⭐";
}
.star-4::before {
content: "⭐⭐⭐⭐";
}
.star-5::before {
content: "⭐⭐⭐⭐⭐";
}
</style>
</head>
<body>
<header>
<h1>大话西游之大圣娶亲的影评</h1>
<a href="">热门</a>/
<a href="">最新</a>/
<a href="">好友</a>
</header>
<div class="review">
<ul>
<li>
<div class="user">
<a href=" ">用户名1</a>
<span class="star-4"></span>
<span class="date">2010-07-26</span>
</div>
<div class="user-review">
<p>
一段文字
</p>
</div>
<div class="useful">
阅读:<span>1615</span>
<a href="">有用</a>
</div>
</li>
<li>
<div class="user">
<a href=" ">用户名2</a>
<span class="star-5"></span>
<span class="date">2006-04-26</span>
</div>
<div class="user-review">
<p>
一段文字
</p>
</div>
<div class="useful">
阅读:<span>515</span>
<a href="">有用</a>
</div>
</li>
<li>
<div class="user">
<a href=" ">用户名3</a>
<span class="star-3"></span>
<span class="date">2006-04-22</span>
</div>
<div class="use-review">
<p>
一段文字
</p>
</div>
<div class="userful">
阅读:<span>490</span>
<a href="">有用</a>
</div>
</li>
</ul>
</div>
</body>
</html>
1回答
同学你好,老师这边测试五角星是没有颜色的,如下:
猜测是代码中的五角星格式有问题,建议直接粘贴复制使用任务中给出五角星,然后再测试下,如下:
然后通过color属性设置颜色即可,另外,样式相同的代码,可以设置相同的类名,统一设置样式,简化代码书写,如下:
最后,建议优化:给li设置上下padding调整文字间距,效果实现会更好。如下:
祝学习愉快~
相似问题