CSS+DIV之导航菜单实例-CSDN博客

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

1.index.html

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<head>
    <title>导航菜单</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div id="banner">
        <ul>
            <li><a href="">first</a></li>
            <li>second</li>
            <li>third</li>
            <li>fourth</li>
            <li>about</li>
        </ul>
    </div>
</body>
</html>

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.结果显示