html基礎知識點
阿新 • • 發佈：2017-05-22
height -a 標準 內容 pan 開發者 one 文檔 head
語義化：根據內容的結構化選擇合適的標簽，便於開發者閱讀和寫出優雅的代碼的同時讓瀏覽器的爬蟲和機器很好的解析。
標準文檔流：在沒有css的幹預下，塊級元素獨占一行可以設置寬高，行內元素並排顯示寬高。
浮動：子級浮動會導致父級塌陷高度，行內元素浮動後改變了dispaly屬性，可以設置寬高，元素浮動不會穿過padding區域，浮動脫離文檔流影響別的元素。
制作一個導航
代碼實現：
<!DOCTYPE html>
<html>
<head lang="en">
<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>
</head>
<body>
<nav>
<ul>
<li>
<span class="c1"> </span>
<a href="#">茄子</a>
</li>
<li>
<span class="c2"> </span>
<a href="#">香蕉</a>
</li>
<li>
<span class="c3"> </span>
<a href="#">草莓</a>
</li>
<li>
<span class="c4"> </span>
<a href="#">土豆</a>
</li>
<li>
<span class="c5"> </span>
<a href="#">蘋果</a>
</li>
<li>
<span class="c6"> </span>
<a href="#">橘子</a>
</li>
</ul>
</nav>
</body>
</htm
html基礎知識點