03.net网站开发（前端）：3.Div+Css布局

923723914

浏览: 632922 次

最近访客更多访客>>

rattersnake

u012363178

jiefengwen

wanghaojava

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1376)

社区版块

存档分类

上一讲是关于CSS，这次DIV+CSS理解完了之后，就可以开始开发网站咯！我觉得在开始开发网站之前，就算无法设计一个漂亮的网页，但起码要理解好DIV+CSS进行布局和样式控制。这样至少还知道怎么修改别人的模板，知道怎样灵活输出对应的内容到对应的区域。

我的微薄：http://weibo.com/u/2448939884 欢迎程序员互粉。

<style type="text/css">
	*{
		/* 全局标签 */
		margin:0px 0px; /* 未设置的区域，全部紧贴临近区域 */
	}
	#container{
		background-color:#0066FF;
		width:70%;
		height:500px;
		margin:0px auto;/* 水平居中 */
	}
	#container #header{
		background-color:#990066;
		height:100px;
	}
	#container #body{
		background-color:#00FF66;
		height:400px;
	}
	#container #body #l-img{
		float:left; /* 设置左浮动，成为下个要浮动的区域的停靠点（如果这里不设置为浮动，那content区域将浮动在body，而不是跟在l-img后面） */
		background-color:#00FF00;
		width:30%;
		height:100%;
	}
	#container #body #content{
		float:left;  /* 设置左浮动，默认左浮动到父区域 */
		background-color:#CC9900;
		width:70%;
		height:100%
	}
	#container #footer{
		background-color:#666666;
		height:100px;
	}
</style>
</head>

<body>
	<div id="container">
		<div id="header">头部Logo、导航等</div>
		<div id="body">
			<div id="l-img">左方图片区</div>
			<div id="content">右方内容区</div>
		</div>
		<div style="clear:both"></div> <!--清除浮动-->
		<div id="footer">底部</div>
	</div>
</body>

在这里我无法详细去说明CSS标签选择器的各个规则，但这些规则适用于以后要将的jQuery，到时再一起讲述。

分享到：