弹性导航条

程序员文章站 2022-07-03 20:13:54

日期：2020-10-11作者：19届WY标签：弹性导航条试一下用flex做一个w3school的一个导航条Doc

日期：2020-10-11

作者：19届WY

标签：弹性导航条

试一下用flex做一个w3school的一个导航条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Doc</title>
		<!-- 引入reset.css用来清除浏览器的默认样式 -->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<style>
			.nav{
				width:1210px;
				height:48px;
				line-height:48px;
				margin:50px auto;
				background-color:#E8E7E3;
				/*设置弹性容器*/
				display:flex;
			}
			.nav li{
				/*设置增长系数*/
				flex-grow:1;
			}
			.nav a{
				display:block;
				color:#808080;
				text-decoration: none;
				font-size: 16px;
				text-align:center;
			}
			.nav a:hover{
				background-color: #636363;
			}
			ul{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">HTML/CSS</a></li>
			<li><a href="#">Browser Side</a></li>
			<li><a href="#">Server Side</a></li>
			<li><a href="#">Programming</a></li>
			<li><a href="#">XML</a></li>
			<li><a href="#">Web Building</a></li>
			<li><a href="#">Preferances</a></li>
		</ul>
	</body>
</html>