整理base.css,重设浏览器样式

有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载

  1 /* 
  2 * @Author: liubeimeng
  3 * @Date:   2015-11-11 10:22:02
  4 * @Last Modified by:   liubeimeng
  5 * @Last Modified time: 2015-11-11 10:33:18
  6 * @名称：base.css
  7 * @功能：1、重设浏览器默认样式
  8 *       2、设置通用原子类
  9 */
 10 @charset "utf-8";
 11 /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
 12 html {background:#FFFFFF;color:#000000;}
 13 /* 内外边距通常让各个浏览器样式的表现位置不同 */
 14 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}
 15 /*
 16 *要注意表单元素并不继承父级 font 的问题 
 17 *tahoma:大河马字体,tahoma为windows操作系统的英文默认字型.tahoma是种非常圆滑的字体.这个字体比较均衡,中英文混排显示时,不会出现中英文不对齐的状态.
 18 *arial:是一套随同多套微软应用软件所分发的无衬线体TrueType字型.
 19 *sans-serif:表示是无衬线字体,是一种通用字体族.
 20 *\5b8b\4f53就是宋体.用unicode表示,不用SimSun,是因为Firefox的某些版本和Opera不支持SimSun 的写法.注释乱码:强烈建议不要用中文注释.font-family:'宋体'.
 21 *为了方便大家好查，整理了些中文名 Unicode，特此献给其他前端开发的朋友们
 22 *新细明体 \65B0\7EC6\660E\4F53
 23 *细明体 \7EC6\660E\4F53
 24 *标楷体 \6807\6977\4F53
 25 *黑体 \9ED1\4F53
 26 *宋体 \5B8B\4F53
 27 *新宋体 \65B0\5B8B\4F53
 28 *仿宋 \4EFF\5B8B
 29 *楷体 \6977\4F53
 30 *仿宋_GB2312 \4EFF\5B8B_GB2312
 31 *楷体_GB2312 \6977\4F53_GB2312
 32 *微软正黑体 \5FAE\x8F6F\6B63\9ED1\4F53
 33 *微软雅黑 \5FAE\8F6F\96C5\9ED1
 34  */ 
 35 body,button,input,select,textarea {font:12px tahoma,arial,\5b8b\4f53,sans-serif;}
 36 input,select,textarea {font-size:100%;}
 37 /* 去掉 table cell 的边距并让其边重合 */
 38 table {border-collapse:collapse;border-spacing:0;}
 39 /* IEBUG:th不继承text-align */
 40 th {
 41     text-align:inherit;
 42 }
 43 /* 去除默认边框 */
 44 fieldset,img {
 45     border:none;
 46 }
 47 /* ie6 7 8(q) bug 显示为行内表现 */
 48 iframe {
 49     display:block;
 50 }
 51 /* 去掉 firefox 下此元素的边框 */
 52 abbr,acronym {
 53     border:none;
 54     font-variant:normal;
 55 }
 56 /* 一致的 del 样式 */
 57 del {
 58     text-decoration:line-through;
 59 }
 60 address,caption,cite,code,dfn,em,th,var {
 61     font-style:normal;
 62     font-weight:500;
 63 }
 64 /* 去掉列表前的标识,li会继承 */
 65 ol,ul {
 66     list-style:none;
 67 }
 68 /* 对齐是排版最重要的因素,别让什么都居中 */
 69 caption,th {
 70     text-align:left;
 71 }
 72 /* 来自yahoo,让标题都自定义,适应多个系统应用 */
 73 h1,h2,h3,h4,h5,h6 {
 74     font-size:100%;
 75     font-weight:500;
 76 }
 77 q:before,q:after {
 78     content:'';
 79 }
 80 /* 统一上标和下标 */
 81 sub,sup {
 82     font-size:75%;
 83     line-height:0;
 84     position:relative;
 85     vertical-align:baseline;
 86 }
 87 sup {
 88     top:-0.5em;
 89 }
 90 sub {
 91     bottom:-0.25em;
 92 }
 93 /* 让链接在hover状态下显示下划线 */
 94 a:hover {
 95     text-decoration:underline;
 96 }
 97 /* 默认不显示下划线，保持页面简洁 */
 98 ins,a {
 99     text-decoration:none;
100 }
101 /* 去除 ie6 & ie7 焦点点状线 */
102 a:focus,*:focus {
103     outline:none;
104 }
105 /* 清除浮动 */
106 .clearfix:before,.clearfix:after {
107     content:"";
108     display:table;
109 }
110 .clearfix:after {
111     clear:both;
112     overflow:hidden;
113 }
114 .clearfix {
115     zoom:1; /* for ie6 & ie7 */
116 }
117 .clear {
118     clear:both;
119     display:block;
120     font-size:0;
121     height:0;
122     line-height:0;
123     overflow:hidden;
124 }
125 /* 设置显示和隐藏,通常用来与 js 配合 */
126 .none{
127     display:none;
128 }
129 .block {
130     display:block;
131 }
132 /* 设置浮动，减少浮动带来的 bug */
133 .fl,.fr {
134     display:inline;
135 }
136 .fl {
137     float:left;
138 }
139 .fr {
140     float:right;
141 }
posted @ 2015-11-11 10:38  SkyTeam_LBM  阅读(236)  评论(0)  编辑  收藏  举报