Correct use of 1.img attributes
<map id= "A" name= "a" >
<area shap= "" coords= "" href= "" ></area>
</map>
2html Frame
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<link rel= "stylesheet" href= ". /css/reset.css "/>
<link rel= "stylesheet" href= ". /css/webpage.css "/>
<body>
<nav>
<a href= "" > Home </a>
<a href= "" > Yi Niu Course </a>
<a href= "" > Yi Niu Class </a>
<a href= "" > Cow info </a>
<a href= "" > topic Group </a>
<a href= "" > Registration </a>
<a href= "" > Login </a>
</nav>
<article>
<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"/>
<area shape= "Circle" coords= "510,279,50" href= "https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105"/>
<area shape= "Poly" coords= "href=" "/>
</map>
</article>
<footer>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</footer>
</body>
3.CSS rules
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;
}
Simple web-making-img use