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]>

posted on 2014-05-07 18:16  icelin  阅读(458)  评论(0编辑  收藏  举报

导航