Home > Developer > Web Develop
General Web page:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Frames page:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >
2. Webpage Code statement:Simplified Chinese page for gb2312
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
Traditional Chinese web page for Big5
<meta http-equiv= "Content-type" content= "text/html; charset= Big5 "/>
English page for Utf-8
<meta http-equiv= "Content-type" content= "text/html; charset= Utf-8 "/>
3, the use of CSS links, the entire station using the same CSS file, to achieve the separation of content and performance:<link href= "Images/style.css" rel= "stylesheet" type= "Text/css" >
Do not write the style directly in the page HTML code, the page must not use <font></font>, <style> and other tags.
4. Some basic tags need to be defined or reset in the CSS file:*{
padding:0;
margin:0;
}
Body,td,th,div {
Font-family: Song body;
font-size:12px;
Color: #000000;
}
Body {
Background: #FFFFFF;
}
p{
line-height:150%;
}
a:link {
Color: #000000;
Text-decoration:none;
}
a:visited {
Color: #000000;
Text-decoration:none;
}
a:hover {
Color: #ff0000;
Text-decoration:underline;
}
a:active {
Color: #000000;
Text-decoration:none;
}
h1{
Color: #000000;
line-height:150%;
font-size:24px;
}
Ji=
List-style:none;
Word-break:keep-all;
White-space:nowrap;
}
5, after the completion of web design, must be in Internet Explorer 6.0 and Firefox3.0 for compatibility testing, to ensure that the page performance in these two mainstream browser to maintain a consistent, no dislocation, overlap phenomenon. 6, the common CSS code to solve the compatibility issues are:1) Div Alignment has left, center, right three ways, the center to clear floating: clear:both; Otherwise, there will be overlapping phenomena.
2) Hide out of part: Overflow:hidden;
3) Set the fixed width: width:100px. In addition to special needs, Div is generally not set height, width, height can not use percentages, in order to avoid large errors in each browser.
4) temporarily add a frame to the DIV: border:1px solid;
5) Use!important to set different styles for IE and FF, such as: width:100px!important; width:102px; The front is the FF style, followed by the IE style.
6) Determine the version of IE browser to invoke a different style sheet.
<!--[If LTE IE 6]>
<link rel= "stylesheet" type= "Text/css" href= "Images/css.css"/>
<! [endif]-->
<!--[if IE 7]>
<link rel= "stylesheet" type= "Text/css" href= "Images/css2.css"/>
<! [endif]-->
<!--[if IE 8]>
<link rel= "stylesheet" type= "Text/css" href= "Images/css3.css"/>
<! [endif]-->
7) Shielding IE7.<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>
7, the Information list uses the Ul,li form, reduces the code redundancy. Such as:
<div>
<ul>
<li></li>
</ul>
</div>
8, the certification. The web site can be used to verify whether CSS conforms to the standard, the URL is:Http://jigsaw.w3.org/css-validator/check/referer
1) All tags must use lowercase
2) All attributes in the tag must have a value and cannot omit double or single quotation marks
3) All labels must be paired, unless paired with/at the end
4) A minimum number of tags to be included in a webpage
<meta http-equiv= "Content-type" content= "text/html; charset= gb2312 "/>
<title> title </title>
<body>
Content
</body>
5) If you want to display <, >, &, enter:< >
To display & in a Web page, you need to enter:&
6) Label order is not garbled, should be:<b><p> text </p></b>
7) Note text cannot contain----, HTML annotation form:<!--Note text-->,css comment form:/* Comment Text */
In addition to starting, ending, and adding some necessary comments to the JavaScript code in the page, it is possible to write less comments elsewhere, and sometimes too many comments can cause problems.
You can add some comments to the style sheet to briefly describe the purpose, scope, etc. of the style.
8, the page reference style use class= "Style1", instead of id= "Style1", the ID left to the programmer to use, improve style reusability, reduce the size of the CSS file.
9, the HTML code to be properly indented (you can press the TAB key before the code, or after the page is all done, in the DW Code view, do "Apply source format", do not have blank lines.)
10, the use of pictures in the web.1) The best use of the Web page gif, JPG images, because the PNG image compatibility in the browser is still a problem, it is not recommended.
2) column title background, fillet background, border background, the icon before the title can be written in Background:url ();
3) website logo, more, new, hot, advertising and other images need to use tag, in order to add links to it.
11, the whole page must be in the browser center display, namely: div{margin:0 Auto;}. 12, if the page has floating pictures, drop-down menus, pop-up dialog box, Flash, the first three to be located above the flash. The transparent code needs to be in Flash:<param name= "WMODE" value= "Transparent" >//ie
<embed wmode= "Transparent" >//firefox
13. Set the style of the page scroll bar:HTML {
Scrollbar-face-color: #f6f6f6;
Scrollbar-highlight-color: #fff;
Scrollbar-shadow-color: #eeeeee;
Scrollbar-3dlight-color: #eeeeee;
Scrollbar-arrow-color: #000;
Scrollbar-track-color: #fff;
Scrollbar-darkshadow-color: #fff;
}
14, English, the number in the FF is not automatically wrapped, you need to code:Word-wrap:break-word;
15, pay attention to the horizontal, vertical direction of alignment, leaving white problems. 16, the width of the Web page.Generally, the narrow screen width is 760px and widescreen is 950px.
17, the style of naming should be in line with the semantic requirements, that is, a look at the style name can know where this style is probably used, what use, convenient for later call, maintenance. The top style is the. header.
Www.mini88s.com
Www.xianhzw.com
Mini88s.taobao.com
DIV+CSS Web Design Code
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
