作为前端工程师,很多人都有自己的一套CSS Normalize文件,这样能省掉开发过程中的不少麻烦,提高工作效率。在前人的基础上,我总结了自己的CSS Normalize文件,目前基本上每个项目都有在使用中:
CSS Code复制内容到剪贴板
*{margin:0;padding:0;list-style-type:none;}*html,*htmlbody{background-image:url(about:blank);background-attachment:fixed;}body{font-family:"MicrosoftYahei","HiraginoSansGB",Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;font-size:13px;}a,img{border:none;text-decoration:none;}a{blr:expression(this.onFocus=this.blur());}: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:"MicrosoftYahei","HiraginoSansGB",Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;-webkit-transition:all0.3sease-out;-moz-transition:all0.3sease-out;-ms-transition:all0.3sease-out;-o-transition:all0.3sease-out;transition:all0.3sease-out;}input.none-radius{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}input::-ms-clear{display:none;}//去掉输入框的叉叉.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;}对与我的实际使用中,我有一个Template文件夹(最近新增了一个针对Mobile)
里面的文件夹大致分为如下:
1)images: 存放项目中的图片(里面又会根据项目模块进行文件夹划分)
2)css: 存放css文件(里面会有一个base.css文件,预置上文中的css normalize)
3)js:存放js文件,里面还有一个vender的文件夹,存放插件js(例如:jQuery库),外面有main.js(主要js文件),plugins.js(插件引用的js)
根目录下,为index.html文件
主要为如下文件:
CSS Code复制内容到剪贴板
<!doctypehtml><!--[ifltIE7]><htmlclass="no-jslt-ie9lt-ie8lt-ie7"><![endif]--><!--[ifIE7]><htmlclass="no-jslt-ie9lt-ie8"><![endif]--><!--[ifIE8]><htmlclass="no-jslt-ie9"><![endif]--><!--[ifgtIE8]><!--><htmlclass="no-js"><!--<![endif]--><headlang="zh-CN"><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title>xxx</title><metaname="keywords"content="xxx"/><metaname="description"content="xxx"/><linkrel="shortcuticon"href="images/favicon.ico"/><!--IEaddress前ico图标--><linkrel="stylesheet"href="css/normalize.css"/><!--resetstyle--><linkrel="stylesheet"href="css/base.css"/><!--basicstyle--><scriptsrc="js/vendor/jquery-1.10.2.min.js"></script><!--jQuerylibrary--><scriptsrc="js/vendor/jquery-ui-1.11.1.js"></script><!--jQueryUIlibrary--><scriptsrc="js/main.js"></script><!--mainjs--><scriptsrc="js/plugins.js"></script><!--plugins--><!--[if(gteIE6)&(lteIE8)]><scripttype="text/javascript"src="js/vendor/selectivizr.js"></script><noscript><linkrel="stylesheet"href="[fallbackcss]"/></noscript><![endif]--><!----><!--[ifltIE9]><scriptsrc="js/html5.js"></script><![endif]--></head><body><!--wrapper--><divclass="wrapper"><!--header--><divclass="header"><!--logo--><divclass="logo"></div><!--logoend--><!--navigation--><divclass="nav"></div><!--navigationend--><!--banner--><divclass="banner"></div><!--banner--></div><!--headerend--><!--container--><divclass="container"><!--news--><divclass="news"></div><!--newsend--><!--sidebarbanner--><divclass="sidebar"></div><!--sidebarbannerend--><!--hottop9--><divclass="hot"></div><!--hottop9--></div><!--containerend--><!--footer--><divclass="footer"><!--aboutus--><divclass="about-us"></div><!--webchat--><divclass="webchat"></div><!--copyright--><divclass="copyright"></div></div><!--footerend--></div><!--wrapperend--></body></html>Mobile下的head会有如下meta设置:
CSS Code复制内容到剪贴板
<metaname="viewport"id="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/><metaname="apple-mobile-web-app-capable"content="yes"/><metaname="apple-touch-fullscreen"content="yes"/><metaname="apple-mobile-web-app-status-bar-style"content="black"/>值得一提的是,在github上也有做了一个 normalize.css 文件,我在做HTML5项目也将其应用在normalize中。 链接如下:
https://github.com/necolas/normalize.css
另外,对于很多开发中来说,Template文件同样是节省了不少写重复代码的时间,同时,又规范了自己的书写习惯。
下面这个,我觉得非常详细了,当然有些不必要的东西,可以自己取舍。
https://github.com/h5bp/html5-boilerplate