As a front-end engineer, many people have their own set of CSS normalize files, this can save a lot of trouble in the development process, improve work efficiency. On the basis of predecessors, I summed up my own CSS normalize files, currently basically every project has in use:
/*normalize*/*{margin:0;padding:0;list-style-type:none;} *html,*html Body/* Fixed IE6 vibration bug */{background-image:url (About:blank); background-attachment:fixed; } body{font-family: "Microsoft Yahei", "Hiragino Sans GB", Arial,lucida,verdana,simsun,helvetica,sans-serif; /*font-size:62.5%; The PX value is divided by 10 and then replaced with EM as unit *//*min-width:980px;*/font-size:13px; } A,img{border:none;text-decoration:none;} A{blr:expression (This.onfocus=this.blur ()); */* Remove the dashed box from the A-label to avoid strange selection *//*a:active {test:expression (target= "_blank ");} */:focus{outline:0;} Label{cursor:pointer;} Img{vertical-align:middle;} table{empty-cells:show;border-collapse:collapse;border-spacing:0;} H1{font-size:1.6em;} H2,h3,h4{font-size:1.4em;} H5,h6{font-size:1.2em;} Input{border:none;} Textarea{overflow:scroll;} A, Input,textarea,. hover-delay {font-family: "Microsoft Yahei", "Hiragino Sans GB", Arial,lucida,verdana,simsun,helv Etica,sans-serif; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; Transition:all 0.3s ease-out; } input.none-radius{border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; } input::-ms-clear{Display:none;} Remove the fork from the input box. Clear{clear:both;} . Txt-indent{text-indent:-999px;overflow:hidden;} input[type=text],input[type=tel],input[type=email]{-webkit-appearance:none; Box-shadow:none;} /*normalize end*/
For the actual use with me, I have a template folder (recently a new one for mobile)
The folders inside are broadly categorized as follows:
1) Images: Store the pictures in the project (which will be divided into folders according to the project module)
2) CSS: Store css file (there will be a base.css file, preset the above CSS normalize)
3) JS: Storage js file, there is a vender folder, storage plug-in JS (for example: jquery library), outside the main.js (main js file), Plugins.js (plugin reference JS)
root directory, for index.html files
The main documents are as follows:
<!doctype html> <!--[if Lt IE 7]>The head under mobile will have the following meta settings:
<meta name= "viewport" id= "viewport" content= "Width=device-width, initial-scale=1, user-scalable=no"/> <meta name= "apple-mobile-web-app-capable" content= "yes"/> <meta name= "Apple-touch-fullscreen" content = "Yes"/> <meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>It is worth mentioning that on GitHub also has made a normalize.css file, I am doing HTML5 project also applies it in normalize.
In addition, for many development, the template file also saves a lot of time to write duplicate code, but also to standardize their own writing habits.
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
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
