A few years ago, DIV+CSS began to gradually become the preferred method of web design. At present, DIV+CSS has become the standard for web design. Many domestic websites have completed the reconstruction from TABLE to DIV+CSS in the past few years. . The author is also a web designer who prefers this method. I have been using div+css to provide designs for customers for three years. So what advantages does it have compared to TABLE? Let’s talk about some personal experiences and understandings, hoping to be helpful to colleagues and related personnel.
The biggest advantage of using DIV+CSS in web design is to standardize the web code, abandon the outdated table layout method, and realize the separation between content, performance and behavior. The html code is better structured and easier to read and maintain. , and the web page file size is also smaller. For example, after a recent reconstruction of a client's website, the web page file size was less than half of its original size, so it took up less website space and the website opened faster.
DIV+CSS and TABLE methods are very different in design. Careful planning is required before starting to design a web page, such as naming the elements that make up the web page to facilitate style definition in CSS. Public attributes are best defined with class names. The common styles of the entire website can be placed in a separate css file. Common public attributes include: web page width, background color, background image, font default size, color, link style, etc. Different styles for each web page are in the css file. It is best to focus on one block and indicate which web page or web page part it is before the block. This will not only reduce the size of the CSS file, but also avoid confusion and make maintenance more convenient. It is worth mentioning that styles should not be embedded in web page code to completely separate content and style.
To do a good job in DIV+CSS web design, there are three points that need to be understood.
1. Float attribute: DIV (layer) occupies a whole row by default. For common two-column or multi-column layout designs, you need to be able to correctly set the float and width attributes to achieve the effect. After the multi-column layout is completed, if a layer that occupies the banner is followed, you need to set the clear attribute to clear the floating layer.
2. Box mode: The layer has attributes such as width, height, border, inner spacing, and outer spacing. The actual space occupied by the layer is the sum of the above attribute values. Proper use of these attributes can achieve a compact and elegant layout. Beautiful web layout.
3. Layer nesting: Experienced web designers all know that it is not advisable to nest too many layers, generally no more than 3 layers. Too much nesting will lead to complex and redundant code, difficulty in maintenance, and slow operation. In addition, in multi-column layout, layer floating can be used, and there is no need to set up an overall IE layer for embedding.
Mention the topic of browser compatibility separately. Compared with TABLE layout, DIV+CSS is more prone to incompatibility issues with multiple browsers. The main reason is that different browsers have different default values for web standards. The mainstream in China is IE, with Firefox and Chrome less commonly used. In terms of compatibility testing, you first need to ensure that no problems occur in multiple versions of IE. Here are some methods and techniques designed to help you find solutions to specific problems on the website.
Summary: DIV+CSS has many advantages over TABLE. Web designers should abandon the TABLE method as soon as possible, which will be more conducive to urging themselves to learn DIV+CSS knowledge in depth. It is not difficult to learn and use the DIV+CSS web design method. As long as you understand some basic knowledge and do a few more cases, you will gradually understand and master it.
This article was published by [Hippie], the webmaster of http://www.swjns.com . Please keep the URL for reprinting.
Thanks to hbjsp for your contribution