html练习1（图像映射）

2021-01-05 17:03:23 阅读：142 来源： 互联网

实现效果

在这里插入图片描述
代码如下：

<!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>&gt;&gt;</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>

标签：gt,映射,练习,电影,热门,html,inline,display,left
来源： https://blog.csdn.net/qq_44292366/article/details/112244526

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html练习1（图像映射）

实现效果