Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "what are the advantages of using css+div layout", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the advantages of using css+div layout" can help you solve your doubts? let's follow the editor's ideas slowly to learn new knowledge.

one。 Simplify the code and build the difficulty of reconstruction

The site uses DIV+CSS layout to simplify the code. I believe most friends have heard of it. Css files can be called on any page of the site, but it is troublesome to use table tables to modify part of the page. If you are a portal, you need to change a lot of pages manually, and it will feel messy and time-consuming to look at those tables, but you only need to modify one code in the css file to use the css+div layout.

II. Css web page access speed

Compared with the DIV+CSS layout, the page using the Table layout simplifies a lot of page code, so its browsing speed is naturally improved, thus improving the user experience of the site.

III. Seo optimization

The website with div-css layout is very friendly to search engines, so it avoids the problem that there are too many Table nesting layers to be crawled by search engines, and the concise and structured code is more conducive to highlight the focus and suitable for search engines to crawl.

four。 Browser compatibility

DIV+CSS is more prone to incompatibility among multiple browsers than TABLE layout, mainly because different browsers have different default values for web standards. The domestic mainstream is that ie,firefox and chrome are used less. In terms of compatibility testing, we first need to ensure that there are no problems in multiple versions of ie. Some methods and techniques are involved here, which can be used to find solutions to specific problems on the website.

V. small mistakes often made in the layout of CSS+DIV pages

1. Check to see if the HTML element has spelling mistakes and forgets the closing tag

Even veterans often get the nesting relationship of div wrong. You can use dreamweaver's verification function to check for errors.

two。 Check whether the CSS is written correctly

Check to see if there are any spelling mistakes, if you forget the ending}, etc. You can use CleanCSS to check for spelling errors in CSS. CleanCSS is supposed to be a weight loss tool for CSS, but it can also check for spelling mistakes.

3. Determine the location of the error by deletion

If the error affects the overall layout, you can delete the div blocks one by one until the display returns to normal after deleting a div block to determine where the error occurred.

4. Using the border attribute to determine the layout characteristics of the error element

Accidentally laying out using the float attribute can lead to errors. At this point, add the border attribute to the element to determine the element boundary, and the cause of the error will be revealed.

5. The parent element of the float element cannot specify the clear attribute

Under MacIE [3], if you use the clear attribute on the parent element of the float element, the layout of the surrounding float elements will be confused. This is MacIE's famous bug. If you don't know it, you will take a detour.

6. The float element must specify the width attribute

Many browsers have bug when displaying float elements that do not specify a width. So be sure to specify the width attribute for the float element, regardless of its content.

In addition, try to use em instead of px as units when specifying elements.

7. Float elements cannot specify attributes such as margin and padding

IE has bug when displaying float elements that specify margin and padding. So do not specify the margin and padding attributes on the float element (you can set margin and padding by nesting a div inside the float element). You can also use the hack method to specify a special value for IE.

8. The sum of the widths of float elements should be less than 100%

If the sum of the widths of the float elements is exactly 100%, some old browsers will not display properly. So make sure the sum of the widths is less than 99%.

9. Has the default style been reset?

Some properties, such as margin, padding, etc., will be interpreted differently by different browsers. Therefore, it is best to set all margin, padding to 0, list style to none, and so on before development.

10. Did you forget to write DTD?

If the results are different no matter how you adjust the display in different browsers, you can check to see if you forgot to write the DTD statement (DOCTYPE) at the beginning of the page.

Finally, it should be noted that spiders do not like a page with too much css code, otherwise it will also affect the crawling of spiders and the inclusion of search engines, so using external calls to call CSS is a very good method (html introduces css files). At the same time, if you don't have to have too many fancy websites and use CSS layout, you can also achieve the desired effect. Such as the text color changes in the site navigation, css drop-down menu and so on.

After reading this, the article "what are the advantages of using css+div layout" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.