简单布局
<!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>
效果如下：
1024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
