首页 > 代码库 > css 模板
css 模板
css RESET
@CHARSET "gbk"; /*设置编码*/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote, /** 结构元素 **/ dl,dt,dd,ul,ol,li, /** 列表元素 **/ pre, /** 文本格式元素 **/ form,fieldset,legend,button,input,textarea, /** 表单元素 **/ th,td{margin:0;padding:0;} /** 表格元素 **/ /** 设置默认字体颜色为#000,背景色为#fff **/ /** 非IE下增加默认就有垂直滚动条,避免主要是靠JS渲染的页面出现左右闪动的情况**/ html{color:#000; background:#fff;overflow-y:scoll} /** * 设置默认字体, * 根据渐进增强和优雅降级的原理,设置字体顺序为tahoma,arial,宋体,sans-serif * “宋体”使用ascii字符表示,不会出现编码的问题 * 默认字体为12px,行高为12*1.5 = 18px %这个在某些字体下不适合使用,故去除% **/ body,button,input,select,textarea{font-size:12px; font-family:tahoma,arial,\5b8b\4f53,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} /** 重置列表元素 **/ ul,ol{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:underline;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} /** 使得表单元素在 ie 下能继承字体大小 **/ button,input,select,textarea{font-size:100%;} /** 重置表格元素 **/ table{border-collapse:collapse;border-spacing:0;} /** 解决ie7下图片缩放的失真问题 **/ img{-ms-interpolation-mode:bicubic;} /*********webkit内核下让textarea只能垂直拉,不能水平拉*********/ textarea{resize:vertical;}
CSS Type
a:link{color: #5fa207;} a:visited{color: #929976;} a:hover,a:active{color: #4d8006;} /* 其他属性 */ .left {float: left;} .right {float: right;} .overflow {overflow:hidden;} .hide {display: none;} .inlineBlock{display:inline-block;zoom:1;} .block {display: block;} .inline {display: inline;} .error {color:#FF0000;font-size:12px} label, button{cursor:pointer;} /** * 清除浮动,不需要增加额外的标签,直接放在外层的class里即可 * 非IE下使用CSS2的after伪类属性 * IE下使用zoom:1触发haslayout * \20是ascii的空白符,使用空白字符不用增加visibility:hidden * zoom前不加*。如果页面中没有加IE7渲染的meta标签,IE8下不识别*zoom * * <div class="clearfix"> * <div class="grid-40"></div> * <div class="grid-50"></div> * </div> **/ .clearfix:after{content:‘\20‘;display:block;height:0;clear:both;} .clearfix{zoom:1;} .clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden;} /*兼容已有模板*/ /** * 长字符折行。FF3.5+下有了word-wrap:break-word;就不会那么杯具了 * 增加了white-space:pre-wrap;主要是解决pre标签里字符折行的问题。 **/ .wordwrap{word-break:break-all;word-wrap:break-word;} pre.wordwrap{white-space:pre-wrap;}
HTML5标签的支持
/*********** html5 标签,可以考虑使用 **********/ article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block; }
如果使用html5标签的话,为了让ie兼容,需要在head标签里增加如下的内容:
<!--[if IE]> <script> //<![CDATA[ (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(‘,‘),i=e.length;while(i--){document.createElement(e[i])}})(); //]]> </script> <![endif]>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。