When applying Div+CSS web page layout to create a website that complies with web standards, there are some problems that may easily arise.
Let's summarize it now so that everyone can see where the problem lies.
1. CSS validation issues
The web pages we design all hope to comply with XHTML standards and CSS to pass W3C verification. Some failed CSS2.0 verification. The main verification errors are: "Line: 0 font-family: It is recommended that you specify a type family as the last choice."
W3C recommends that when defining fonts, it should end with a category of fonts rather than a single font. For example, "sans-serif" can ensure that web fonts can be displayed under different operating systems.
Although most people define "sans-serif" on the body tag, if sans-serif is omitted when defining the font again in other IDs or classes, it is considered that the verification fails. This mistake is not very serious and can be avoided with a little attention.
2. CSS writing suggestions
Add comments to CSS files. Comments will bring convenience to your future maintenance. It is recommended to add comments to CSS files as much as possible, and don't worry about adding a small number of bytes. Try to shorten the CSS syntax as much as possible. For example, the color value "#FFFFFF" can be abbreviated as "#FFF"; "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" can be abbreviated as "padding:30px 0 10px" 20px;". There are more saving techniques in defining techniques, and as you become more proficient in CSS applications, you will continue to discover better methods.
3. XHTML validation issues
People often pay more attention to CSS verification, but they neglect XHTML standards compliance, and many low-level errors occur. The main issues are listed below:
◎target="_blank", this syntax is correct in HTML4.0, but is not allowed in XHTML1.0. One solution is to write target="new", and another solution is to use js to process all targets;
◎It is best not to embed style sheets. Separate style sheet files are easier to maintain. If <style> is embedded, it must be written as <style type="text/css">, and the type cannot be ignored, otherwise XHTML cannot determine what your style is used for.
◎<br> must be written as <br />. XHTML requires that all tags must be closed. Unpaired tags must be directly followed by "/".
◎Reuse the same ID. An ID can only be used once in XHTML. If you need to reference the style multiple times, you should use class.
◎The Flash embedding method is wrong. <embed> was originally a private tag of Netscape. Even though it was later supported by IE, it was never recognized by the W3C. There is no <embed> tag in HTML4.0. The W3C advocates the use of the <object> tag. In order to solve the problem of compatibility between different browsers, a workaround is to use both tags.
The complete sample code is as follows (the flash background is transparent):
| The following is the quoted content: <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="100"> </embed> </object> |
But writing it directly in XHTML is still not possible. Now we can only cheat the verification by writing the above code in the flash.js file and then calling it.
<script type="text/javascript" src="flash.js"></script>
Whether flash meets standards is a controversial issue.
◎Code similar to id=header class=title should be written as id="header" class="title". Quoting attribute values is the most basic XHTML syntax rule.
4. Compatibility issues
Some websites are deformed and misaligned when viewed in IE6.0, Mozilla Firefox1.0, and Opera 7.12.
It's centered in IE, but not in Mozilla. Setting the body {TEXT-ALIGN: center;} in IE can already center it, but in Mozilla you must add the following style settings to the layer that needs to be centered: MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
Exceeds width. The page looks normal in Mozilla, but in IE it is deformed because it exceeds the width, and the side-by-side layers are moved underneath. This situation is caused by the different interpretations of the box model between IE and Mozilla. There are many solutions, such as the "!important" method.
Web standards and CSS layout have been understood and mastered by more and more designers. After a period of digestion, understanding and application of CSS layout, more web pages with both technical and aesthetic considerations will emerge.