Gold Rush Project Essay

Before the project, the first analysis of the layout of the entire station, and then proceed, if there are all the design, you can see which modules are similar, as far as possible to modular plate, convenient for later reuse. In terms of detail, pay attention to some aspects:

1. Isolate the modules of a similar part of the entire site, such as the head end of the gold rush

2. Create A public style sheet for all Web pages to use, creating a style file for each page

*{

padding:0px;

margin:0px;

Letter-spacing: -0.5px;

font-size:14px;

}

body{

font-family: "Microsoft Yahei", "Song Body", "Times New Roman", serif;

Background-color: #fff;

}

img{

Border:none;

Outline:none;

}

ul{

List-style:none;

}

a{

Outline:none;

Cursor:pointer;

}

input{

Border:none;

Outline:none;

Color: #b4b4b4;

font-family: "Microsoft Yahei", serif;

}

select{

Border:none;

Outline:none;

}

3. Note the notation of meta

<meta name= "Keywords" content= "" > Reserved keywords,

<meta name= "description" content= "" "> Description of reserved sites

4. Web rendering, make 360 secure browser open mode for the latest version of IE in compatibility mode

<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>

5. Before </body> JS is written, the reference jquery library is

<script src= "Http://cdn.bootcss.com/jquery/1.9.1/jquery.js" ></script>

<script type= "Text/javascript" >

!window.jquery && document.write (' <script src= ' js/jquery.min.js ' ><\/script> ');

</script>

6. Important IMG Images, all to write Alt, add a div outside the IMG tag, write the parent element of IMG Fixed

Width and height,img{width:100%;height:100%;}

7. Input font to override

Hack:ie6 & IE7 & ie8:selector{property:value\9;}

8. Color RGBA () Transparency compatible

Filter:alpha (opacity=70);

Background-color:rgba (0,0,0,.4);

9. Many browsers will include these words as an ad blocker: ad, ads, ADV, banner, sponsor, GG, Guangg, Guanggao and so on to avoid the use of the above words to name.

10. When using PNG images to make pictures, request the picture format as png-8 format, if png-8 really affect the picture quality or translucent effect, please define the background for IE6 separately:

_background:none;

_filter:progid:dximagetransform.microsoft.alphaimageloader (Sizingmethod=crop, src= ' img/bg.png ');

11. Give the element a class name, as far as possible to avoid the form like Div ul Li A, because the browser is rendered from right to left, so first it will find all a, which will reduce the site performance

12.class naming conventions, with semantics, structure class names do not add styles

13. Clear Floating

<div class= "Con" >

<div class= "Con-left" >

</div>

<div class= "Con-right" >

</div>

<div class= "Clear" ></div>

</div>

. Con-left. con-right{

Float:left;

}

. clear{

Clear:both;

}

14. Be careful to control text overflow, Overflow:hidden

Single-line text overflow ellipsis

Overflow:hidden;

White-space:nowrap;

Text-overflow:ellipsis;

-o-text-overflow:ellipsis;

max-width:100px;

15. In order to facilitate the background data transfer, it is best not to set the width and height of death, you can use padding to

Realize

16. Attribute Order Issues

1. Position attributes (position, top, right, z-index, display, float, etc.)
2. Size (width, height, padding, margin)
3. Text series (font, Line-height, letter-spacing, color-text-align, etc.)
4. Background (background, border, etc.)
5. Other (animation, transition, etc.)

17. Try to make the background of the picture, the general picture in JPG format, the picture to optimize the image quality and image size more excellent

18. Large modules must develop a good habit of commenting, small module section comment

Gold Rush Project Essay