实用精美的导航条制做

时间 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)

解决：display:inline;

三、清除浮动；clear

clear:both/left/right/none

清除2侧浮动/清除左侧浮动/清除右侧浮动/容许有浮动

四、……

内容太多了，这里就不一一写了，前端网真的很给力，讲解的很是透彻，有时间就多看几遍：

http://www.w3cfuns.com/topic-64.html