看到样例的效果展示，不知道如何使用html标签构建结构
来源：2-6 编程练习
qq_生命不止奋斗不息_0
2020-11-22 20:37:50
# 具体遇到的问题
老师您好，我在这道目中，其实最大的疑问就是如何根据页面的展示，来如何使用相应的html标签来构建这个页面？这是我最大的困扰，总感觉自己写出来的代码特别的零散，东写一下，西写一下。
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
这里是根据样例，写的html代码，自己感觉很零散
在
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
/*样式添加*/
h1{
color:green;
}
a{
text-decoration:none;
color:#009;
}
.star-yellow{
color:orange;
}
</style>
</head>
<body>
<!-- 写出h内容 -->
<div class="title">
<h1>大话西游之大圣娶妻的影评</h1>
</div>
<div class="nav">
<a href="">热门/</a><a href="">最新/</a><a href="">好友</a>
</div>
<hr>
<section class="main">
<div class="main-list">
<p>
<span><a href="">罗红霉素</a></span>
<span class="star-yellow">★★★★★</span>
<span>2020-07-26</span>
</p>
<p>
有人跟我比赛背台词么
</p>
<p>
<span>阅读：</span><span>1615</span> <a href="">有用</a>
</p>
</div>
<div class="main-list">
<p>
<span><a href="">罗红霉素</a></span><span
class="star-yellow">★★★★★</span>
<span>2010-07-26</span>
</p>
<p>
有人跟我比赛背台词么
</p>
<p>
<span>阅读：</span><span>1615</span> <a href="">有用</a>
</p>
</div>
<div class="main-list">
<p>
<span><a href="">罗红霉素</a></span><span class="star-yellow">★★★★★</span>
<span>2010-07-26</span>
</p>
<p>
有人跟我比赛背台词么
</p>
<p>
<span>阅读：</span><span>1615</span> <a href="">有用</a>
</p>
</div>
<div class="main-list">
<p>
<span><a href="">罗红霉素</a></span><span>★★★★★</span>
<span>2010-07-26</span>
</p>
<p>
有人跟我比赛背台词么
</p>
<p>
<span>阅读：</span><span>1615</span> <a href="">有用</a>
</p>
</div>
</section>
这里输入代码，可通过选择【代码语言】突出显示
1回答
-
同学你好，代码结构是可以的，但是样式还需要完善：
1、多条下划线需要补充完整
2、最后一项中的星星颜色需要添加
参考修改
1、可以把hr放在div的上面
2、给最后一项的span添加class类
另外，关于布局结构，在练习中会慢慢熟悉，布局灵活，没有固定的方式，最后能够实现效果就好。
祝学习愉快！
0
相似问题