|
- 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;word-wrap:break-word}
- body,html,input{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}
- table{border-collapse:collapse;border-spacing:0;}img{border:none}
- pre {white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */}
- h1,h2,h3,h4,h5,h6{font-size:100%;}input.dialog{height:0; height:0; font-size:0; line-height:0; border:none}
- h1{font-size:34px;}h2{font-size:26px;}h3{font-size:18px; }h4{font-size:16px;}h5{font-size:14px;}h6{font-size:12px;}
- input,label,img,th{vertical-align:middle;}.font-fixh{font-family: Georgia,Arial; color: #f00; font-size: 16px; font-weight: 700;}address,cite,dfn,em,var{font-style:normal;}
- code,kbd,pre,samp{font-family:courier new,courier,monospace;}
- input.button ,input.btn{padding:0.4em 1.0em 0.6em;width: auto;_width:0;overflow:visible !ie;}
- ul,ol,li{list-style:none;}
- a{text-decoration:none;}
- a:hover{text-decoration:underline;}
- .white,.white a{color:#fff}.blue,.blue a{color:#0072ff}.gray4,a.gray4{color:#999}
- .red, .red a, a.red{color:red;}.green{color:#0E774A}
- select optgroup{color:#CAC8BB;}
- header{ display:block}
- /*通用样式*/
- .hidden{display:none;}.invisible{visibility:hidden;}
- .ib,.ib-a a{display:inline-block;zoom:1;*display:inline;}
- .clear:after,.main:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clear,.main{display:inline-block;}/* Hides from IE-mac \*/* html .clear,* html .main{height:1%;}.clear,.main{display:block;}
-
- .f12{font-size: 12px}.f14{font-size: 14px}.f16{font-size: 16px}.f18{font-size:18px}.f20{font-size:20px}
- .lh20{line-height: 20px}.lh22{line-height: 22px}.lh24{line-height: 24px}.lh26{line-height: 26px}.lh28{line-height: 28px}
- .fb{ font-weight:bold}.fn{ font-weight:normal}
- .bk,.bk3,.bk6,.bk8,.bk10,.bk15,.bk20,.bk30{clear: both;font-size: 1px;height: 0;line-height: 1px}
- .bk3{height: 3px;}.bk6{height: 6px}.bk8{height: 8px}.bk10{height: 10px}.bk15{height: 15px}.bk20{height: 20px}.bk30{height: 30px}
- .row-2 li{ float:left; width:50%}.row-3 li{ float:left; width:33%}.row-4 li{ float:left; width:25%}.row-5 li{ float:left; width:20%}
- .cu,.cu-li li,.cu-span span {cursor: hand;!important;cursor: pointer}
- .text-c{text-align: center}.text-l{text-align: left}.text-r{text-align: right}
- .lf{float: left}.rt{float: right}.pr{ position:relative}.pa{ position:absolute}
- .img-wrap{border:1px solid #eee;text-align:center;overflow:hidden}
- .img-wrap a{display:table-cell;vertical-align:middle;*display:block; overflow:hidden; background-color:#fff}
- .img-wrap a:hover{ background-color:#e8eff6}
- .col-left{float:left}
- .col-auto{overflow:hidden;_zoom:1;_float:left;}
- .col-right{float:right}
-
- /* webkit内核浏览器,滚动条外观定义
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-button 滚动条两端的按钮
- ::-webkit-scrollbar-track 外层轨道
- ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
- ::-webkit-scrollbar-thumb (拖动条?滑块?滚动条里面可以拖动的那个,肿么翻译好呢?)
- ::-webkit-scrollbar-corner 边角
- ::-webkit-resizer 定义右下角拖动块的样式
- 当然webkit提供的不止这些,还有很多伪类,可以更丰富滚动条样式:
- :horizontal – horizontal伪类应用于水平方向的滚动条
- :vertical – vertical伪类应用于竖直方向的滚动条
- :decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)
- :increment – increment伪类和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)
- :start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
- :end – 类似于start伪类,标识对象是否放到滑块的后面。
- :double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。
- :single-button – 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。
- :no-button – 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。
- :corner-present – 用于所有滚动条轨道,指示滚动条圆角是否显示。
- :window-inactive – 用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
- 另外,:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。
- */
- ::-webkit-scrollbar {
- width: 6px;
- height: 6px;
- -webkit-border-radius: 6px;
- }
- ::-webkit-scrollbar-track {
- -webkit-border-radius: 6px;
- -webkit-box-shadow: none;
- background-color: transparent;
- width: 3px;
- height: 3px;
- border:1px solid rgba(255,255,255,1);
- }
- ::-webkit-scrollbar-track-piece {
- -webkit-border-radius: 6px;
- background-color: #FFF;
- -webkit-box-shadow: none;
- width: 3px;
- height: 3px;
- }
- ::-webkit-scrollbar-thumb {
- -webkit-border-radius: 6px;
- background-color: rgba(244, 244, 244, 1);
- -webkit-box-shadow: inset 1px 1px 15px rgba(255,255,255,0.8),
- inset 1px 1px 0px rgba(255,255,255,0.8);
- border:1px solid rgba(0,0,0,0.1);
- }
- ::-webkit-scrollbar-thumb:hover,
- ::-webkit-scrollbar-thumb:active {
- background-color: rgba(204, 204, 204, 1);
- -webkit-box-shadow: none;
- border:1px solid rgba(0,0,0,0.1);
- }
- ::-webkit-scrollbar-track:window-inactive,
- ::-webkit-scrollbar-track-piece:window-inactive,
- ::-webkit-scrollbar-thumb:window-inactive {
- -webkit-box-shadow:none;
- }
- ::-webkit-scrollbar-button {
- width: 0;
- height: 0;
- display: none;
- }
- ::-webkit-scrollbar-corner {
- background-color: transparent;
- }
- ::-webkit-resizer{
- background-color: transparent;
- }
|