html简单网页分布设计

最新推荐文章于 2023-11-24 01:02:05 发布

朝去夜来

最新推荐文章于 2023-11-24 01:02:05 发布

阅读量2k

点赞数 3

分类专栏： html 文章标签： css html html5

本文链接：https://blog.csdn.net/wenqi1/article/details/119962389

版权

html 专栏收录该内容

19 篇文章

订阅专栏

建议先往后翻看图，看有没有需要再看代码。

我们首先要对网页的整体页面进行规划，分出区域，下面对大框架的区域分布写个例子：

<!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>&copy;2018 Baidu 使用百度前必读 京IC证666号</span>
		
    </div>
</body>
</html>