After That, We Put Some Content in The Different Sections:
Document Heading
- Option 1
- Option 2
...
Column 1
Lorem Ipsum Dolor Sit Amet, ConnecTuer Adipiscing Elit ...
Column 2
Lorem Ipsum Dolor Sit Amet, ConnecTuer Adipiscing Elit ...
- link 1
- link 2
...
footer
NOW WE HAVE A Completely Unstyled XHTML Document Which IS Structured In a Way That Lets US Uses.
View Step 1.
2. Adjust
to make the content reach the Edge the Browser WINDOW, We set the Browser WINDOW, We set The Element's margin and padding to zero. We Also Specify Colors for Text And Background.Body {
Margin: 0;
Padding: 0;
Background-color: # a7a09a;
Color: # 000;
}
View Step 2.
3. On to the main containers
After that it's time to give the content area a width and center it horizontally. We do that by specifying the width and margins of the main container, #wrap. We also give it a background colour to make it show up on the page.
The method we use to center the content is based on the fact that when an element's left and right margins are set to auto, they will share whatever is left when the element's width has been subtracted from that of its container. In this case the width of #wrap will be subtracted from the width of the browser window. to avoid problems that can occur in some browsers when the window is narrower than #wrap We set the
element's min-width to the same value as the width of # WRAP.Body {
Margin: 0;
Padding: 0;
Background-color: # a7a09a;
Color: # 000;
MIN-Width: 750px;
}
#wrap {
Background: # 99c;
MARGIN: 0 Auto;
Width: 750px;
}
After That, We Give The Different Sections of The Document Different Background Colors To make the show up.
#header {
Background-color: #ddd;
}
#NAV {
Background-color: # c99;
}
#main {
Background-color: # 9c9;
}
#sidebar {
Background-color: # c9c;
}
#footer {
Background-color: # cc9;
}
View Step 3.
4. Place the columns side by side
...................
#main {
Background-color: # 9c9;
FLOAT: LEFT;
Width: 500px;
}
#sidebar {
Background-color: # c9c; width: 247px;
Margin-left: 500px;
}
HTML> Body #SIDEBAR {
Width: 250px;
}
Note that the width of #sidebar is first set to 247px to work around IE / Win's three-pixel-margin bug. We then use a child selector, which IE / Win does not understand, to give the correct width to better browsers.
This will be #sidebar appear to the right of #main, but the footer is not where it.
View Step 4.
5. Push the footer down
The footer does not get pushed down to the bottom of the content because of the way float works. When you float an element, it is removed from the document flow, which makes elements that appear further down in the XHTML code end up where they .
To Avoid this We Use the Clear Property to Tell The Footer That It can't Have Any Elements next to it.
#footer {
Background-color: # cc9;
Clear: Both;
}
View Step 5.
6. Fix The Background Color
No we can seeten't continue all the way down to the footer. To make it it... To make it...................
#sidebar {
Background-color: # 99c;
Width: 247px;
Margin-left: 500px;
}
View Step 6.
7. make the navigation bar horizontal
#NAV Contains a regular unordered List of links. Since We don't want it to look like an unordered List WE Restyle IT.
#NAV UL {
Margin: 0;
Padding: 0;
}
#NAV Li {
DISPLAY: INLINE;
List-style: none;
Margin: 0;
Padding: 0;
}
View Step 7.
8. Adjust Margins
Finally, WE Adjust The Margin and Padding of Some Elements to make the layout a little less cramped.
#header h1 {
Padding: 5px;
Margin: 0;
}
#NAV {
Background-color: # c99; padding: 5px;
}
#main h2, #main h3, #main p {
Padding: 0 10px;
}
#sidebar ul {
Margin-bottom: 0;
}
#sidebar h3, #sidebar p {
Padding: 0 10px;
}
#footer p {
Padding: 5px;
Margin: 0;
}
.
View the final layout.
转载请注明原文地址:https://www.9cbs.com/read-43316.html
New Post(0)