• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS Normalize文件配置示例

CSS Normalize文件配置示例

作者:mli 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,Normalize等相关知识,mli 希望在学习及工作中可以帮助到您

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

  1. /*Normalize*/  
  2. *{margin:0;padding:0;list-style-type:none;}   
  3.   
  4. *html,*html body /* 修正IE6振动bug */{   
  5.     background-image:url(about:blank);   
  6.     background-attachment:fixed;   
  7. }   
  8. body{   
  9.     font-family:"Microsoft Yahei","Hiragino Sans GB" ,Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;   
  10.     /*font-size : 62.5%; px数值除以10,然后换上em作为单位*/  
  11.     /*min-width:980px;*/  
  12.     font-size:13px;   
  13. }   
  14.   
  15. a,img{border:none;text-decoration:none;}   
  16. a{blr:expression(this.onFocus=this.blur());} /*去掉a标签的虚线框,避免出现奇怪的选中区域*/  
  17. /*a:active {test:expression(target="_blank");}*/  
  18. :focus{outline:0;}   
  19. label{cursor:pointer;}   
  20. img{vertical-align:middle;}   
  21. table{empty-cells:show;border-collapse:collapse;border-spacing:0;}   
  22. h1{font-size:1.6em;}h2,h3,h4{font-size:1.4em;}h5,h6{font-size:1.2em;}   
  23. input{border:none;}   
  24. textarea{overflow:scroll;}   
  25.   
  26. a, input,textarea, .hover-delay {   
  27.     font-family:"Microsoft Yahei","Hiragino Sans GB", Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;   
  28.     -webkit-transition: all 0.3s ease-out;   
  29.     -moz-transition: all 0.3s ease-out;   
  30.     -ms-transition: all 0.3s ease-out;   
  31.     -o-transition: all 0.3s ease-out;   
  32.     transition: all 0.3s ease-out;   
  33.   
  34. }   
  35. input.none-radius{   
  36.     border-radius:0;   
  37.     -moz-border-radius:0;   
  38.     -webkit-border-radius:0;   
  39. }   
  40.   
  41. input::-ms-clear{ display:none;}  //去掉输入框的叉叉   
  42.   
  43. .clear{clear:both;}   
  44. .txt-indent{text-indent:-999px;overflow:hidden;}   
  45.   
  46. input[type=text],input[type=tel],input[type=email]{   
  47. -webkit-appearance: none;   
  48.  box-shadow: none;}   
  49.   
  50. /*Normalize end*/  

对与我的实际使用中,我有一个Template文件夹(最近新增了一个针对Mobile)
里面的文件夹大致分为如下:

    1)images: 存放项目中的图片(

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06inline-block空隙之css letter-spacing与字体大小/字体关系数据表
  • 2017-08-0615个CSS常识 注意一下吧
  • 2017-08-06CSS Sprite打造的个性化导航菜单代码
  • 2017-08-06利用CSS定位背景图片 background-position
  • 2017-08-06ie6下embed标签不能播放视频问题解决方法
  • 2017-08-06纯CSS实现设置半个字符的样式
  • 2017-08-06不固定宽度和高度的情况下CSS调整div居中的方法总结
  • 2017-08-06鼠标悬停图片产生边框的效果实现
  • 2017-08-06网站日志200 0 64状态码的分析(协议子状态)
  • 2017-08-06深入理解CSS的height:100%和height:inherit之间的使用区别

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详解CSS中的flex容器与flex属性
    • 浅谈css margin重叠
    • CSS haslayout 彻底了解
    • 高效的CSS选择器编写指南
    • CSS实现HTML背景图片拉伸铺满示例
    • 图片溢出div问题的快速解决方法推荐
    • 使用CheckBox的属性制作纯css动态导航栏
    • 用CSS3来实现社交分享按钮
    • 空心三角形的简单实现(必看篇)
    • CSS 在IE6, IE7 和IE8中的差别

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有