简单的网页制作-img使用

1.img属性的正确运用

</map>

2html框架

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/webpage.css"/>
</head>
<body>
    <header>
        <nav>
            <a href="">首页</a>
            <a href="">易牛课程</a>
            <a href="">易牛班级</a>
            <a href="">易牛资讯</a>
            <a href="">话题小组</a>
            <a href="">注册</a>
            <a href="">登录</a>
        </nav>
    </header>
    <article>
        <img usemap="#star" src="../img/63d0f703918fa0ec8ed6f76e259759ee3d6ddb44.jpg" alt="来自百度，太阳系八大行星" title="赵青龙 制作"/>
        <map id="star" name="star">
            <area shape="rect" coords="310,341,369,379" href="https://baike.baidu.com/item/%E5%9C%B0%E7%90%83/6431" alt=""/>
            <area shape="circle" coords="510,279,50" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105" alt=""/>
            <area shape="poly" coords="" href="" alt=""/>
        </map>
    </article>
    <footer>
        <section>
            <h1>我是管理员</h1>
            <h2><a href="">课程管理</a></h2>
            <h2><a href="">用户管理</a></h2>
        </section>
        <section>
            <h1>我是学生</h1>
            <h2><a href="">如何注册</a></h2>
            <h2><a href="">购买课程</a></h2>
        </section>
        <section>
            <h1>联系我们</h1>
            <h2><a href="">关于我们</a></h2>
            <h2><a href="">联系我们</a></h2>
        </section>
        <section>
            <h1>商业应用</h1>
            <h2><a href="">商务合作</a></h2>
            <h2><a href="">内容招募</a></h2>
        </section>
        <section>
            <h1>系统帮助</h1>
            <h2><a href="">购买课程</a></h2>
            <h2><a href="">作业提交</a></h2>
        </section>
    </footer>
</body>
</html>

3.css规则

body{
    background-color: #ffffff;
}
header{
    background-color: #534141;
    padding: 0 30px;
    height: 50px;
}
a{
    color: #e6e6e6;
    font-size: 16px;
    text-decoration: none;
    padding: 17px;
    height: 16px;
}
nav>a:nth-of-type(-n+5){
    float: left;
}
nav>a:nth-of-type(n+6){
    float: right;
}
nav>a:hover{
    background-color: #e12929;
    color: #fff;
}
article{
    margin: 30px auto;
    outline: solid;
    width: 1000px;
    height: 800px;
}
footer{
    height: 200px;
    background-color: #2a2a2a;
}
section{
    float: left;
    margin-left: 50px;
    margin-top: 50px;
}
h1{
    font-size: 16px;
    margin-bottom: 2em;
    color: #fff;
}
h2{
    color: #e6e6e6;
    margin-bottom: 1em;
}
h2>a{
    padding: 0;
    font-size: 14px;
}

简单的网页制作-img使用

猜你喜欢