作业四:豆瓣电影
成果展示:
完整代码:
<!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>