Div+CSS构建三行三列框架

要构建的框架如图所示:
Div+CSS构建三行三列框架_第1张图片
方法一:使用div的浮动窗口属性
显然,页面布局到下是三层结构,中间的div包含三个小div;因为div是块元素,占用文档流的一行空间,要使一行中出现多个div,需要为div设置浮动样式。代码如下


<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#header{
				background-color: aquamarine;
				height: 120px;
			}			
			#main{
				background-color: antiquewhite;
				height: 120px;
			}
			
			#footer{
				background-color: blueviolet;
				height: 120px;
			}
			#left{
				width: 30%;
				height: 120px;
				background-color: burlywood;
				float: left;
				}
			#center{
				width: 40%;
				height: 120px;
				background-color: brown;
				float: left;
				
				
			}
			#right{
				width: 30%;
				height: 120px;
				background-color: chartreuse;
				float: right;
				
			}			
		style>
		<title>title>
	head>
	<body>
		<div id="header">			
		div>		
		<div id="main">
			
			<div id="left">	
					左窗口
			div>
			
			<div id="center">
				中间窗口
			div>	
			
			<div id="right">				
				右窗口
			div>
			
					
		div>		
		<div id="footer">			
		div>		
	body>
html>

方法二:因为div被设置成浮动元素之后,就不会占用文档流中的位置,所以是否可以让左边的div向左浮动,右边的div向右浮动,中间的div不设置浮动,,左右两边div悬浮与自己div的上方,而仅仅设置中间div的padding填充属性。具体代码如下:
这里要注意的是,三个div的放置顺序,一定要是先左右两边的div,然后放置中间的div,不然会引起混乱。(我的理解是正常元素可能会忽略浮动元素的位置,但是浮动元素并不能忽略正常元素的位置,如果理解错误,以后在改正)


<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#header{
				background-color: aquamarine;
				height: 120px;
			}			
			#main{
				background-color: antiquewhite;
				height: 120px;
			}
			
			#footer{
				background-color: blueviolet;
				height: 120px;
			}
			#left{
				width: 30%;
				height: 120px;
				background-color: burlywood;
				float: left;
			}
			#center{
				/*width: 40%;*/
				height: 120px;
				background-color: brown;
				padding-left: 0px 30%;/*左右两边填充30%的位置,用来显示两边的div*/
				
			}
			#right{
				width: 30%;
				height: 120px;
				background-color: chartreuse;
				float: right;
			}			
		style>
		<title>title>
	head>
	<body>
		<div id="header">			
		div>		
		<div id="main">
			<div id="left">				
			div>
			<div id="right">				
			div>
			<div id="center">				
			div>			
		div>		
		<div id="footer">			
		div>		
	body>
html>

你可能感兴趣的:(Web前端开发,html,css)