实现效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h3{
display: inline-block;
}
#bar{
margin-left: 50px;
display: inline;
}
#more{
padding-left: 230px;
}
</style>
</head>
<body>
<h2>热门电影模块</h2>
<hr color="gray">
<div>
<h3>最近热门电影</h3>
<p id="bar"><a href="">热门</a> <a href="">最新</a> <a href="">豆瓣高分</a> <a href="">冷门佳片</a> <a href="">华语</a> <a
href="">欧美</a> <a href="">韩国</a> <a href="">日本</a> <span id="more"><a href="">更多</a>>></span></p>
</div>
<hr color="gray">
<div>
<div>
<img src="img/1.jpg" alt="" width="200px" height="300px" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,200,300" href="http://www.baidu.com" target="_blank"/>
</map>
<img src="img/2.jpg" alt="" width="200px" height="300px" usemap="#map1">
<map name="map1">
<area shape="rect" coords="0,0,200,300" href="http://www.baidu.com" target="_blank"/>
</map>
<img src="img/3.jpg" alt="" width="200px" height="300px" usemap="#map2">
<map name="map2">
<area shape="rect" coords="0,0,200,300" href="http://www.baidu.com" target="_blank"/>
</map>
<map name="map3">
<area shape="rect" coords="0,0,200,300" href="http://www.baidu.com" target="_blank"/>
</map>
<img src="img/4.png" alt="" width="200px" height="300px" usemap="#map3">
</div>
<div style="line-height: 50px">
<span style="margin: 0 0"><a href="">车仁表</a></span>
<span style="margin-left: 150px"><a href="">无声</a></span>
<span style="margin-left: 170px"><a href="">有翡</a></span>
<span style="margin-left: 170px"><a href="">掌中之物</a></span>
</div>
<div>
<img src="img/5.jpg" alt="" width="200px" height="300px" usemap="#map4">
<map name="map4">
<area shape="rect" coords="0,0,200,300" href="http://www.baidu.com" target="_blank"/>
</map>
<img src="img/6.jpg" alt="" width="200px" height="300px" usemap="#map5">
<map name="map5">
<area shape="rect" coords="0,0,200,300" href="http://www.baidu.com" target="_blank"/>
</map>
<img src="img/7.jpg" alt="" width="200px" height="300px" usemap="#map6">
<map name="map6">
<area shape="rect" coords="0,0,200,300" href="http://www.baidu.com" target="_blank"/>
</map>
<map name="map7">
<area shape="rect" coords="0,0,200,300" href="http://www.baidu.com" target="_blank"/>
</map>
<img src="img/8.jpg" alt="" width="200px" height="300px" usemap="#map7">
</div>
<div style="line-height: 50px">
<span style="margin: 0 0"><a href="">我和我的家乡</a></span>
<span style="margin-left: 110px"><a href="">沐浴之王</a></span>
<span style="margin-left: 130px"><a href="">标准之外</a></span>
<span style="margin-left: 140px"><a href="">神奇女侠1984</a></span>
</div>
</div>
</body>
</html>