首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS Normalize文件配置示例

所属分类： 网页制作 / CSS 阅读数： 718
收藏 0 赞 0 分享

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

CSS Code复制内容到剪贴板
  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: 存放项目中的图片（里面又会根据项目模块进行文件夹划分）
    2）css: 存放css文件（里面会有一个base.css文件，预置上文中的css normalize）
    3）js：存放js文件，里面还有一个vender的文件夹，存放插件js（例如：jQuery库），外面有main.js（主要js文件），plugins.js（插件引用的js）

根目录下，为index.html文件
主要为如下文件：

CSS Code复制内容到剪贴板
  1. <!doctype html>   
  2. <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->   
  3. <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->   
  4. <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->   
  5. <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->   
  6. <head lang="zh-CN">   
  7.     <meta charset="utf-8" />   
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
  9.     <title>xxx</title>   
  10.     <meta name="keywords" content="xxx" />   
  11.     <meta name="description" content="xxx" />   
  12.   
  13.     <link rel="shortcut icon" href="images/favicon.ico" /> <!-- IE address前ico图标 -->   
  14.     <link rel="stylesheet" href="css/normalize.css" /> <!-- reset style -->   
  15.     <link rel="stylesheet" href="css/base.css" /> <!-- basic style -->   
  16.   
  17.     <script src="js/vendor/jquery-1.10.2.min.js"></script> <!-- jQuery library -->   
  18.     <script src="js/vendor/jquery-ui-1.11.1.js"></script> <!-- jQuery UI library -->   
  19.     <script src="js/main.js"></script> <!-- main js -->   
  20.     <script src="js/plugins.js"></script> <!-- plugins  -->   
  21.   
  22.     <!--[if (gte IE 6)&(lte IE 8)]>     
  23.       <script type="text/javascript" src="js/vendor/selectivizr.js"></script>   
  24.       <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>   
  25.     <![endif]--> <!--/*修正CSS3在IE6-8*/-->   
  26.   
  27.     <!--[if lt IE 9]>   
  28.        <script src="js/html5.js"></script>   
  29.     <![endif]-->   
  30.   
  31. </head>   
  32. <body>   
  33. <!--wrapper-->   
  34. <div class="wrapper">   
  35.     <!--header-->   
  36.     <div class="header">   
  37.         <!--logo-->   
  38.         <div class="logo"></div>   
  39.         <!--logo end-->   
  40.         <!--navigation-->   
  41.         <div class="nav">   
  42.         </div>   
  43.         <!--navigation  end-->   
  44.   
  45.         <!--banner-->   
  46.         <div class="banner">   
  47.         </div>   
  48.         <!--banner-->   
  49.   
  50.     </div>   
  51.     <!--header end-->   
  52.   
  53.     <!--container-->   
  54.     <div class="container">   
  55.         <!--news-->   
  56.         <div class="news">   
  57.         </div>   
  58.         <!--news  end-->   
  59.   
  60.         <!--sidebar banner-->   
  61.         <div class="sidebar">   
  62.         </div>   
  63.         <!--sidebar banner end-->   
  64.   
  65.         <!--hot top9-->   
  66.         <div class="hot">   
  67.         </div>   
  68.         <!--hot top9-->   
  69.   
  70.     </div>   
  71.     <!--container end-->   
  72.   
  73.     <!--footer-->   
  74.     <div class="footer">   
  75.         <!--about us-->   
  76.         <div class="about-us"></div>   
  77.   
  78.         <!--webchat-->   
  79.         <div class="webchat"></div>   
  80.   
  81.         <!--copyright-->   
  82.         <div class="copyright"></div>   
  83.     </div>   
  84.     <!--footer end-->   
  85. </div>   
  86. <!--wrapper end-->   
  87. </body>   
  88. </html>  

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

CSS Code复制内容到剪贴板
  1. <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />   
  2. <meta name="apple-mobile-web-app-capable" content="yes" />   
  3. <meta name="apple-touch-fullscreen" content="yes" />   
  4. <meta name="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

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

　出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

　　png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 　　但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

　　css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

　　这个问题是别人提出的，因为css对文字的布局上没有靠容器底部对齐的参数，（或许有但是我没有发现）不过目前我使用的一个不错的方法也比较好．就是用position属性来解决，看下面的代码，我用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

　　这个效果实现的是，在B页面里有两个层，一个显示层，我们暂定名c层，一个是隐藏层，我们暂定名d层，单独进B页面的时候，c层显示，d层隐藏，然而从A页面连接到B页面的时候，则是让d层显示，c层隐藏，我觉得这个效果对网页设计者以后会有很大帮助，现在把代码发出来，
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的：二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解３个参数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码原理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后，我们时常会看到两种不同的网页的声明，一个是Dhtml，一个是Xhtml。如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22