`

css+div页面布局之1 -- 自适应

    博客分类:
  • css
阅读更多

 

浮动 float 属性:定义元素在哪个方向浮动。float:left  | right |  none

                       浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

外边距 margin属性:百分数是相对于父元素的 width 计算的。

 

页面div:

 

 <div id="container">
	 <div id="wrapper"><!-- 主体文字 -->
		<div id="content"><p><strong>1) Content here.</strong></p></div>
	 </div>
	 <div id="navigation"><p><strong>2) right part here.</strong></p></div>
	 <div id="extra"><p><strong>3) left part here.</strong></p></div>	 
 </div>

 

 

1:2:1自适应布局:

 

 

<style type = "text/css">
	div#wrapper{float:left;width:100%}
	div#content{margin: 0 25%;width:100%;}
	div#navigation{float:left;width:25%;margin-left:-25%;background:#B9CAFF}
	div#extra{float:left;width:25%;margin-left:-100%;background:#FF8539}
</style>

 

 

 2:1:1自适应布局:

 

 

 

  
<style type = "text/css">
	div#wrapper{float:left;width:100%}
	div#content{margin-left:0;width:100%;}
	div#navigation{float:left;width:25%;margin-left:-50%;background:#B9CAFF}
	div#extra{float:left;width:25%;margin-left:-25%;background:#FF8539}
  </style>

 

 

1:1:2自适应布局:

 

 

<style type = "text/css">
	div#wrapper{float:left;width:100%}
	div#content{margin-left: 50%;width:100%;}
	div#navigation{float:left;width:25%;margin-left:-100%;background:#B9CAFF}
	div#extra{float:left;width:25%;margin-left:-75%;background:#FF8539}
 </style>
  • 大小: 7.1 KB
  • 大小: 6.4 KB
  • 大小: 13 KB
  • 大小: 8.2 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics