两端对齐导航

最新推荐文章于 2024-09-19 09:19:06 发布

原创最新推荐文章于 2024-09-19 09:19:06 发布 · 753 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文介绍了一个使用HTML和CSS实现的简单网页布局案例，其中包括带有导航链接的页眉及三个主要内容区域。通过CSS样式实现了导航栏的美观展示，并对不同部分进行了定位。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style>
		body{
			margin: 0;
			font: 1em "Helvetica";
		}
		ul, li{
			padding: 0;
			margin: 0;
		}
		a{
			text-decoration: none;
		}

		header{
			background-color: #000;
		}
		nav{
			display: table;
			width: 100%;
			max-width: 1024px;
			margin-left: auto;
			margin-right: auto;
		}
		nav ul{
			display: table-row;
		}
		nav li{
			display:  table-cell;
			text-align: center;
		}
		nav li:first-child{
			text-align: left;
		}
		nav li:last-child{
			text-align: right;
		}
		nav a{
			display: block;
			padding: 12px 10px;
			color: #fff;
			text-transform: uppercase;
		}
		nav li:nth-child(even) a{
			color: #83ecc5;
		}

		#section1, #section2, #section3{
			max-width: 1024px;
			height: 1000px;
			padding-top: 0.5em;
			margin-top: 30px;
			margin-left: auto;
			margin-right: auto;
			border: 2px dashed #d5d5d5;
			background-color: #eee;
			text-align: center;
		}
		:target{
			font-size: 30px;
		}
	</style>
</head>
<body>
<header>
	<nav>
		<ul>
			<li><a href="#section1">home</a></li>
			<li><a href="#section2">contact us</a></li>
			<li><a href="#section3">join us</a></li>
			<li><a href="#">our product</a></li>
			<li><a href="#">address</a></li>
			<li><a href="#">help</a></li>
		</ul>
	</nav>
</header>
<section id="section1">section1</section>
<section id="section2">section2</section>
<section id="section3">section3</section>
</body>
</html>