《HTML+CSS》视频11 简单布局、导航条

简单布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>my first web</title>
		<style type="text/css">
			.head{
			width:1000px;
			height:120px;
			background-color:#efa;
			margin:0 auto;
			}
			.content{
			width:1000px;
			height:600px;
			background-color:#dbe;
			margin:10px auto;
			}
			.sports{
			width:200px;
			height:100%;
			background-color:skyblue;
			float:left;
			}
			.news{
			width:580px;
			height:100%;
			background-color:gold;
			margin:0 10px;
			float:left;
			}
			.ads{
			width:200px;
			height:100%;
			background-color:aquamarine;
			float:left;
			}
			.foot{
			width:1000px;
			height:120px;
			background-color:#4ca;
			margin:0 auto;
			}

		</style>

	<head>
	<body>
		<div class="head"></div>
		<div class="content">
			<div class="sports"></div>
			<div class="news"></div>
			<div class="ads"></div>
		</div>
		<div class="foot"></div>
	<body>
	
<html>

效果图：

导航条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>header</title>
		<style type="text/css">
			*{
			margin:0;
			padding:0;
			}
			.nav{
			width:1000px;
			background-color:#15a5ff;
			margin:0 auto;
			margin-top:50px;
			/*
			放置高度塌陷
			*/
			overflow:auto;
			}
			.nav li{
			list-style:none;
			float:left;
			width:25%;
			
			}
			.nav li a{
			/*
			a标签是内联元素，不能设置宽度
			*/
			display:block;
			width:100%;
			text-decoration:none;
			font-weight:bold;
			color:white;
			text-align:center;
			padding:5px 0;
			
			}
			.nav li a:hover{
			background-color:red;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">姓名</a></li>
			<li><a href="#">性别</a></li>
			<li><a href="#">年龄</a></li>
			<li><a href="#">喜好</a></li>
			
		</ul>
	</body>
</html>

效果如下：