html+css+div网页布局实例

最新推荐文章于 2024-05-24 12:47:35 发布

yayun0516

最新推荐文章于 2024-05-24 12:47:35 发布

阅读量8.8k

点赞数 9

分类专栏： css 文章标签： html css div 流式布局

本文链接：https://blog.csdn.net/yayun0516/article/details/41477933

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>主页示例</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/><span style="white-space:pre">	</span>
</head>


<body>
<span style="white-space:pre">	</span><div id="banner">页首div</div>
<span style="white-space:pre">	</span><div id="content">
<span style="white-space:pre">		</span><div id="left">栏目一</div>
<span style="white-space:pre">		</span><div id="center">栏目二</div>
<span style="white-space:pre">		</span><div id="right">栏目三</div>
<span style="white-space:pre">	</span></div>
<span style="white-space:pre">	</span><div id="foot">页脚</div>
</body>
</html>

.css代码如下：

#banner,#content,#foot{width:750px;margin:0 auto}
#banner{
	text-align:center;
	height:50px;
	background:#ab0;
	border-top:1px solid #f00;
	padding-top:10px;
	padding-left:8px;
	margin-top:-10px;
        font-size:30px;
        font-weight:bold;
        letter-spacing :0.5em;
	
}
#content{
	margin-top:5px;
	height:300px;
	background:#fba;
	
	
}
#foot{
	margin-top:5px;
	height:150px;
	background:#aba;
        text-align:center;
}
#left{
	width:150px;
	height:200px;
	float:left;
	border:1px solid #0ba;
	margin-right:5px;
}
#center{
	width:300px;
	height:200px;
	float:left;
	border:1px solid #f00;
	margin-right:5px;
}
#right{
	width:280px;
	height:200px;
	float:left;
	border:1px solid #0ff;
}

效果如下：