實用精美的導航條製做

時間 2019-11-29

標籤實用精美導航製做简体版

原文原文鏈接

參考：http://www.w3cfuns.com/article-252-1-1.htmlhtml

效果圖：前端

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,ul,li{padding:0; margin:0;}
ul{width:950px; height:35px; background:#ccc; margin: 0 auto; margin-top: 30px; list-style:none;}
ul li{float:left; line-height:35px; text-align:center; }
ul li a{display:block; float:left; padding:0 10px; font-size:12px; height:35px; color:#fe5089; text-decoration:none;}
ul li a:hover{color:#fff; text-decoration:underline;  background:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.w3cschool.com.cn" >w3cfuncs</a></li>
<li><a href="http://www.w3cstudy.com">釐米學院</a></li>
<li><a href="http://www.w3cstudy.com/course.aspx">培訓課程</a></li>
<li><a href="http://www.w3cstudy.com/apply.aspx">我要充電</a></li>
<li><a href="http://www.w3cstudy.com/career.aspx">前端職業生涯</a></li>
<li><a href="http://www.w3cstudy.com/faq.aspx">課程答疑</a></li>
</ul>
</body>
</html>

設計知識點：瀏覽器

一、塊狀元素：排斥其餘元素與其位於同一行，寬高起做用。app

內聯元素：容許其餘元素與其位於同一行，寬高不起做用。（如<div>)設計

內聯元素 + display:block ——> 塊狀元素. (如<a>）code

float:left 可消除塊狀元素的霸權主義，htm

例子可參考：http://www.w3cfuns.com/article-255-1-1.htmlit

常見的塊狀元素與內聯元素有下：io

二、瀏覽器的兼容性問題class

IE6 雙倍邊距bug ,

出現緣由： 1》要爲塊狀元素

2》要左側浮動

3》要有左外邊距（margin-left)