大话西游-麻烦帮忙看看ok么
来源：4-4 课程总结
Horrace
2017-07-03 00:06:26
麻烦老师帮忙看看这样写ok么。我用的table，有点复杂化了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
/*样式添加*/
h3 {
color:green;
}
table {
border-top:1px solid lightgray;
border-left:1px solid lightgray;
border-right:1px solid lightgray;
}
td {
padding-left: 1em;
border-bottom:1px solid lightgray;
}
.clickAble {
color:#009;
text-decoration: none;
}
.superClick{
margin-top: 1em;
margin-bottom: 1em;
}
.grade {
margin-left: 0.5em;
font-size: 1.1em;
color:rgb(251,163,58);
}
.dateSpan,.commentName{
margin-left: 0.5em;
font-family: "微软雅黑";
font-size: 1.1em;
}
.commentName {
margin-left: 0;
}
</style>
</head>
<body>
<!-- 写出h内容 -->
<table cellspacing="0" width="100%">
<tr>
<td>
<div>
<h3>大话西游之大圣娶亲的影评</h3>
<div class="superClick">
<span><a class="clickAble" href="https://www.baidu.com">热门</a></span>
<span class="sperator">/</span>
<span><a class="clickAble" href="https://www.baidu.com">最新</a></span>
<span class="sperator">/</span>
<span><a class="clickAble" href="https://www.baidu.com">好友</a></span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<div class="superClick">
<span class="commentName"><a class="clickAble" href="https://www.baidu.com">罗红霉素</a></span>
<span class="grade">★★★★★</span>
<span class="dateSpan">2010-07-26</span>
</div>
<div class="superClick">
<span>有人跟我比赛背台词么</span>
</div>
<div class="superClick">
<span>
阅读：1615
</span>
<span>
<a class="clickAble" href="https://www.baidu.com">有用</a>
</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<div class="superClick">
<span class="commentName"><a class="clickAble" href="https://www.baidu.com">十七只猫和鱼</a></span>
<span class="grade">★★★★</span>
<span class="dateSpan">2006-04-26</span>
</div>
<div class="superClick">
<span>任何时候任何场合都能再看一次的电影</span>
</div>
<div class="superClick">
<span>
阅读：515
</span>
<span>
<a class="clickAble" href="https://www.baidu.com">有用</a>
</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<div class="superClick">
<span class="commentName"><a class="clickAble" href="https://www.baidu.com">暖家男</a></span>
<span class="grade">★★★★</span>
<span class="dateSpan">2006-04-22</span>
</div>
<div class="superClick">
<span>一定有一些电影 永远不能被超越</span>
</div>
<div class="superClick">
<span>
阅读：490
</span>
<span>
<a class="clickAble" href="https://www.baidu.com">有用</a>
</span>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
1回答
-
好帮手慕糖
2017-07-03
你好，效果实现可以，但是使用表格代码有些复杂了。建议：可参考以下代码；祝学习愉快！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
h3{color:green;font-weight:bold;}
.p1{color:#009;}
.span{color:orange;}
.lanse{color:blue;}
span{color: black}
a{text-decoration: none;}
</style>
</head>
<body>
<div>
<h3>大话西游指大圣娶亲的影评</h3>
<p class="p1"><a href="#">热门</a>/<a href="#">最新</a>/<a href="#">好友</a></p>
<hr/>
<p class="p1"><a href="#">罗弘霉素</a><span class="span">★★★★★</span><span>2010-07-26</span></p>
<p>有人要跟我比赛背台词meQAQ</p>
<p>阅读:1615 <span class="lanse"><a href="#">有用</a></span></p>
<hr/>
<p class="p1"><a href="#">十七只猫和鱼</a><span class="span">★★★★</span><span>2006-04-26</span></p>
<p>在任何时候任何场合都可以再看一遍的电影</p>
<p>阅读:515 <span class="lanse"><a href="#">有用</a></span></p>
<hr/>
<p class="p1"><a href="#">暖家男</a><span class="span">★★★★</span><span>2006-04-22</span></p>
<p>一定是有一些电影，永远多不能被超越</p>
<p>阅读:5490 <span class="lanse"><a href="#">有用</a></span></p>
<hr/>
</div>
</body>
</html>
1
相似问题