效果展示
要求内容
- 整个盒子大小：536*536
- 标题字体柜20px、加粗，纯黑，换一换字体大小20px、颜色0055db、刷新图标是本地图片
- 内容字体18px、上下边距15px、下边框实心2px颜色f3f3f3这个需要根据页面显示调。
- 序号20*20，字体颜色ffft3，背景颜色1为f54545，2为ff8547，3为ffac38，其他为8eb9f5
- 序号和正文中间有8像索边距
注意
- 表格要使用 cellspacing 属性把单元格之间的空隙干掉,
- “刷新按钮”的图标通过 链接图标下载地址
- 使用 vertical-align: bottom; 设置刷新图标,否则剧新图标会和文字重直方向不对齐
- tr 没有独立的边框,td 和 table 才有边框
代码内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度热榜</title><style>a{color: #0055db;text-decoration: none;}a:hover{text-decoration: underline;}table{width: 536px;height: 536px;}.title-1{font-size: 20px;font-weight: bolder;color: black;text-align: left;}.title-2{font-size: 20px;text-align: right;}.icon{background-image: url(./img/刷新.png);width: 24px;height: 24px;background-size: 100% 100%;display: inline-block;vertical-align: bottom;}.content .col-2{text-align: center;}.content{font-size: 18px;line-height: 15px;}.content .col-1, .content .col-2{border-bottom: solid 2px #f3f3f3;}.content .first{font-size: 16px;color: #fffff3;}.content .num-1{background-color: #f54545;padding-right: 4px;padding-left: 4px;}.content .num-2{background-color: #ff8547;padding-right: 4px;padding-left: 4px;}.content .num-3{background-color: #ffac38;padding-right: 4px;padding-left: 4px;}.content .num{background-color: #8eb9f5;padding-right: 4px;padding-left: 4px;}</style>
</head>
<body><table cellspacing="0px"><th class="title-1">百度热榜</th><th class="title-2"><a href="#">换一换<span class="icon"></span></a></th><tr class="content"><td class="col-1"><span class="first num-1">1</span><a href="#">什么是庆祝共和国华诞的最好行动</a></td><td class="col-2">474万</td></tr> <tr class="content"><td class="col-1"><span class="first num-2">2</span><a href="#">什么是庆祝共和国华诞的最好行动</a></td><td class="col-2">474万</td></tr> <tr class="content"><td class="col-1"><span class="first num-3">3</span><a href="#">什么是庆祝共和国华诞的最好行动</a></td><td class="col-2">474万</td></tr> <tr class="content"><td class="col-1"><span class="first num">4</span><a href="#">什么是庆祝共和国华诞的最好行动</a></td><td class="col-2">474万</td></tr> <tr class="content"><td class="col-1"><span class="first num">5</span><a href="#">什么是庆祝共和国华诞的最好行动</a></td><td class="col-2">474万</td></tr> <tr class="content"><td class="col-1"><span class="first num">6</span><a href="#">什么是庆祝共和国华诞的最好行动</a></td><td class="col-2">474万</td></tr> <tr class="content"><td class="col-1"><span class="first num">7</span><a href="#">什么是庆祝共和国华诞的最好行动</a></td><td class="col-2">474万</td></tr> <tr class="content"><td class="col-1"><span class="first num">8</span><a href="#">什么是庆祝共和国华诞的最好行动</a></td><td class="col-2">474万</td></tr> <tr class="content"><td class="col-1"><span class="first num">9</span><a href="#">什么是庆祝共和国华诞的最好行动</a></td><td class="col-2">474万</td></tr> </table>
</body>
</html>
