本文主要是介绍20240309web前端_第一周作业_豆瓣电影，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
作业四：豆瓣电影
成果展示：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>豆瓣电影</title>
</head>
<body><h1>热门电影板块</h1><hr><table><tr><td style="width:160px;"><b style="font-size: 20px;">最近热门电影</b></td><td style="width: 65px;font-size: 18px;">热门</td><td style="width: 60px;font-size: 18px;">最新</td><td style="width: 110px;font-size: 18px;">豆瓣满分</td><td style="width: 100px;font-size: 18px;">冷门佳片</td><td style="width: 60px;font-size: 18px;">华语</td><td style="width: 60px;font-size: 18px;">欧美</td><td style="width: 65px;font-size: 18px;">韩国</td><td style="width: 180px;font-size: 18px;">日本</td><td style="width: 65px;font-size: 18px;">更多>></td></tr></table><hr><table><tr><td><img src="img2/猜火车 8.1.png"></td><td><img src="img2/贝尔科实验 6.0.png"></td><td><img src="img2/加州公路巡警 6.8.png"></td><td><img src="img2/歌声不绝 6.3.png"></td><td><a href="#bottom" name="top">直<br>到<br>底<br>部<br></a></td></tr><tr><td style="height: 40px;font-size: 18px;">猜火车 8.1</td><td style="height: 40px;font-size: 18px;">贝尔科实验 6.0</td><td style="height: 40px;font-size: 18px;">加州公路巡警 6.8</td><td style="height: 40px;font-size: 18px;">歌声不绝 6.3</td></tr><tr><td><img src="img2/明日的我与昨日的我.png"></td><td><img src="img2/速度与激情8.png"></td><td><img src="img2/极速特工.png"></td><td><img src="img2/金刚狼3 ：殊死一战.png"></td></tr><tr><td style="height: 40px;font-size: 18px;">明日的我与昨日的我</td><td style="height: 40px;font-size: 18px;">速度与激情8</td><td style="height: 40px;font-size: 18px;">极速特工</td><td style="height: 40px;font-size: 18px;">金刚狼3 : 殊死一战</td></tr><tr><td><a href="#top" name="bottom">回到顶部</a></td></tr></table>
</body>
</html>解析：
豆瓣电影的网页显示，主要是多图片文字平行显示和回到顶部、直到底部的超链接建立
标题使用<h1>设置一级标题，<hr>显示水平分割线
<h1>热门电影板块</h1><hr>主体部分可以使用没有表格线的表格来布局，使文字及图片平行多项显示，使用表格中style标签中的width调整文字容器范围即表格宽度，font-size调整字号，<td>中的文字默认左对齐，需要使用水平分割线，因此上方文字部分独立使用table表格
<table><tr><td style="width:160px;"><b style="font-size: 20px;">最近热门电影</b></td><td style="width: 65px;font-size: 18px;">热门</td><td style="width: 60px;font-size: 18px;">最新</td><td style="width: 110px;font-size: 18px;">豆瓣满分</td><td style="width: 100px;font-size: 18px;">冷门佳片</td><td style="width: 60px;font-size: 18px;">华语</td><td style="width: 60px;font-size: 18px;">欧美</td><td style="width: 65px;font-size: 18px;">韩国</td><td style="width: 180px;font-size: 18px;">日本</td><td style="width: 65px;font-size: 18px;">更多>></td></tr></table><hr>在每一个表格中嵌套img图片标签，建立直到底部的超链接标签，跳转点通过a标签的name属性设置，链接通过a标签中href属性设置，#引用链接的name完成跳转
<tr><td><img src="img2/猜火车 8.1.png"></td><td><img src="img2/贝尔科实验 6.0.png"></td><td><img src="img2/加州公路巡警 6.8.png"></td><td><img src="img2/歌声不绝 6.3.png"></td><td><a href="#bottom" name="top">直<br>到<br>底<br>部<br></a></td></tr>根据表格上下对齐的特点在图片下方表格输入电影名称，使用style标签的height属性设置表格的高度，使用font-size调整文字大小
<tr><td style="height: 40px;font-size: 18px;">猜火车 8.1</td><td style="height: 40px;font-size: 18px;">贝尔科实验 6.0</td><td style="height: 40px;font-size: 18px;">加州公路巡警 6.8</td><td style="height: 40px;font-size: 18px;">歌声不绝 6.3</td></tr>在页面下方建立回到顶部的超链接标签，跳转点通过a标签的name属性设置，链接通过a标签中href属性设置，#引用链接的name完成跳转
<tr><td><a href="#top" name="bottom">回到顶部</a></td></tr>这篇关于20240309web前端_第一周作业_豆瓣电影的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
