CSS+DIV之导航菜单实例

2019独角兽企业重金招聘Python工程师标准>>>

1.index.html

    
    
	


    

        

            
first
            
second
            
third
            
fourth
            
about
        
    

2.main.css

*{
	margin: 0;padding: 0;  /*初始化设置所有元素的margin和padding均为0px*/
}

#banner{
	height: 30px;	/*设置banner高度*/
	background-color: #a0dcbc;	/*设置banner背景色*/
	width: 100%;
}


ul{
	list-style: none;	/*去掉li前面的点*/
}

ul li{
	float: left;  /*设置li的float布局*/
	width: 19%;	/*设置每个li的宽度*/
	text-align: center; /*设置li的文案居中*/
	border-right: 2px solid #f0c;  /*设置li右侧有一个2px的边框，长度等于padding和content之和，这里是2+28*/
	padding-top: 2px;	/*调整li文案位置*/
	height: 28px;	/*设置li高度28px*/
}

a{
	text-decoration: none; //去掉a标签元素底部的横线
}

3.结果显示

转载于:https://my.oschina.net/u/3640519/blog/1576376