Technical skills of common Div+css Web page making and layout

Source: Internet
Author: User
Tags object end header reference relative
css| Skills | Web page CSS Layout common methods: Float:none|left|right
Take value:
None: default value. object does not float
Left: text flows to the right of the object
Right: text flows to the left of the object

How does it work, look at a row and two columns of examples
XHTML code:
The following is a reference fragment:
<div id= "Wrap" >
<div id= "Column1" > here is the first column </div>
<div id= "Column2" > here 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 for floating * *
</div>

CSS code:
The following is a reference fragment:
#wrap {Width:100;height:auto;}
#column1 {float:left;width:40;}
#column2 {float:right;width:60;}
. Clear{clear:both;}


position:static|absolute|fixed|relative
Take 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 property
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:
The following is a reference fragment:
<div id= "Wrap" >
<div id= "Column1" > here is the first column </div>
<div id= "Column2" > here is the second column </div>
</div>

CSS code:
The following is a reference fragment:
#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 is 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

single row one column
The following is a reference fragment:
Body{margin:0px;padding:0px;text-align:center;}
#content {margin-left:auto;margin-right:auto;width:400px;}

two rows and one column
The following is a reference fragment:
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 one column
The following is a reference fragment:
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
The following is a reference fragment:
#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, two columns.
The following is a reference fragment:
#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
The following is a reference fragment:
#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 columns

Absolute Positioning

The following is a reference fragment:
#left {position:absolute;top:0px;left:0px;width:120px;}
#middle {margin:0px190px0px190px;}
#right {position:absolute;top:0px;right:0px;width:120px;}


Float Positioning
XHTML code:
The following is a reference fragment:
<div id= "Wrap" >
<div id= "column" >
<div id= "Column1" > here is the first column </div>
<div id= "Column2" > here 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:
The following is a reference fragment:
#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 Positioning two
XHTML code:
The following is a reference fragment:
<div id= "center" class= "column" >
</div>
<div id= "left" class= "column" >
</div>
<div id= "Right" class= "column" >
</div>
CSS code:
The following is a reference fragment:
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;
}



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.