CSS Normalize文件配置示例

时间:2021-05-08

作为前端工程师,很多人都有自己的一套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

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章