语义化：根据内容的结构化选择合适的标签，便于开发者阅读和写出优雅的代码的同时让浏览器的爬虫和机器很好的解析。
标准文档流：在没有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
时间： 2024-10-11 13:36:23