前端基础——CSS练习项目：百度热榜实现

页面效果：

代码展示：（无注释简洁版）

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(https://img0.baidu.com/it/u=3485717180,4129050257&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800);
            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: 20px;
            color: #fffff3;
        }
        .first{
            background-color: #f54545;
            padding-right: 8px;
        }
        .second{
            background-color: #ff8547;
            padding-right: 8px;
        }
        .third{
            background-color: #ffac38;
            padding-right: 8px;
        }
        .other{
            background-color: #8eb9f5;
            padding-right: 8px;
        }
    </style>
</head>
<body>
    <table cellspacing="0px">
        <th class="title col-1">百度热榜</th>
        <th class="title 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="#">220V的电压电不死250的猫</a></td>
            <td class="col-2">474万</td>
        </tr>
        <tr class="content">
            <td class="col-1"><span class="num second">2</span><a href="#">220V的电压电不死250的猫</a></td>
            <td class="col-2">474万</td>
        </tr>
        <tr class="content">
            <td class="col-1"><span class="num third">3</span><a href="#">220V的电压电不死250的猫</a></td>
            <td class="col-2">474万</td>
        </tr>
        <tr class="content">
            <td class="col-1"><span class="num other">4</span><a href="#">220V的电压电不死250的猫</a></td>
            <td class="col-2">474万</td>
        </tr>
    </table>
</body>
</html>

代码展示：（有注释方便理解）

html 复制代码

