电影排行案例

GeekLiHua

发布于 2025-01-21 13:19:19

5600

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

第一步:构建HTML框架

简介：本文用最通俗的语言，一步步教会大家CSS构建电影排行榜。首先构建HTML框架，本框架主要由表格构成，使用的标签为table，thead，th，tbody，tr，td。如果大家HTML不牢固，请看我的这篇博客:https://blog.csdn.net/qq_51447496/article/details/127158655

第一步：构建HTML框架

构建框架：对于这个框架需要一个个的小组件来写

1.1构建表头

<body>
    <!-- align="center"设置表格在中间 -->
    <!-- boder设置表格边框 -->
    <!-- cellpadding设置文字内部边距 使得文字处于表格中间位置 -->
    <!-- cellspacing设置表格框线之间的间距 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键字</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七天</th>
                <th>相关链接</th>
            </tr>
        </thead>
        
    </table>
</body>

运行结果：

1.2构建表身

 <!-- 构建tbody  -->
        <tbody>
            <!-- 这是每一行的模块 -->
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/down.png"></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
           
        </tbody>

运行结果：

完整的表身：

<body>
    <!-- align="center"设置表格在中间 -->
    <!-- boder设置表格边框 -->
    <!-- cellpadding设置文字内部边距 使得文字处于表格中间位置 -->
    <!-- cellspacing设置表格框线之间的间距 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键字</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七天</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/down.png"></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/down.png"></td>
                <td>124</td>
                <td>675432</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="images/up.png"></td>
                <td>212</td>
                <td>7654</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="images/down.png"></td>
                <td>23</td>
                <td>75645</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="images/down.png"></td>
                <td>121</td>
                <td>7676</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="images/down.png"></td>
                <td>576576</td>
                <td>1231421</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="images/down.png"></td>
                <td>234</td>
                <td>7686</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>
    </table>
</body>

第二步：CSS渲染

这里的渲染比较简单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置整体表格的大小 */
        table {
            width: 500px;
            height: 200px;
        }

        /* 设置每个表头的高度 */
        th {
            height: 35px;
        }

        table,
        td,
        th {
            /* 设置边框 */
            border: 1px solid blue;
            
            /* 合并相邻的边框 */
            border-collapse: collapse;

            /* 设置文字大小 */
            font-size: 14px;

            /* 设置文本居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- align="center"设置表格在中间 -->
    <!-- boder设置表格边框 -->
    <!-- cellpadding设置文字内部边距 使得文字处于表格中间位置 -->
    <!-- cellspacing设置表格框线之间的间距 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键字</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七天</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/down.png"></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/down.png"></td>
                <td>124</td>
                <td>675432</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="images/up.png"></td>
                <td>212</td>
                <td>7654</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="images/down.png"></td>
                <td>23</td>
                <td>75645</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="images/down.png"></td>
                <td>121</td>
                <td>7676</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="images/down.png"></td>
                <td>576576</td>
                <td>1231421</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="images/down.png"></td>
                <td>234</td>
                <td>7686</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

运行结果：