DIV+CSS Standardized web design common learning methods and skills

CSS Layout Common methods


Float:none|left|right


Value:


None: Default value. object does not float


left: Text flows to the right of the object


Right: Text flows to the left side of the object





How it works, look at a row and two columns of examples


XHTML Code:


<div id= "wrap" >


<div id= "Column1" > here is the first column </div>


<div id= "Column2" > This is the second column </div>


<div class= "clear" ></div>/* This is contrary to the Web standard intent, just to show that the elements underneath it need to be cleared floating * * *


</div>





CSS Code:


#wrap {Width:100;height:auto;}


#column1 {float:left;width:40;}


#column2 {float:right;width:60;}


. Clear{clear:both}








position:static|absolute|fixed|relative


Value:


static: Default value. No special location, objects follow HTML positioning rules


Absolute: Drag objects out of the document stream, using attributes such as Left,right,top,bottom to be absolutely positioned relative to the parent object closest to one of the most positioned settings. If no such parent object exists, it is based on the body object. And its cascade is defined by the Z-index attribute


fixed: not supported. Object positioning conforms to an absolute (absolute) approach. But there are some rules to follow


relative: Objects cannot be stacked, but will be offset in the normal document stream based on attributes such as Left,right,top,bottom





it to implement an example of a row and two columns


XHTML Code:


<div id= "wrap" >


<div id= "Column1" ><a href=http://www.qpsh.com> This is the first column </a></div>


<div id= "Column2" > This is the second column </div>


</div>





CSS Code:


#wrap {position:relative;/* relative positioning */width:770px;}


#column1 {position:absolute;top:0;left:0;width:300px;}


#column2 {position:absolute;top:0;right:0;width:470px;}





What's the difference between them?


Obviously, float is relative positioning, will change with the browser size and resolution changes, and position is not, so generally or float layout!





CSS Common layout instances


One-line column


Body{margin:0px;padding:0px;text-align:center;}


#content {margin-left:auto;margin-right:auto;width:400px;}


two rows and one column


Body{margin:0px;padding:0px;text-align:center;}


#content-top{margin-left:auto;margin-right:auto;width:400px;}


#content-end{margin-left:auto;margin-right:auto;width:400px;}


three rows a column


Body{margin:0px;padding:0px;text-align:center;}


#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}


#content-mid{margin-left:auto;margin-right:auto;width:400px;}


#content-end{margin-left:auto;margin-right:auto;width:400px;}


single row two columns


#bodycenter {Width:700px;margin-right:auto;margin-left:auto;overflow:auto;}


#bodycenter #dv1{float:left;width:280px;}


#bodycenter #dv2{float:right;width:420px;}


two rows of two columns


#header {Width:700px;margin-right:auto;margin-left:auto;overflow:auto;}


#bodycenter {Width:700px;margin-right:auto;margin-left:auto;overflow:auto;}


#bodycenter #dv1{float:left;width:280px;}


#bodycenter #dv2{float:right;width:420px;}


three rows two columns


#header {Width:700px;margin-right:auto;margin-left:auto;}


#bodycenter {Width:700px;margin-right:auto;margin-left:auto;}


#bodycenter #dv1{float:left;width:280px;}


#bodycenter #dv2{float:right;width:420px;}


#footer {width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}





single row three column


Absolute Positioning


#left {position:absolute;top:0px;left:0px;width:120px;}


#middle {margin:0px190px0px190px;}


#right {position:absolute;top:0px;right:0px;width:120px;}





float positioning a


XHTML Code:


<div id= "wrap" >


<div id= "column" >


<div id= "Column1" > here is the first column </div>


<div id= "Column2" > This is the second column </div>


<div class= "clear" ></div>/* usage Web standards are not recommended, but remember that the following elements need to be cleared for floating * * *


</div>


<divid= "Column3" > here is the third column </div>


<divclass= "Clear" ></div>/* usage Web standards are not recommended, but remember that the following elements need to be cleared for floating * * *


</div>


CSS Code:


#wrap {Width:100;height:auto;}


#column {float:left;width:60;}


#column1 {float:left;width:30;}


#column2 {float:right;width:30;}


#column3 {float:right;width:40;}


. Clear{clear:both;}





Float Position two


XHTML Code:


<div id= "center" class= "column" >


<h1>Thisisthemaincontent.</h1>


</div>


<div id= "left" class= "column" >


<h2>Thisistheleftsidebar.</h2>


</div>


<div id= "right" class= "column" >


<h2>Thisistherightsidebar.</h2>


</div>


CSS Code:


body{


margin:0;


padding-left:200px;/*lcfullwidth*/


padding-right:190px;/*rcfullwidth ccpadding*/


min-width:200px;/*lcfullwidth ccpadding*/


} 


. column{


position:relative;


Float:left;


} 


#center {


width:100;


} 


#left {


width:200px;/*lcwidth*/


right:200px;/*lcfullwidth*/


margin-left:-100;


} 


#right {


width:190px;/*rcwidth*/


margin-right:-100;


}