<!DOCTYPE html>
<!-- 文档类型声明：告知浏览器当前文档遵循HTML5标准，必须放在文档最顶部 -->
<html lang="en">
<!-- HTML根元素：整个页面的容器，所有内容都嵌套在其中；lang="en"表示文档主要语言为英语（可根据实际内容修改为zh-CN等） -->
<head>
    <!-- 头部区域：用于存放文档的元数据（不直接显示在页面上），包括编码、标题、样式等 -->
    <meta charset="UTF-8">
    <!-- 元数据标签：charset="UTF-8"指定文档使用UTF-8字符编码，支持全球绝大多数语言（含中文），避免文本乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 视口设置：针对移动设备优化显示
         width=device-width：让页面宽度与设备屏幕宽度一致
         initial-scale=1.0：设置初始缩放比例为1（不缩放），保证页面在手机等设备上正常显示 -->
    <title>Document</title>
    <!-- 页面标题：显示在浏览器标签页上，当前为默认值"Document"，可改为具体名称（如"百度热榜"） -->
    <style>
        <!-- style标签：用于编写CSS样式代码，控制页面元素的外观和布局 -->
        
        a{
            <!-- 选择器"a"：选中页面中所有<a>标签（超链接元素） -->
            color:blue;
            <!-- 文字颜色：设置链接默认文字为蓝色（符合用户对链接的视觉预期） -->
            text-decoration: none;
            <!-- 文本装饰：去除链接默认的下划线（让初始样式更简洁） -->
        }
        
        a:hover{
            <!-- 选择器"a:hover"：选中鼠标悬停状态的<a>标签（伪类选择器，用于交互反馈） -->
            text-decoration: underline;
            <!-- 文本装饰：鼠标悬停时显示下划线（提示用户"可点击"，增强交互体验） -->
        }
        
        table{
            <!-- 选择器"table"：选中页面中所有<table>标签（表格元素） -->
            width: 536px;
            <!-- 宽度：设置表格固定宽度为536像素（控制整体布局大小） -->
        }
        
        .title.col-1{
            <!-- 选择器".title.col-1"：选中同时包含class="title"和class="col-1"的元素（类选择器组合，精确匹配） -->
            font-size: 20px;
            <!-- 字体大小：设置为20像素（让标题更醒目） -->
            font-weight: bolder;
            <!-- 字体粗细：设置为"更粗"（比bold更粗，强化标题视觉权重） -->
        }
        
        .col-1{
            <!-- 选择器".col-1"：选中所有class="col-1"的元素（表格第一列的通用样式） -->
            width:80%;
            <!-- 宽度：占父元素（表格）宽度的80%（分配列宽，第一列放主要内容） -->
            text-align: left;
            <!-- 文本对齐：左对齐（符合中文阅读习惯，让内容更易读） -->
        }
        
        .col-2{
            <!-- 选择器".col-2"：选中所有class="col-2"的元素（表格第二列的通用样式） -->
            width:20%;
            <!-- 宽度：占父元素（表格）宽度的20%（与col-1合计100%，填满表格宽度） -->
            text-align: center;
            <!-- 文本对齐：居中对齐（让热度数据更规整） -->
        }
        
        .icon{
            <!-- 选择器".icon"：选中所有class="icon"的元素（用于显示"换一换"旁边的小图标） -->
            background-image: url(https://img0.baidu.com/it/u=3485717180,4129050257&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800);
            <!-- 背景图片：通过URL引入网络图片作为背景 -->
            width: 24px;
            <!-- 宽度：设置图标宽24像素（控制图标大小） -->
            height: 24px;
            <!-- 高度：设置图标高24像素（与宽度一致，保证图标比例） -->
            background-size: 100% 100%;
            <!-- 背景尺寸：让图片拉伸至完全覆盖元素（可能导致图片变形，此处为了填满图标区域） -->
            display: inline-block;
            <!-- 显示模式：行内块元素（同时具备行内元素"不独占一行"和块元素"可设置宽高"的特性，让图标与文字同行显示） -->
            vertical-align: bottom;
            <!-- 垂直对齐：与相邻元素（文字）底部对齐（避免图标与文字错位，更美观） -->
        }
        
        .content{
            <!-- 选择器".content"：选中所有class="content"的元素（表格内容行的通用样式） -->
            font-size: 18px;
            <!-- 字体大小：18像素（内容文字比标题小，层次分明） -->
            line-height: 40px;
            <!-- 行高：40像素（控制行间距，避免内容拥挤，提升可读性） -->
        }
        
        .content .col-1,.content .col-2{
            <!-- 选择器：选中class="content"元素内部的.col-1和.col-2（后代选择器，仅对内容行的列生效） -->
            border-bottom: 2px solid #f3f3f3;
            <!-- 底部边框：2像素宽、实线、浅灰色（#f3f3f3）（用于分隔不同热榜条目，视觉上更清晰） -->
        }
        
        .num{
            <!-- 选择器".num"：选中所有class="num"的元素（热榜排名数字的通用样式） -->
            font-size: 20px;
            <!-- 字体大小：20像素（让排名数字更突出） -->
            color: #fffff3;
            <!-- 文字颜色：浅灰白色（接近白色，与背景色形成对比，保证数字清晰可见） -->
        }
        
        .first{
            <!-- 选择器".first"：选中class="first"的元素（第1名排名数字的样式） -->
            background-color: #f54545;
            <!-- 背景色：红色（#f54545）（传统热榜中第1名常用红色，视觉突出） -->
            padding-right: 8px;
            <!-- 右内边距：8像素（让数字与后面的文字保持距离，避免拥挤） -->
        }
        
        .second{
            <!-- 选择器".second"：选中class="second"的元素（第2名排名数字的样式） -->
            background-color: #ff8547;
            <!-- 背景色：橙色（#ff8547）（第2名常用橙色，与第1名区分） -->
            padding-right: 8px;
            <!-- 右内边距：8像素（统一间距风格） -->
        }
        
        .third{
            <!-- 选择器".third"：选中class="third"的元素（第3名排名数字的样式） -->
            background-color: #ffac38;
            <!-- 背景色：浅橙色（#ffac38）（第3名常用浅橙，形成梯度区分） -->
            padding-right: 8px;
            <!-- 右内边距：8像素 -->
        }
        
        .other{
            <!-- 选择器".other"：选中class="other"的元素（4名及以后排名数字的样式） -->
            background-color: #8eb9f5;
            <!-- 背景色：浅蓝色（#8eb9f5）（与前三名区分，统一后续排名风格） -->
            padding-right: 8px;
            <!-- 右内边距：8像素 -->
        }
    </style>
</head>
<body>
    <!-- 主体区域：存放页面所有可见内容 -->
    <table cellspacing="0px">
        <!-- table标签：创建表格（用于结构化展示热榜数据）
             cellspacing="0px"：去除单元格之间的默认间距（让表格边框无缝连接） -->
        
        <th class="title col-1">百度热榜</th>
        <!-- th标签：表格表头单元格（默认加粗居中，用于说明列含义）
             class="title col-1"：同时应用title和col-1样式（标题样式+第一列布局）
             内容"百度热榜"：表格主标题 -->
        
        <th class="title col-2"><a href="#">换一换<span class="icon"></span></a></th>
        <!-- 第二个表头单元格：
             class="title col-2"：应用title样式+第二列布局
             <a href="#">：超链接（href="#"为临时空链接，点击无跳转）
             内容"换一换"：提示用户可切换热榜内容
             <span class="icon"></span>：空span标签，应用icon样式（显示小图标，增强交互提示） -->
        
        <tr class="content">
            <!-- tr标签：表格行（热榜第一条目行）
                 class="content"：应用内容行样式 -->
            <td class="col-1"><span class="num first">1</span><a href="#">浙220V的电压电不死250的猫</a></td>
            <!-- td标签：表格数据单元格（第一列内容）
                 class="col-1"：应用第一列布局样式
                 <span class="num first">1</span>：排名数字"1"，应用num和first样式（红色背景）
                 <a href="#">：热榜条目链接（内容为"浙大回应不开除强奸犯学生"） -->
            <td class="col-2">474万</td>
            <!-- 第二列数据单元格：
                 class="col-2"：应用第二列布局样式
                 内容"474万"：该热榜条目的热度数据（如阅读量） -->
        </tr>
        
        <tr class="content">
            <!-- 第二条目行：结构与第一条一致，排名为2 -->
            <td class="col-1"><span class="num second">2</span><a href="#">220V的电压电不死250的猫</a></td>
            <td class="col-2">474万</td>
        </tr>
        
        <tr class="content">
            <!-- 第三条目行：排名为3 -->
            <td class="col-1"><span class="num third">3</span><a href="#">220V的电压电不死250的猫</a></td>
            <td class="col-2">474万</td>
        </tr>
        
        <tr class="content">
            <!-- 第四条目行：排名为4（及以后） -->
            <td class="col-1"><span class="num other">4</span><a href="#">220V的电压电不死250的猫</a></td>
            <td class="col-2">474万</td>
        </tr>
    </table>
</body>
</html>