零基础HTML5+CSS3学习笔记（二）

制作导航栏

先建一个div,id为nav,再写css3

 注：margin要写在margin-top上面

因为margin-top的30px会覆盖margin，同理，如果margin放在后面，那么margin-top就白设了

效果图：

这样输入后Tab一下就会出现下面的效果

输入汉字后的效果：因为li是块状元素，所以会这样排列

如果放在ie6中，灰条会加宽将汉字包括完

float:left;后的效果：

去圆点后效果：

width:100px;效果：

background-color;后效果：

height:35px;效果：

居中后的效果：

盒子模型：border是盒子边，那么padding是盒子与盒子里的东西之间的缓冲区，margin是盒子与盒子之间的距离

border: 1px solid #000;效果：

padding: 0 10px;后效果：

注释掉border后效果

 注释掉背景颜色后效果：

再做修改，修改后的代码：

文字是在a里面的，所以a的颜色取反，但是只有一点点，只把字包完而已，设置宽度也没用，因为a是内联元素

所以要变成块状元素，display:block;

 变成块状元素后宽度生效：

写好padding后左边依然多了一块，因为li里面有padding，a还有一个padding，所以需要注释掉li的padding

 注释掉后的效果：

颜色是黑的不怎么好，换一种颜色

这样，一个导航栏算是完成了。

完整代码：

	
		
		
		
	
	
		

			

				
阿里巴巴
				
腾讯
				
百度
				
小米
				
华为
				
微软