HTML-Demo：热门电影板块
Date: November 20, 2022
Demo简介：
简要说明一下这个demo
知识点：
简要介绍其中一些知识点
表格：
宽度
width设置：
如果这里考虑百分数：让表格宽度占页面的一半
<table width=50%>
会出现的问题：页面被拉伸
解决方案：
宽度设置为px，会固定宽度和区域内的各元素的位置远近
成功解决问题：
整体代码：
<!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> </head> <body> <h2>热门电影板块</h2> <hr> <div> <table width="1000px"> <tr> <td><b>最近热门电影</b></td> <td>热门</td> <td>最新</td> <td>豆瓣高分</td> <td>冷门佳片</td> <td>华语</td> <td>欧美</td> <td>韩国</td> <td>日本</td> <td><a href="#" style="color: black; text-decoration: none;">更多>></a></td> </tr> </table> </div> <hr> <div> <table width="700px"> <tr> <td><img src="./img/p2869976055.jpg" alt="?" width="150px" height="200px"></td> <td><img src="./img/p2876884670.jpg" alt="" width="150px" height="200px"></td> <td><img src="./img/p2878724852.jpg" alt="" width="150px" height="200px"></td> <td><img src="./img/p2879787106.jpg" alt="" width="150px" height="200px"></td> </tr> <tr> <td>柯南</td> <td>黑亚当</td> <td>菜单</td> <td>神迹</td> </tr> <tr> <td><img src="./img/p2880339524.jpg" alt="" width="150px" height="200px"></td> <td><img src="./img/p2880442065.jpg" alt="" width="150px" height="200px"></td> <td><img src="./img/p2880646049.jpg" alt="" width="150px" height="200px"></td> <td><img src="./img/p2883894742.jpg" alt="" width="150px" height="200px"></td> </tr> <tr> <td>西线无战事</td> <td>危笑</td> <td>6/45</td> <td>共助2:国际</td> </tr> </table> </div> </body> </html>
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)