简单的网页制作-img使用

1.img属性的正确运用

<map >

</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 >作业提交</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;
}