Semantic: Choose the right label based on the structure of the content, allowing developers to read and write elegant code while making browser crawlers and machines very well parsed.
Standard document Flow: In the absence of CSS intervention, block-level elements of the exclusive line can be set to a wide height, the row of elements side-by-side display width.
Floating: The child floats will cause the parent collapse height, the inline element floats after the Dispaly property is changed, you can set the width height, the element floats do not pass through the padding area, the floating out of the document flow affects other elements.
Make a navigation
Code implementation:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
body{margin:0px;
}
. C1{display:block;
Float:left;
width:22px;
height:20px;
Background:url ("Sucai.png") no-repeat;
}
. c2 {
Display:block;
Float:left;
width:22px;
height:20px;
Background:url ("Sucai.png") no-repeat;
background-position:0px-20px;
}
. c3 {
Display:block;
Float:left;
width:22px;
height:19px;
Background:url ("Sucai.png") no-repeat;
background-position:0px-45px;
}
. c4{
Display:block;
Float:left;
width:22px;
height:17px;
Background:url ("Sucai.png") no-repeat;
background-position:0px-63px;
}
. c5{
Display:block;
Float:left;
width:22px;
height:20px;
Background:url ("Sucai.png") no-repeat;
background-position:0px-81px;
}
. c6{
Display:block;
Float:left;
width:22px;
height:20px;
Background:url ("Sucai.png") no-repeat;
background-position:0px-101px;
}
ul{margin:0px;
padding:0px;
}
li{
Float:left;
List-style:none;
Text-align:center;
margin-left:120px;
}
li>a{
Text-decoration:none;
Color:yellow;
font-size:8px;
}
Li:hover a{
Background:linear-gradient (green,red);
}
. C1:hover{display:block;
Float:left;
width:22px;
height:20px;
Background:url ("Sucai.png") no-repeat;
Background-position: -21px-0px;
}
. c2:hover {
Display:block;
Float:left;
width:22px;
height:20px;
Background:url ("Sucai.png") no-repeat;
Background-position: -21px-20px;
}
. c3:hover{
Display:block;
Float:left;
width:22px;
height:19px;
Background:url ("Sucai.png") no-repeat;
Background-position: -22px-44px;
}
. c4:hover{
Display:block;
Float:left;
width:22px;
height:17px;
Background:url ("Sucai.png") no-repeat;
background-position:-21px-63px;
}
. c5:hover{
Display:block;
Float:left;
width:22px;
height:20px;
Background:url ("Sucai.png") no-repeat;
Background-position: -22px-81px;
}
. c6:hover{
Display:block;
Float:left;
width:22px;
height:20px;
Background:url ("Sucai.png") no-repeat;
Background-position: -21px-101px;
}
</style>
<body>
<nav>
<ul>
<li>
<span class= "C1" > </span>
<a href= "#" > Eggplant </a>
</li>
<li>
<span class= "C2" > </span>
<a href= "#" > Bananas </a>
</li>
<li>
<span class= "C3" > </span>
<a href= "#" > Strawberry </a>
</li>
<li>
<span class= "C4" > </span>
<a href= "#" > Potatoes </a>
</li>
<li>
<span class= "C5" > </span>
<a href= "#" > Apple </a>
</li>
<li>
<span class= "C6" > </span>
<a href= "#" > Orange </a>
</li>
</ul>
</nav>
</body>
HTML base point of knowledge