有的时候,可以把自己经常写的代码整理一下,分文别类,用的时候,拿过来直接用就可以了,可以节约很多时间,提高工作效率.所以,每个人都要有自己的代码库.点击下载
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 *5b8b4f53就是宋体.用unicode表示,不用SimSun,是因为Firefox的某些版本和Opera不支持SimSun 的写法.注释乱码:强烈建议不要用中文注释.font-family:'宋体'. 21 *为了方便大家好查，整理了些中文名 Unicode，特此献给其他前端开发的朋友们 22 *新细明体 65B07EC6660E4F53 23 *细明体 7EC6660E4F53 24 *标楷体 680769774F53 25 *黑体 9ED14F53 26 *宋体 5B8B4F53 27 *新宋体 65B05B8B4F53 28 *仿宋 4EFF5B8B 29 *楷体 69774F53 30 *仿宋_GB2312 4EFF5B8B_GB2312 31 *楷体_GB2312 69774F53_GB2312 32 *微软正黑体 5FAEx8F6F6B639ED14F53 33 *微软雅黑 5FAE8F6F96C59ED1 34 */ 35 body,button,input,select,textarea {font:12px tahoma,arial,5b8b4f53,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 }