首页 > 代码库 > css 模板

css 模板

2024-07-03 10:43:57   230人阅读

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


联系
我们