关于CSS Normalize的文件配置

这篇文章主要介绍了css normalize文件配置示例,对全局项目进行设置,需要的朋友可以参考下

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

另外,对于很多开发中来说,Template文件同样是节省了不少写重复代码的时间,同时,又规范了自己的书写习惯。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

CSS的变量variable的解析

CSS的positon属性的分析

以上就是关于CSS Normalize的文件配置的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1610125.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:15:14
下一篇 2025年12月24日 01:15:33

相关推荐

  • 在CSS中对RGB颜色的使用分析

    这篇文章主要介绍了CSS中对RGB颜色的使用详解,是CSS入门学习中的基础知识,需要的朋友可以参考下 RGB颜色模型解释 RGB颜色模型就是一种描述某个颜色里面有多少红、绿、蓝三原色的量的方法,就像把水彩颜料或油彩颜料混合起来得到某种我们想要的真实色彩一样。 想象下如果你要配出一个纯蓝色,为了实现这…

    好文分享 2025年12月24日
    000
  • CSS中的inherit使用分析

    这篇文章主要介绍了css中的inherit使用技巧小结,css中的继承关键字的使用是css入门学习中的基础知识,需要的朋友可以参考下 稍不留意便会忽略掉级联样式表的特点。大多数开发者都知道inherit关键字,但有几个新的CSS3继承特性你可能不知道… property: inherit;   in…

    好文分享 2025年12月24日
    000
  • 利用css实现一款仿ios7的switches开关按钮

    这篇文章主要为大家介绍了纯css实现的一款仿ios7的switches开关按钮,无需引js代码。在实现中给出了两种颜色,三种不同大小的demo,需要的朋友可以参考下   今天给大家介绍一款仿ios7的switches开关按钮。这款按钮也是纯css实现的。无需引js代码。在实现中给出了两种颜色,三种不…

    2025年12月24日
    000
  • css+transition做出显隐动画

    这次给大家带来css+transition做出显隐动画,的注意事项有哪些,下面就是实战案例,一起来看一下。 我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这…

    2025年12月24日
    000
  • 前端实战项目中20条CSS代码使用注意事项

    这次给大家带来前端实战项目中20条CSS代码使用注意事项,下面就是实战案例,一起来看一下。 01、谨慎使用外边距属性 与其它的属性不同,垂直方向上的外边距相遇时将会发生折叠。这意味着如果一个元素的下边距遇到了另一个元素的上边距,那么二者中较大的一个将被留下。下面是一个简单的例子。 .square {…

    2025年12月24日
    000
  • CSS实战项目中书写规范与顺序

    这次给大家带来CSS实战项目中书写规范与顺序,CSS实战项目中书写规范与顺序的注意事项有哪些,下面就是实战案例,一起来看一下。 CSS书写顺序  1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, pa…

    2025年12月24日
    000
  • CSS层叠机制使用详解

    这次给大家带来CSS层叠机制使用详解,CSS层叠机制使用的注意事项有哪些,下面就是实战案例,一起来看一下。 css中为什么要有层叠机制 因为在css中可能会有多个样式同时影响同一个元素的某个属性,层叠机制可以解决作者(写代码的人),用户(浏览页面的人)和用户代理(一般指浏览器)的样式冲突。 在层叠中…

    好文分享 2025年12月24日
    000
  • 关于CSS的图像拼合技术

    这篇文章主要介绍了关于CSS的图像拼合技术 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下    图像拼合就是单个图像的集合。    有许多图像的网页可能需要很长事件来加载和生成多个服务器的请求。    使用图像拼合会降低服务器的请求数量,并节省带宽。 图像拼合–创建一个…

    好文分享 2025年12月24日
    000
  • CSS的positon属性的分析

    这篇文章主要介绍了关于CSS的positon属性的分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属…

    2025年12月24日 好文分享
    000
  • CSS样式的覆盖规则

    下面为大家带来一篇css样式覆盖规则全面了解。内容挺不错的,现在就分享给大家,也给大家做个参考。 大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义。其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值,这…

    好文分享 2025年12月24日
    000
  • 提高css性能的方法

    这篇文章主要介绍了css性能优化提高css性能的方法,不规范的css会导致很多性能问题,所以学习掌握css性能优化技巧是非常必要的,对css性能优化知识感兴趣的朋友一起学习吧 不规范的css会导致很多性能问题,这些问题可能在一些小的项目中不够明显,但是在大型项目中就会显现出来。 css匹配原理 在优…

    好文分享 2025年12月24日
    000
  • 利用CSS自定义绿色复选框按钮的样式

    这篇文章主要介绍了关于CSS自定义绿色复选框按钮的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 HTML自带的复选框或者单选框按钮样式都是比较简单的一种. 而有时候这些表单控制, 可能需要配合自己的主题样式. 需要去美化他们. 以前可能需要借助JS的实现. 现在CSS也可以完全…

    2025年12月24日
    000
  • 如何使用css transition属性实现带动画显隐的微信小程序部件

    这篇文章主要介绍了使用css transition属性实现一个带动画显隐的微信小程序部件的相关资料,需要的朋友可以参考下 我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说…

    2025年12月24日
    000
  • webpack混用css module的方法

    这篇文章主要介绍了webpack项目轻松混用css module的方法,内容挺不错的,现在分享给大家,也给大家做个参考。 前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。 比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将…

    好文分享 2025年12月24日
    000
  • css中border属性之制作网页虚线

    这篇文章主要介绍了css制作网页中的虚线(border属性的使用方法),需要的朋友可以参考下 这里边框属性的虚线边框border控制虚线。以下配置的css 高度(css height)和css 宽度(css width)为350像素。 一、四边为虚线边框 border:1px dashed #000…

    好文分享 2025年12月24日
    000
  • 关于CSS中的before和:after伪元素的使用分析

    这篇文章主要介绍了css中的before和:after伪元素使用详解,包括对一些非文本内容的插入操作使用,需要的朋友可以参考下 如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注。特别是在Nicolas Gallagher的…

    2025年12月24日
    000
  • JS和CSS实现渐变背景特效的代码

    这篇文章主要介绍了js和css实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及javascript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下 本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 立即学习“前端免费…

    2025年12月24日
    000
  • 如何解决CSS图片下面有间隙的问题

    这篇文章主要介绍了css图片下面有间隙的6种解决方案,需要的朋友可以参考下 在进行页面的p+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里把解决直接把解…

    好文分享 2025年12月24日
    000
  • 如何用CSS实现带阴影效果的黑色导航菜单效果

    这篇文章主要为大家介绍了css实现带阴影效果的黑色导航菜单效果,通过css设置背景图片切换效果实现带阴影的导航菜单功能,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了CSS实现带阴影效果的黑色导航菜单效果。分享给大家供大家参考。具体如下: 这是一款CSS实现带阴影效果黑色导航菜单,有立体…

    2025年12月24日
    000
  • 如何设置CSS 文本字体颜色

    这篇文章主要介绍了css 文本字体颜色设置方法(css color),需要的朋友可以参考下 一、认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。 1、常用颜色地方包含:字体颜色、超链接颜色、网页背景颜色、边框颜色2、颜色规范与颜色规定:网页使用RGB模…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信