用html实现一个简易的百度热榜
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
table {
width: 536px;
}
.title .col-1 {
font-size: 20px;
font-weight:bolder;
}
.col-1 {
width: 80%;
text-align: left;
}
.col-2 {
width: 20%;
text-align: center;
}
.icon {
background-image: url(./refresh.png);
width: 24px;
height: 24px;
background-size: 100% 100%;
display: inline-block;
vertical-align: bottom;
}
.content {
font-size: 18px;
line-height: 40px;
}
.content .col-1, .content .col-2 {
border-bottom: 2px solid #f3f3f3;
}
.num {
font-size: 18px;
color: #fffff3;
}
.first {
background-color: #f54545;
padding-right: 6px;
padding-left: 6px;
}
.second {
background-color: #ff8547;
padding-right: 6px;
padding-left: 6px;
}
.third {
background-color: #ffac38;
padding-right: 6px;
padding-left: 6px;
}
.other {
background-color: #8eb9f5;
padding-right: 6px;
padding-left: 6px;
}
</style>
</head>
<body>
<table cellsapcing="0px">
<th class="title col-1">百度热榜</th>
<th class="tile col-2"><a href="#">换一换<span class="icon"></span></a></th>
<tr class="content">
<td class="col-1"><span class="num first">1</span> <a href="#">女子被好友改名文件传输助手骗5年</a></td>
<td class="col-2">432万</td>
</tr>
<tr class="content">
<td class="col-1"><span class="num second">2</span> <a href="#">通往幸福的"路"</a></td>
<td class="col-2">422万</td>
</tr>
<tr class="content">
<td class="col-1"><span class="num third">3</span> <a href="#">国安部女警揪出潜伏10年间谍</a></td>
<td class="col-2">372万</td>
</tr>
<tr class="content">
<td class="col-1"><span class="num other">4</span> <a href="#">董宇辉清空微博账号</a></td>
<td class="col-2">232万</td>
</tr>
</table>
</body>
</html>
代码截图
运行效果