案例-百度热榜页面实现

news2024/10/2 16:42:40

文章目录

效果展示
要求内容
注意
代码内容

效果展示

在这里插入图片描述

要求内容

整个盒子大小：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>