It's a cainiao. It may not be well written or clear enough. I still forget about the prawns and hope I can study with the novice.
First of all, I think Div + CSS style layout is very simple, just simple attributes, and attribute values. But if I want to use him well, I think it is an art that cannot be used quickly.
Div + CSS follows the webpage standard design, that is, the Web Standard. The most important part of the Web standard is the semantic structure (defined separately, with clearly defined blocks and enhanced reuse, code is easy to read ).
Core of Div layout: CSS box mode
CSS each Div box mode includes content, padding, border, and margin)
The design idea of using Div + CSS is as follows:
1. Use Div to define the semantic structure and partition the page.
2. Then, use CSS to beautify the webpage, such as adding the background, line borders, and alignment attributes;
3. Add content, such as text and images, to the CSS-defined box.
Code Demonstration: (simple partitioning)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
</Head>
<Style type = "text/CSS">
Body {
Background-color: # ffccff;
Margin: 1px 0px 0px 0px;
Padding: 0px;
Font-size: 12px;
Font-family: Arial, Helvetica, sans-serif;
}
# Container {
Position: relative;
Margin: 0px auto 0px auto;
Width: 400px;
Text-align: center;
Height: 900px;
}
# Header {
Width: auto;
Margin: 0 auto;
Height: 100px;
Background: # ffcc99;
Border: 1px solid # 0000ff;
}
# Main {
Width: auto;
Margin: 0 auto;
Height: 200px;
Background: # ffffcc;
Border: 1px solid # ff0000;
}
# Footer {
Width: auto;
Margin: 0 auto;
Height: 100px;
Background: #00 FFFF;
Border: 1px solid # 9999ff;
}
</Style>
<Body>
<Div id = "Container">
<Div id = "Header"> the header contains the box such as navigation. </div>
<Div id = "Main"> the content part includes all the content on the page/box (text, image, information, consulting...) </div>
<Div id = "footer"> copyright holder's copyright license and hyperlink) </div>
</Div>
</Body>
</Html>
Display Effect:
Then you can set a CSS attribute for each block by block (or box. For example, background-color background color setting background-image background pattern, font-size: font size, color: font color, and so on can all achieve extraordinary results.
When creating a webpage: The Box width in CSS is calculated. The best browsing effect is 960-970px (refer to this width for large websites such as Sina, Alibaba bar, and Yahoo, however, as long as the width is set within PX, the display is normal)
Secondly, when writing CSS, you should pay attention to the compatibility between IE and FF browsers, and consider the Display Effect of the browser when the user browses our website.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
