用html实现一个简易的百度热榜

r囧r小猫 2024-05-06 21:23 54阅读 0赞

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

### 代码截图 ###

![image-20240228161121569][]

### 运行效果 ###

![image-20240228161235396][]

[image-20240228161121569]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f6770e9f0a9546dd97c91fa2b1ea66bb.png
[image-20240228161235396]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e8e89d06d0534d1c9ebf28b3a5226389.png