Created
November 13, 2013 03:50
css:通用框架样式
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
*重置 | |
*/ | |
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} | |
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} | |
table{border-collapse:collapse;border-spacing:0;} | |
html,body,fieldset,img,iframe,abbr{border:0;} | |
i,cite,em,var,address,dfn{font-style:normal;} | |
li{list-style:none;} | |
h1,h2,h3,h4,h5,h6,small{font-size:100%;} | |
q:before,q:after{content:none;} | |
textarea{overflow:auto;resize:none;} | |
label,summary{cursor:default;} | |
a,button{cursor:pointer;} | |
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;} | |
del,ins,a,a:hover{text-decoration:none;} | |
body,textarea,input,button,select,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;} | |
body{background:#fff;} | |
a,a:hover{color:#333;} | |
/* 默认 */ | |
strong,em{font-style:normal;font-weight:bold;} | |
/* 统一调用背景图 */ | |
.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;} | |
/* 统一清除浮动 */ | |
.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';} | |
.g-bdc,.m-dimg ul,.u-tab{zoom:1;} | |
/* | |
*布局 | |
*/ | |
.g-doc{}/*文档doc*/ | |
.g-hd{}/*头部head*/ | |
.g-bd{}/*主体body*/ | |
.g-ft{}/*尾部foot*/ | |
.g-mn{}/*主栏main*/ | |
.g-mnc{}/*主栏子容器mainc*/ | |
.g-sd{}/*侧栏side*/ | |
.g-sdc{}/*侧栏子容器*/ | |
.g-wrap, .g-box{}/*盒容器*/ | |
/* | |
*模块 | |
*/ | |
.m-nav{}/*导航*/ | |
.m-snav{}/*子导航subnav*/ | |
.m-menu{}/*菜单*/ | |
.m-tab{}/*选项卡*/ | |
.m-hd, .m-tt{}/*标题区head/title*/ | |
.m-bd, .m-ct{}/*内容区body/content*/ | |
.m-lst{}/*列表list*/ | |
.m-tb{}/*表格table*/ | |
.m-fm{}/*表单form*/ | |
.m-hot{}/*热点*/ | |
.m-top{}/*排行*/ | |
.m-log{}/*登录login*/ | |
.m-logo{}/*标志*/ | |
.m-ad{}/*广告advertise*/ | |
.m-sch{}/*搜索search*/ | |
.m-sld{}/*幻灯slide*/ | |
.m-tips{}/*提示*/ | |
.m-help{}/*帮助*/ | |
.m-news{}/*新闻*/ | |
.m-dld{}/*下载download*/ | |
.m-reg{}/*注册regist*/ | |
.m-vote{}/*投票*/ | |
.m-cprt{}/*版权cprt*/ | |
.m-rst{}/*结果rst*/ | |
/* | |
*元件 | |
*/ | |
.u-tt{}/*标题*/ | |
.u-btn{}/*按钮*/ | |
.u-ipt{}/*输入*/ | |
.u-crm{}/*面包屑crumb*/ | |
/* | |
*功能 | |
*/ | |
.f-cb{zoom:1;}/*清除浮动clearboth*/ | |
.f-cb:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";} | |
.f-fl{float:left;}/*向左浮动floatleft*/ | |
.f-fr{float:right;}/*向右浮动floatright*/ | |
.f-ib{display:inline-block;*display:inline;*zoom:1;}/*内联块级inlineblock*/ | |
.f-tac{text-align:center;}/*文本居中textaligncenter*/ | |
.f-tar{text-align:right;}/*文本居右textalignright*/ | |
.f-tal{text-align:left;}/*文本居左textalignleft*/ | |
.f-taj{text-align:justify;text-justify:inter-ideograph;}/*两端对齐*/ | |
.f-vam{vertical-align:middle;}/*垂直居中verticalalignmiddle*/ | |
.f-oh{overflow:hidden;}/*溢出隐藏overflowhidden*/ | |
.f-dn{display:none;}/*完全消失displaynone*/ | |
.f-db{display:block;} | |
.f-pr{position:relative;}/*相对定位*/ | |
.f-prz{position:relative;zoom:1;} | |
.f-fs{}/*字体大小fontsize*/ | |
.f-fs1{font-size:12px;} | |
.f-fs2{font-size:14px;} | |
.f-fw{}/*字体粗细fontweight*/ | |
.f-fwn{font-weight:normal;} | |
.f-fwb{font-weight:bold;} | |
.f-wsn{word-wrap:normal;white-space:nowrap;}/*一行内强制显示*/ | |
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}/*保留空白换行*/ | |
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}/*强制换行*/ | |
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}/*文本超出部分省略*/ | |
.f-tdu,.f-tdu:hover{text-decoration:underline;}/*下划线有*/ | |
.f-tdn,.f-tdn:hover{text-decoration:none;}/*下划线无*/ | |
.f-csp{cursor:pointer;}/*鼠标样式*/ | |
.f-csd{cursor:default;} | |
.f-csh{cursor:help;} | |
.f-csm{cursor:move;} | |
/* | |
*皮肤 | |
*/ | |
.s-fc{}/*字体颜色fontcolor*/ | |
.s-bg{}/*背景background*/ | |
.s-bgc{}/*背景颜色backgroundcolor*/ | |
.s-bgi{}/*背景图片backgroundimage*/ | |
.s-bgp{}/*背景定位backgroundposition*/ | |
.s-bdc{}/*边框颜色bordercolor*/ | |
/* | |
*状态 | |
*/ | |
.z-sel{}/*选中selected*/ | |
.z-crt{}/*当前current*/ | |
.z-show{}/*显示*/ | |
.z-hide{}/*隐藏*/ | |
.z-open{}/*打开*/ | |
.z-close{}/*关闭*/ | |
.z-err{}/*出错error*/ | |
.z-dis{}/*不可用disabled*/ | |
/* | |
*媒体查询 | |
*/ | |
@media screen and (orientation:landscape){/* 横屏 */ | |
} | |
@media screen and (orientation:portrait){/* 竖屏 */ | |
} | |
@media screen and (max-width:959px){/* 窗口宽度<960,设计宽度=768 */ | |
} | |
@media screen and (max-width:767px){/* 窗口宽度<768,设计宽度=640 */ | |
} | |
@media screen and (max-width:639px){/* 窗口宽度<640,设计宽度=480 */ | |
} | |
@media screen and (max-width:479px){/* 窗口宽度<480,设计宽度=320 */ | |
} | |
@media screen and (-ms-view-state:snapped){/* windows UI 贴靠 */ | |
} | |
@media print{/* 打印 */ | |
} | |
/* | |
*动画 | |
*/ | |
.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}/* 淡入 */ | |
@-webkit-keyframes fadein{/* 淡入 */ | |
0%{opacity:0;} | |
100%{opacity:1;} | |
} | |
@-moz-keyframes fadein{ | |
0%{opacity:0;} | |
100%{opacity:1;} | |
} | |
@-ms-keyframes fadein{ | |
0%{opacity:0;} | |
100%{opacity:1;} | |
} | |
@keyframes fadein{ | |
0%{opacity:0;} | |
100%{opacity:1;} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment