CSS Reset CSS Framework-白红宇

CSS Reset CSS Framework

阅读量：4609 次

发布时间：2019-06-09

本文共 6158 字，大约阅读时间需要 20 分钟。

*--------------------------------------------------

* Name: Kingwell CSS Framework

* Version: 1.2(June,1 2012)

* Author: Kingwell

* E-mail: jinhua.leng##gmail.com

*--------------------------------------------------

/*---------- CSS RESET START -----------*/

html,body{background:#FFF; color:#333; font: normal normal normal 12px/1 Arial,'宋体', Helvetica, sans-serif; margin:0; padding:0}

a,abbr,acronym,address,applet,article,b,big,blockquote,button,canvas,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,embed,fieldset,font,form,h1,h2,h3,h4,h5,h6,hr,html,nav,i,iframe,img,ins,input,kbd,label,legend,li,menu,object,ol,p,pre,q,s,samp,small,span,section,strike,strong,sub,sup,table,textarea,tbody,td,tfoot,th,thead,tr,tt,u,ul,var{margin:0;padding:0; font-size:100%}

table{border-collapse:collapse; border-spacing:0}

fieldset,img{border:none}

img{vertical-align:middle; outline:none}

q:before,q:after{content:''}p{margin:10px auto}

li{list-style:none}ol{padding-left:20px}ol li{list-style-type:decimal;}

sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}strong{font-weight:bold;}

h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal}

h1{font-size:18px; font-weight:bold}

h2{font-size:16px; font-weight:bold}

h3{font-size:14px; font-weight:bold}

h4{font-size:12px;}

h5{font-size:10px;}

a:link {color:#000;text-decoration:none;}

a:visited{color:#333;text-decoration:none;}

a:hover {color:#00C;text-decoration:underline}

a:active {color:#333;text-decoration:none}

:focus{outline:none}

/*::-moz-selection{background:green; color:white;}*/

/*---------- CSS RESET END ----------*/

/*---------- Form Style ----------*/

form,lable{display:inline}

input,select,textarea,button{font-family:Arial, Helvetica, sans-serif}

input[type=submit],input[type=button],button,input[type=image],input[type=reset]{cursor:pointer; line-height:1}

input[type=text],input[type=password],textarea,select{border:1px solid #CCC; line-height:1; padding:5px; min-width:200px;}

input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{background:#FFF9D9; border:1px solid orange; box-shadow:0 0 5px #CCC}/*----- Focus ------*/

input[type=radio],input[type=checkbox]{vertical-align:middle; margin-right:5px;}

textarea{min-height:60px;}

/*----- Button Style ------*/

input[type=button],input[type=reset],button{border:1px solid #AAA; padding:5px 10px; color:#333; border-radius:2px; background:-moz-linear-gradient(#FFF,#DDD); background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#DDD));}

input[type=button]:hover,input[type=reset]:hover,button:hover{background:-moz-linear-gradient(90deg,#FFF,#DDD); background:-webkit-gradient(linear,0% 100%,0% 0%,from(#FFF),to(#DDD)); text-shadow:1px 1px 2px rgba(0,0,0,0.2)}

input[type=button]:active,input[type=reset]:active,button:active{color:gray;}

/*---------- Public Style ----------*/

div.noscript{background:#FFF9D9; border:1px solid orange; box-shadow:5px 5px 5px rgba(0,0,0,0.5); position:absolute; width:500px; left:50%; margin-left:-250px; top:100px; padding:20px; z-index:100000}

span.noscript{color:#E00; font-weight:bold; padding:5px;}

.strong{font-weight:bold}.lighter{font-weight:lighter}.gray{color:gray}

.shadow{background:white;box-shadow:0 0 2px #CCC}

.tips{color:#E00!important; _color:#E00}

.f-l{float:left}.f-r{float:right}

.clear-float{clear:both;line-height:0;height:0;overflow:hidden}

.c-l{clear:left}.c-r{clear:right}

.after:after{clear:both; content:"."; display:block; visibility:hidden; height:0; line-height:0;}

.hr{border-top:1px solid #CCC; border-bottom:1px solid #FFF; margin:5px auto;}

.block{display:block}.none{display:none}

/*-- No Margin --*/

.no-margin{margin:0!important; _margin:0}

.no-margin-top{margin-top:0!important; _margin-top:0}

.no-margin-right{margin-right:0!important; _margin-right:0}

.no-margin-bottom{margin-bottom:0!important; _margin-bottom:0}

.no-margin-left{margin-left:0!important; _margin-left:0}

.ellipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/*-- Alert --*/

.cover{position:absolute; top:0; left:0; margin:auto; width:100%; height:100%; background:rgba(0,0,0,0.5); _background:#000; z-index:10000}

.alert-container{width:500px; position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-200px; background:#FFF; box-shadow:0 0 10px rgba(0,0,0,0.5);}

.alert-title{line-height:30px; padding:0 10px; border-bottom:1px solid #CCC; cursor:move; font-weight:bold}

.alert-content{padding:10px;}

.alert-button{margin-top:10px; text-align:right}

/*---------- Bread Crumbs ----------*/

.bread-crumbs{color:gray; margin:10px auto}

/*---------- Paging ----------*/

.paging{margin:20px auto}

.paging a{display:inline-block; _display:inline; _zoom:1; padding:5px 10px; margin:auto 3px; text-decoration:none!important; text-decoration:none; cursor:pointer; border:1px solid #AAA; background:-moz-linear-gradient(#FFF,#EEE); background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#EEE));}

.paging a:hover{color:#333}

.paging a.curr{background:#CCC; cursor:auto}

.paging a.dis{color:#CACACA; border:1px solid #CACACA; cursor:auto}

/*----- Percent ------*/

.per-5{width:5%;}

.per-10{width:10%;}

.per-15{width:15%;}

.per-20{width:20%;}

.per-25{width:25%;}

.per-30{width:30%;}

.per-35{width:35%;}

.per-40{width:40%;}