并列与嵌套div结构

前端之家收集整理的这篇文章主要介绍了并列与嵌套div结构前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

<!doctype html>
<html lang="en">
 <head>
  <Meta charset="UTF-8">
  <Meta name="Generator" content="EditPlus®">
  <Meta name="Author" content="">
  <Meta name="Keywords" content="">
  <Meta name="Description" content="">
  <title>并列与嵌套div结构</title>
  <style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	body{
		background:blue;
	}
	#header{
		margin:0 auto;
		height:200px;
		background:red;
	}
	#center{
		margin:0 auto;
		height:500px;
		background:yellow;
	}
	#footer{
		margin:0 auto;
		height:200px;
		background:pink;
	}
	#left #right{

	}
	#left{
		background:green;
		float:left;
		height:500px;
		width:50%;
		margin-left:0px;
	}
	#right{
		background:black;
		float:left;
		height:500px;
		width:50%;
		margin-right:0px;
	}
  </style>
 </head>
 <body>
	<div id="header">头部</div>
	<div id="center">
		<div id="left">左分栏</div>
		<div id="right">右分栏</div>
	</div>
	<div id="footer">底部</div>
 </body>
</html>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

原文链接:https://www.f2er.com/html/457409.html

猜你在找的HTML相关文章