用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>