Home > Developer > Web Develop
Introduced
This layout is based on a sectional view and then translates it into an HTML page, but the purpose of the introduction is not limited to this particular example, but can be used for all subsequent layout procedures.
Before we begin, we need to have a few guidelines to guide us, to prevent us from going astray, being obsessed, and poisoning too deeply:
One step at a time, each step with a set of browsers to test the beginning of the layout of the first step is very easy, but the halfway encountered the problem is not what we expected. To prevent this from happening, we use a set of browsers to test each step. This way you can clearly see how the layout is going, and you can avoid some problems.
Check your HTML code and CSS often to check your HTML code and CSS, so a lot of layout problems can be solved.
Here are two addresses that will help you:
①WC3 HTML Validator
②WC3 CSS Validator
Before you start designing a CSS layout, you should think about the browsers you want to support or how far you support them. Customers, users, test log files, and so on, may help you a certain amount.
Step2. Viewing the container layoutLook at your design and think about which containers are the main components.
Step3. Naming a containerThe container described above will be the container for placing content in your page layout, so you need to give them a name that describes their characteristics, like
If these containers are unique to the page, they are indicated by the last ID in the tag code, not the class. This is important when writing styles for other elements, because when a conflict occurs, the style identified with the ID overrides the code identified by the class.
Step4. Start writing styles and codeFirst determine the document type, where we use the Html4.01strict
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
Then add header information and character encodings, and name the outer style style.css
Finally, add some of the elements we analyzed above:
<body> <div id= "container" > <div id= "header" title= "sitename" > <div id= "Skipmenu" >< ; a href= "#content" >skip to content</a></div> Step6. Specifying stylesStep7. Finally, some refinement work is requiredBody { margin:0; padding:0; Background: #ddd; } #container { margin:1em auto; width:650px; Background: #fff; } #header {background: #CF3;} #mainnav {background: #9F3;} #menu { float:right; width:165px; Background: #6F9; } #contents { float:left; width:440px; Background: #9FC; margin:0 0 0 20px; } #footer { clear:both; Background: #FF9; }Random Talk about CSS layout
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
