建议先往后翻看图,看有没有需要再看代码。
我们首先要对网页的整体页面进行规划,分出区域,下面对大框架的区域分布写个例子:
<!doctype html>
<html lang="en">
<head>
<title>div和span应用2</title>
<meta charset="utf-8">
<style type="text/css">
.header{
background-color:red;
width:1000px;
height:100px;
margin-bottom:20px;
}
.content{
background-color:blue;
width:1000px;
height:500px;
margin-bottom:20px;
}
.footer{
background-color:green;
width:1000px;
height:100px;
}
.logo{
background-color:pink;
height:60px;
width:300px;
float:left;
margin:20px;
}
.nav{
background-color:yellow;
height:60px;
width:600px;
float:right;
margin:20px;
}
.cc1{
background-color:purple;
height:460px;
width:300px;
float:left;
margin:20px;
}
.cc2{
background-color:skyblue;
height:460px;
width:600px;
float:right;
margin:20px;
}
.cc3{
background-color:yellow;
height:60px;
width:950px;
margin:25px;
float:left;
}
</style>
</head>
<body>
<div class="header">
<span class="logo">
</span>
<span class="nav">
</span>
</div>
<div class="content">
<span class="cc1">
</span>
<span class="cc2">
</span>
</div>
<div class="footer">
<span class="cc3">
</span>
</div>
</body>
</html>
现在我们模仿百度页面,自己写个网页出来,图片需要自己上网下载,就不提供了
<!doctype html>
<html lang="en">
<head>
<title>div和span的综合应用</title>
<meta charset="utf-8">
<style type="text/css">
.body{
color:#666;
}
.header{
height:200px;
}
.content{
height:350px;
}
.footer{
height:100px;
}
.logo{
margin:20px;
}
.kuang{
width:400px;
height:30px;
}
.bdyx{
width:100px;
height:35px;
}
.bk{
margin:30px;
}
.ch{
margin:100px;
}
.ws{
margin:20px;
}
.ss{
margin:20px;
}
</style>
</head>
<body align="center">
<div class="header">
<div class="logo">
<img src="images/bdlogo2.jpg">
</div>
<div class="xw">
<a href="#">新闻</a>
<a href="#">网页</a>
<a href="#">贴吧</a>
<a href="#">知道</a>
<a href="#">音乐</a>
<a href="#">图片</a>
<a href="#">视频</a>
<a href="#">地图</a>
</div>
</div>
</div>
<div class="content">
<div class="ss">
<form>
<input type="text" class="kuang">
<input type="submit" class="bdyx" value="百度一下">
</form>
</div>
<div class="bk">
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao123</a>
<a href="#">更多>></a>
</div>
<div class="ch">
<img src="images/dt.jpg">
<a href="#">百度带你吃喝玩乐,全心全意为人民服务</a>
</div>
</div>
<div class="footer">
<div class="aq">
<a href="#">把百度设置为安全首页</a>
</div>
<div class="ws">
<a href="#">安装百度卫士</a>|
<a href="#">加入百度推广</a>|
<a href="#">搜索风云榜</a>|
<a href="#">关于百度</a>|
<a href="#">About baidu</a>
</div>
<span>©2018 Baidu 使用百度前必读 京IC证666号</span>
</div>
</body>
</html>