How to Write compatible pages and write compatible pages

How to Write compatible pages and write compatible pages

Before writing a good page, you should first learn HTML4 and html5. then CSS and CSS3 can also be mastered.

Generally, different types of websites have a certain degree of knowledge about the front-end after being carefully typed, and there is no problem with writing static pages. As for the number, more than three complete websites.

Note: js is essential to write a very good page. This is a bit difficult for beginners, but do not be timid, follow the learning progress. First, learn HTML + CSS, then HTML5 + CSS3, learn a certain program, and then contact javascript. I believe that even if I am self-taught, HTML + CSS will take about 2 months, javascript can be learned for a month.

If not, go to the HTML tutorial, HTML5 tutorial, CSS tutorial, CSS3 tutorial, and javascript tutorial.

More, let's talk about how to write a webpage with good compatibility:

1. Document declaration is indispensable: <! Doctype>

In fact, this is basically not directly related to WCAG, but for a better compatibility, especially for backward compatible pages, you must write this thing:

<!doctype>

2. Try not to use compatibility labels

In the course of learning, you already have some compatibility. If you want to use it, you just want to make the effect of this label only effective in some browsers, especially H5, currently, some labels are not uniform in all browsers.

3. Clear the format before writing CSS.

The label format is required, because most labels are compatible, but must be used. For example, ul labels in ie6 and 7 have the outer margin by default. In ie8, Firefox, google has padding by default.

4. Avoid Common Browser bugs

For example, in a nested div, if no border is set for the outer div, the margin-top of the inner div will be invalid, it will directly apply to the outer DIV (that is, the effect of the outer div margin-top)

5. When the child element is floating, the parent element cannot include the child element by default.

In this case, it is generally handled using the following methods:
1. Add overflow: hidden to the parent element. However, you must ensure that the parent element will not be displayed in the future.

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */width: 98%; overflow: hidden }. div2 {background: #800080; border: 1px solid red; height: 100px; width: 98% ;}. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> </div> <div class = "div2"> div2 </div>

2. Add a clear floating element to the end of the last floating child element.

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red }. div2 {background: #800080; border: 1px solid red; height: 100px; margin-top: 10px }. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD}/* clear floating Code */. clearfloat {clear: both} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> <div class = "clearfloat"> </div> <div class = "div2"> div2 </div>

3. Parent div defines pseudo classes: after and zoom

/* Clear floating Code */. clearfloat: after {display: block; clear: both; content: ""; visibility: hidden; height: 0}. clearfloat {zoom: 1}

Principle: IE8 or above is supported by non-IE browsers: after, the principle is a bit similar to method 2, and zoom (IE conversion has attributes) can solve ie6, ie7 Floating 4. Parent element floating 5. Parent div definition overflow: auto 6. Parent div definition display: table

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */width: 98%; display: table; margin-bottom: 10px ;}. div2 {background: #800080; border: 1px solid red; height: 100px; width: 98% ;}. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> </div> <div class = "div2"> div2 </div>

6. Typographical structure problems

If you want to build a website with good compatibility, it is like building a house. If you want to build a house with a strong architecture, then the website has a good compatibility. The framework structure must be good, so the scalability is also good, the frontend and backend are all true.

How should we establish the front-end framework? I think we can pay attention to the following aspects:

• The hierarchy should be analyzed, that is, the concept of the upper, middle, lower, left, middle, and right layers.
• The structure should be bigger first and then smaller. For example, there are left and right sides in the middle of the page. It is best to have a large middle representation, then left and then right.
• It is recommended that the sequence be first up and down, first left and then right, first outside and then inside, first overall and then partial

7. Positioning floating and so on

Some students randomly add positioning or floating attributes to the elements when the structure is distorted during typographical layout. Suddenly they find that they are good, but they can only say that they have achieved what they think is a visual effect, however, if the webpage compatibility is good, you will not be able to understand it.

This is a bit similar to killing chicken with a pig knife. It is very difficult to use it. Therefore, you should choose what to use and what to use, and do not move it to locate or float it.

8. CSS writing problems

Use the parent-child relationship as much as possible, for example: # top. left img {}. The new class = "left" does not conflict with this left in the future, as long as the id is not defined to be repeated.

You can leave a message directly for these questions.