第一步:构建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>
运行结果：
