资讯专栏INFORMATION COLUMN

CSS Normalize(全局设置)

MorePainMoreGain / 2289人阅读

摘要:作为前端工程师,很多人都有自己的一套文件,这样能省掉开发过程中的不少麻烦,提高工作效率。链接如下另外,对于很多开发中来说,文件同样是节省了不少写重复代码的时间,同时,又规范了自己的书写习惯。关于两者的区别可见如下文章链接

作为前端工程师,很多人都有自己的一套CSS Normalize文件,这样能省掉开发过程中的不少麻烦,提高工作效率。在前人的基础上,我总结了自己的CSS Normalize文件,目前基本上每个项目都有在使用中:

/*Normalize*/
*{margin:0;padding:0;list-style-type:none;}

*html,*html body /* 修正IE6振动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%; px数值除以10,然后换上em作为单位*/
    /*min-width:980px;*/
    font-size:13px;
}

a,img{border:none;text-decoration:none;}
a{blr:expression(this.onFocus=this.blur());} /*去掉a标签的虚线框,避免出现奇怪的选中区域*/
/*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,Helvetica,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;}  //去掉输入框的叉叉

.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*/

对与我的实际使用中,我有一个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文件
主要为如下文件:





  

    
    
    xxx
    
    

     
     
     

     
     
     
     

     

    




Mobile下的head会有如下meta设置:





值得一提的是,在github上也有做了一个 normalize.css 文件,我在做HTML5项目也将其应用在normalize中。 链接如下:
https://github.com/necolas/normalize.css

另外,对于很多开发中来说,Template文件同样是节省了不少写重复代码的时间,同时,又规范了自己的书写习惯。
下面这个,我觉得非常详细了,当然有些不必要的东西,可以自己取舍。
https://github.com/h5bp/html5-boilerplate

之前用到标题“CSS Reset"确实已经过时,Normalize标准化是现在的潮流。关于两者的区别可见如下文章链接:
http://www.zhihu.com/question/20094066

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49521.html

相关文章

  • 关于CSS Reset 那些事(二)之 Normalize.css 源码解读

    摘要:前言上一章节介绍了的历史,最后对做了简单的了解,所以从这节开始对源码进行注释翻译与解读,尽可能从最根本性的问题了解它在帮我们做什么回顾关于那些事一之历史演变与源码解读前面讲到的分模块解读,就是先黏贴一段源码,然后根据官方提供的注释进行翻译整 前言 上一章节介绍了CSS Reset的历史,最后对Normalize.css做了简单的了解,所以从这节开始对源码进行注释翻译与解读,尽可能从最...

    qujian 评论0 收藏0
  • 关于CSS Reset 那些事(二)之 Normalize.css 源码解读

    摘要:前言上一章节介绍了的历史,最后对做了简单的了解,所以从这节开始对源码进行注释翻译与解读,尽可能从最根本性的问题了解它在帮我们做什么回顾关于那些事一之历史演变与源码解读前面讲到的分模块解读,就是先黏贴一段源码,然后根据官方提供的注释进行翻译整 前言 上一章节介绍了CSS Reset的历史,最后对Normalize.css做了简单的了解,所以从这节开始对源码进行注释翻译与解读,尽可能从最...

    Code4App 评论0 收藏0
  • 关于CSS Reset 那些事(四)之 构架CSS基础样式库

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    mj 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<