效果展示
要求内容
整个盒子大小: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>