16 cases of basic layout of CSS
Single row
The related pictures of this topic are as follows: single line single column 1: Float floats in the upper left corner, fixed width.
#content {float: Left; Padding: 10px; Margin: 20px; Background: #fff; Border: 5px Solid # 666; width: 400px; / * ie5win fulge begins * / voice-family: "/"} / "" Voice-family: inherit; width: 370px;} html> body #content {width: 370px; / * ie5win fulge ends * /}
The related pictures of this topic are as follows: single line single column 2: fixed in the upper left corner, fixed width, is a absolute (ABSOLUTE) positioning.
#Content {Position: Absolute; Top: 0px; Left: 0px; padding: 10px; Margin: 20px; Background: #fff; border: 5px solid # 666; width: 400px; / * ie5win fulge begins * / voice-family: "/"} / ""; Voice-Family: inherit; width: 370px;} HTML> Body #Content {Width: 370px; / * ie5win fudge ends * /}
The related pictures of this topic are as follows: single line single column 3: fixed in the upper left corner, not fixed width, using a percentage (%) defined width from the Adaptive page.
#Content {Position: Absolute; Top: 0px; Left: 0px; Margin: 20px; Background: #fff; Border: 5px Solid # 666; width: 74%; / * IE5win fulge begins * / padding: 10px 10% 10px 15 %; Voice-Family: "/"} / ""; Voice-Family: inherit; width: 55%; Padding: 10px 9% 10px 11%;} HTML> Body #Content {Width: 55%; Padding: 10px 9 % 10px 11%;} / * ie5win fulge ends * /
The related pictures of this topic are as follows: single line single column 4 (recommended): fixed width, use in the Body style to define the hidden attribute (Text-align: center;) implementation adaptation page automatic home.
Body {margin: 0px 0px 0px 0px; Padding: 0px 0px 0px 0px; font-family: Verdana, Arial, Helvetica, Sans-Serif; Color: # c060; background-color: #ccc; text-align: center; / * Part 1 of 2 centering hack * /} # in {width: 400px; padding: 10px; margin-top: 20px; margin-kettom: 20px; margin-right: auto; margin-left: auto; / * Opera Does Not Like 'Margin: 20px auto' * / background: #fff; Border: 5px Solid # 666; Text-Align: Left; / * Part 2 of 2 Centering Hack * / Width: 400px; / * ie5win fulge begins * / voice-family : "/"} / ""; voice-family: inherit; width: 370px;} html> body #content {width: 370px; / * ie5win fulge ends * /} single line two columns
The related pictures of this topic are as follows: 2 columns 1: Two columns are fixed width. The first column floats in the upper left corner, the second row floates to the right of the first column.
left
#Content {FLOAT: LEFT; Padding: 10px; Margin: 20px; Background: #fff; border: 5px solid # 666; width: 300px; / * ie5win fulge begins * / voice-family: "/"} / "" Voice-family: inherit; width: 270px;} html> body #content {width: 270px; / * ie5win fulge ends * /}
right
# Content2 {Float: Left; Padding: 10px; Margin: 20px; Background: #fff; Border: 5px Solid # 666; width: 300px; / * ie5win fulge begins * / voice-family: "/"} / "; Voice-family: inherit; width: 270px;} html> body # content2 {width: 270px; / * ie5win fulge ends * /}
The related pictures of this topic are as follows: 2 columns 2: Two columns percentage width, but not full screen. The first column is fixed in the upper left corner, and the second row floates to the right of the first column.
Upper left
#Content {FLOAT: LEFT; Padding: 10px 2% 10px 2%; Margin: 20px 1% 20px 2%; Background: #fff; Border: 5px Solid # 666; width: 44%; / * IE5win fulge begins * / voice -family: "/"} / "" "" "" "" "" ", Voice-Family: inherit; width: 41%;} HTML> Body #content {width: 41%; / * IE5win fudge ends * /}
Lower right
# Content2 {FLOAT: Right; Padding: 10px 2% 10px 2%; Margin: 20px 2% 20px 1%; Background: #fff; Border: 5px Solid # 666; Width: 44%; / * IE5win fulge begins * / voice -family: "/"} / ""; voice-family: inherit; width: 41%;} HTML> Body # content2 {width: 41%; / * IE5win fulge ends * /} This topic related pictures are as follows: single line two Column 3: Two columns are percentage width, full screen. Both columns use absolute positioning.
left
#Content {Position: Absolute; Top: 0px; Left: 0px; Padding: 10px 2% 10px 2%; Margin: 0px; Border: 0px; Background: #fff; width: 50%; / * IE5win fulge begins * / voice -family: "/"} / "" "; voice-family: inherit; width: 46%;} HTML> body #content {width: 46%; / * IE5win fulge ends * /}
right
# Content2 {Position: Absolute; Top: 0px; Right: 0px; / * Opera5.02 Will Show a Space at right means: 10px 2% 10px 2%; Margin: 0px; border: 0px Background: #fff; width: 50%; / * IE5win fulge begins * / voice-family: "} /" "; voice-family: inherit; width: 46%;} HTML> Body # content2 {width: 46%; / * ie5win fudge ends * /} / * Opera5.02 shows a 2px gap between. N6.01win sometimes does. Depends on Amount of Fill and Window Size and WIND DIRECTION. * /
The related pictures of this topic are as follows: 2 columns of single lines 4: Two columns are percentage width, full screen. The first column floats in the upper left corner, the second row floats in the upper right corner.
Upper left
#Content {FLOAT: LEFT; Padding: 10px 2% 10px 2%; Margin: 0px; Border: 0px; Background: #fff; width: 50%; / * IE5win fulge begins * / voice-family: "} / ""; voice-family: inherit; width: 46%;} html> body #content {width: 46%; / * ie5win fudge ends * /}
Lower right
# Content2 {FLOAT: Right; / * Opera5.02 Will Show a Space At right when it is no scroll bar * / padding: 10px 2% 10px 2%; Margin: 0px; border: 0px; Background: #fff; width: 50%; / * IE5win fulge begins * / voice-family: "/"} / ""; voice-family: inherit; width: 46%;} HTML> Body # content2 {width: 46%; / * ie5win fudge ends * /} / * Opera5.02 shows a 2px Gap Between. N6.01WIN Sometimes Does. Depends on Amount of Fill and Window Size and Wind Direction. * / This topic is as follows: single line two column 5: two columns percentage width Full screen. The first column floats in the upper left corner, the second row floates to the right of the first column.
#Content {FLOAT: LEFT; Padding: 10px 2% 10px 2%; Margin: 0px; Border: 0px; Background: #fff; width: 50%; / * IE5win fulge begins * / voice-family: "} / ""; voice-family: inherit; width: 46%;} html> body #content {width: 46%; / * ie5win fudge ends * /}
# Content2 {FLOAT: LEFT; / * OPERA5.02 WILL SHOW A SPACE AT RIGHT WHEN IRE IS No Scroll Bar * / Padding: 10px 2% 10px 2%; Margin: 0px; Border: 0px; Background: #fff; width: 50%; / * IE5win fulge begins * / voice-family: "/"} / ""; voice-family: inherit; width: 46%;} HTML> Body # content2 {width: 46%; / * ie5win fudge ends * /}
Single line three columns
The related pictures of this topic are as follows: single line three columns 1: The left and right columns are absolutely positioned (right column is positioned on the right). The left column and the right column fixed width, the intermediate column adaptive page.
# left {position: absolute; Top: 0px; Left: 0px; Margin: 20px; Padding: 10px; border: 5px solid # 666; background: #fff; width: 150px; / * ie5win fulge begins * / voice-family: "/"} / ""; voice-family: inherit; width: 120px;} HTML> body #lex {Width: 120px; / * ie5win fulge ends * /} # middle {margin: 20px 190px 20px 190px; padding: 10px Border: 5px Solid # 666; Background: #fff;} #right {position: absolute; top: 0px; Right: 0px; / * Opera5.02 Will show a space at right when it is no scroll bar * / margin: 20px; padding: 10px; border: 5px solid # 666; background: #fff; width: 150px; / * ie5win fulge begins * / voice-family: "/"} / "; voice-family: inherit; width: 120px HTML> Body Right {Width: 120px; / * IE5win fudge ends * /} This topic related pictures are as follows: single line three columns 2: The left column is positioned on the left, and the right column is positioned on the right, the middle is floating on the left. The left column and the right column fixed width, the intermediate column adaptive page.
# left {position: absolute; Top: 0px; Left: 0px; Margin: 20px; Padding: 10px; border: 5px solid # 666; background: #fff; width: 150px; / * ie5win fulge begins * / voice-family: "/"} / ""; voice-family: inherit; width: 120px;} HTML> body #lex {Width: 120px; / * ie5win fulge ends * /} # middle {margin: 20px 190px 20px 190px; padding: 10px Border: 5px Solid # 666; Background: #fff;} body> #middle {float: left; / * Required by n6.01win, and must be hidden from ie5win. * /} #right {position: Absolute; TOP: 0px; Right: 0px; / * Opera5.02 Will Show a Space at right when it is no scroll bar * / margin: 20px; padding: 10px; border: 5px solid # 666; background: #fff; width: 150px; / * IE5win fulge begins * / voice-family: "/"} / ""; voice-family: inherit; width: 120px;} html> body #right {width: 120px; / * ie5win fulge ends * /}
This topic related pictures are as follows: single line three columns 3: three columns are absolutely positioned. The left column and the right column fixed width, the intermediate column is adaptive according to the content. # left {position: absolute; Top: 0px; Left: 0px; Margin: 20px; Padding: 10px; border: 5px solid # 666; background: #fff; width: 150px; / * ie5win fulge begins * / voice-family: "/"} / ""; voice-family: inherit; width: 120px;} html> body #lex {width: 120px; / * ie5win fudge ends * /} #MIDDLE {Position: absolute; margin: 20px 190px 20px 190px ; Top: 0px; Left: 0px; Padding: 10px; Border: 5px Solid # 666; Background: #fff;} #right {position: absolute; top: 0px; Right: 0px; / * Opera5.02 Will show a Space At right when there is no scroll bar * / margin: 20px; padding: 10px; border: 5px solid # 666; background: #fff; width: 150px; / * ie5win fulge begins * / voice-family: "/"} / ""; voice-family: inherit; width: 120px;} html> body #right {width: 120px; / * ie5win fulge ends * /}
The related pictures of this topic are as follows: single line three columns 4 (recommended): similar pattern 2, just add Margin: 20px attributes in the Body style, solve the problem of the middle column in Netscape6.0.
Body {margin: 20px 0px 0px 0px; / * n6.01win-mac Won't recognize top margin for middle box, so it goes here * / padding: 0px 0px 0px 0px; font-family: Verdana, Arial, Helvetica, Sans -serif; # 060; background-color: #ccc;} # left {position: absolute; top: 0px; Left: 0px; Margin: 20px; Padding: 10px; border: 5px solid # 666; background: #fff Width: 150px; / * IE5win fulge begins * / voice-family: "/"} / ""; voice-family: inherit; width: 120px;} html> body #lex {Width: 120px; / * ie5win fulge ends * /} # Middle {margin: 0px 190px 20px 190px; / * n6.01win N6mac Won't recognize top margin for middle box, so it goes in body * / padding: 10px; border: 5px solid # 666; background: # FFF;} #right {position: absolute; top: 0px; Right: 0px; / * Opera5.02 Will show a space at right switch: 20px; padding: 10px; border: 5px solid # 666; Background: #fff; width: 150px; / * ie5win fulge begins * / voice-family: "} /" "; voice-family: inherit; width: 120px;} html> body #Righ T {width: 120px; / * IE5win fulge Ends * /} This topic related pictures are as follows: single line three columns 5: Left and right columns absolutely positioned, middle columns adaptive. Width full screen.
# left {position: absolute; top: 0px; Left: 0px; margin: 0px; padding: 10px; border: 0px; Background: #fff; width: 190px; / * ip5win fulge begins * / voice-family: "/" } / ""; voice-family: inherit; width: 170px;} HTML> body #lex {width: 170px; / * ie5win fudge ends * /} #MIDDLE {Padding: 10px; border: 0px; background: #fff; / * IE5win fulge begins * / margin: -20px 190px 0px 190px; Voice-Family: "/"} / ""; voice-hmily: inherit; margin-top: 0px;} html> body #mostdle {margin-top: 0px; / * ie5win fulge ends * /} # {position: absolute; top: 0px; Right: 0px; / * Opera5.02 Will show a space at right when it is no scroll bar * / margin: 0px; Padding: 10px; border: 0px; background: #fff; width: 190px; / * ip5win fulge begins * / voice-family: "} /"; voice-family: inherit; width: 170px;} html> body #right {Width: 170px; / * IE5win fulge Ends * /} Top three columns
The related pictures of this topic are as follows: Top line three columns 1 (recommended): The top line adaptive page width. Left right column absolute positioning, the middle column adaptive page.
#top {margin: 20px 20px 0px 20px; padding: 10px; border: 5px solid # 666; background: #fff; height: 100px; / * ie5win fulge begins * / voice-family: "/"} / "; voice -family: inherit;} html> body #top {height: 70px; / * i i {{position: absolute; top: 120px; Left: 0px; margin: 20px; padding: 10px Border: 5px Solid # 666; Background: #fff; width: 150px; / * IE5win fulge begins * / voice-family: "} /" "; voice-family: inherit; width: 120px;} html> body # {width: 120px; / * IE5win fulge ends * /} # middle {margin: 20px 190px 20px 190px; padding: 10px; border: 5px solid # 666; background: #fff;} #right {position: absolute; top : 120px; Right: 0px; / * Opera5.02 Will Show a Space at right when it is no scroll bar * / margin: 20px; padding: 10px; border: 5px solid # 666; background: #fff; width: 150px; / * IE5win fulge begins * / voice-family: "/"} / ""; voice-family: inherit; width: 120px;} html> body #right {width: 120px; / * ip5win fudge ends * /} This topic The related pictures are as follows: Top line three columns 2: Width Full screen
