Home > Developer > Web Develop
On css layout and on css
Introduction
This layout is based on a cross-section graph and then converted into an html page. However, the purpose of this introduction is not limited to this specific example, but can be used for all subsequent layout processes.
Before we begin, we need to have several guidelines to guide us so as to prevent us from going astray and suffering from viruses:
Each step is carried out, and each step uses a set of browsers to test the layout. It is easy to take the first step, but the problem encountered in the half-way is not what we expected. To avoid this situation, we should use a set of browsers for testing each step. In this way, you can clearly see how the layout is implemented and avoid some problems.
It is built based on modern browsers, but it is best to build a layout based on standard compatible browsers, but it is also necessary to make some old versions of browsers compatible.
Checking your HTML code and CSS often checks your HTML code and CSS, so that many layout problems can be solved.
The following two addresses will help you:
① WC3 HTML validator
② WC3 CSS validator
Before designing the CSS layout, you should think about the browser you want to support or to what extent. Customers, users, and test log files may be helpful to you.
Step 2. view the container LayoutLet's look at your design and find out which containers are mainly composed.
Step 3: Name the containerThe container mentioned above will be the container where content is placed in your page layout, so you need to give them a name that can describe their features, just like
If these containers are unique to the page, they are represented by ID in the tag code, rather than class. This is very important when writing styles for other elements, because when there is a conflict, the style identified by ID will overwrite the code identified by class.
Step 4. Start writing styles and codeFirst, determine the document type. Here we use HTML4.01strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
After that, add the header information and example, and name the external sample as style.css.
Finally, add the following elements:
<Body> <div id = "container"> <div id = "header" title = "sitename"> <div id = "skipmenu"> <a href = "# content"> Skip to content </a> </div> Step6. specify the stylebody { 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; }Step7. at last, we need to refine the work.
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
