Difference between revisions of "Template:TCU Taiwan/Notebook/CSS"
| Line 107: | Line 107: | ||
#abgne-block-20120427 li a img { | #abgne-block-20120427 li a img { | ||
border: none; | border: none; | ||
| + | } | ||
| + | body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none} | ||
| + | h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal} | ||
| + | body>div{margin:0 auto} | ||
| + | div {text-align:left} | ||
| + | a img {border:0} | ||
| + | body { | ||
| + | color: #FFF; | ||
| + | text-align: center; | ||
| + | font: 12px "宋体"; | ||
| + | background-color: #FFF; | ||
| + | background: rgba(0%, 0%,0%, 100%); | ||
| + | } | ||
| + | ul, ol, li {list-style-type:none;vertical-align:0} | ||
| + | a {outline-style:none;color:#535353;text-decoration:none} | ||
| + | a:hover { color: #D40000; text-decoration: none} | ||
| + | .button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2); | ||
| + | } | ||
| + | .red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); | ||
| + | } | ||
| + | .red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;} | ||
| + | .red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');} | ||
| + | .cor_bs,.cor_bs:hover{color:#ffffff;} | ||
| + | .keBody{background:url(../images/bodyBg.jpg) repeat #333;} | ||
| + | .keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal} | ||
| + | .kePublic{background:#FFF; padding:50px;} | ||
| + | .keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px} | ||
| + | .keTxtP{font-size:16px; color:#ffffff;} | ||
| + | .keUrl{color:#FFF; font-size:30px;} | ||
| + | .keUrl:hover{ text-decoration: underline; color: #FFF; } | ||
| + | .mKeBanner,.mKeBanner div{text-align:center;} | ||
| + | .mkeFocus { height: 488px; width: 603px; border: 1px solid #C9CACB; border-radius:8px; padding-top: 7px; margin:0 auto } | ||
| + | .mkeUl { margin: 0px auto; height: 486px; width: 588px; overflow: hidden; position: relative; } | ||
| + | .mkeUl ul { position: absolute; left: 0px; top: 0px; height: 486px; } | ||
| + | .mkeUl ul li { float: left; text-align: center; font: 20px "微软雅黑"; } | ||
| + | .mkeUl ul li img { margin-bottom: 10px; } | ||
| + | .mkeNum { background: rgba(0%, 0%,0%, 100%) url(../images/banNum.jpg); height: 35px; width: 37px; position: absolute; z-index: 1; left: 13px; bottom: 4px; font: 14px Arial; visibility: hidden;} | ||
| + | .mke_ns1 { line-height: 16px; text-align: center; height: 16px; width: 16px; position: absolute; left: 0px; top: 0px; } | ||
| + | .mke_ns2 { line-height: 16px; color: #9FA0A0; text-align: center; display: block; height: 16px; width: 16px; position: absolute; right: 0px; bottom: 0px; } | ||
| + | .mkeLbtn { | ||
| + | height: 30px; | ||
| + | width: 30px; | ||
| + | position: absolute; | ||
| + | left: 6px; | ||
| + | top: 200px; | ||
| + | cursor: pointer; | ||
| + | z-index: 10; | ||
| + | color: #F00; | ||
| + | font-size: 1cm; | ||
| + | font-family:fantasy; | ||
| + | visibility: visible; | ||
| + | } | ||
| + | .mkeRbtn { | ||
| + | position: absolute; | ||
| + | top: 200px; | ||
| + | right: 6px; | ||
| + | height:30px; | ||
| + | width: 30px; | ||
| + | cursor: pointer; | ||
| + | z-index: 10; | ||
| + | color: #00F; | ||
| + | font-size: 1cm; | ||
| + | font-family:fantasy; | ||
| + | visibility: visible; | ||
} | } | ||
Revision as of 07:33, 16 July 2015
.CollapsiblePanel { margin: 0px; padding: 0px; border-left: solid 1px #CCC; border-right: solid 1px #999; border-top: solid 1px #999; border-bottom: solid 1px #CCC; }
/* This is the selector for the CollapsiblePanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open or close the panel.
*
* The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* CollapsiblePanel panel tab container.
*/
.CollapsiblePanelTab { font: bold 0.7em sans-serif; background-color:#000;/*背景色*/ border-bottom: solid 1px #CCC; margin: 0px; padding: 2px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; color:#FFF;/*字*/ font-style: normal; text-transform: none; table-layout: auto; empty-cells: hide; }
/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
* you should never put any padding on the content area element if you plan to
* use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
* element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
*
* The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style a
* CollapsiblePanel content container.
*/
.CollapsiblePanelContent { margin: 0px; padding: 0px; table-layout: fixed; empty-cells: hide; }
/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
* keyboard focus ring appears *inside* the tab instead of around the tab. * This is an example of how to make the text within the anchor tag look * like non-anchor (normal) text. */
.CollapsiblePanelTab a { color:#FFF; text-decoration: none; }
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "CollapsiblePanelOpen" is programatically added and removed * from panels as the user clicks on the tabs within the CollapsiblePanel. */
.CollapsiblePanelOpen .CollapsiblePanelTab { background-color:rgba(0%,0%,0%,0.8);/* 打開後的變色*/ }
/* This is an example of how to change the appearance of the panel tab when the
* CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed * whenever the CollapsiblePanel is closed. */
.CollapsiblePanelClosed .CollapsiblePanelTab {
/* background-color: #FF0000 */
}
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added * and removed from panel tab containers as the mouse enters and exits the tab container. */
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover { background-color:rgba(0%,0%,0%,0.5);/*滑鼠移到位置而變色*/ }
/* This is an example of how to change the appearance of all the panel tabs when the
* CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed * whenever the CollapsiblePanel gains or loses keyboard focus. */
.CollapsiblePanelFocused .CollapsiblePanelTab { background-color: rgba(0%,0%,0%,0.8);/*點擊後變色*/ }
- abgne-block-20120427, #abgne-block-20120427 li {
list-style: none; margin: 0; padding: 0; }
- abgne-block-20120427 {
position: relative; top: 100px; left: 100px; width: 650px; /* (圖片的寬度 + _margin) * 數量 - _margin */ height: 100px; /* 圖片的高度 */ }
- abgne-block-20120427 li {
position: absolute; }
- abgne-block-20120427 li a img {
border: none; } body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none} h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal} body>div{margin:0 auto} div {text-align:left} a img {border:0} body { color: #FFF; text-align: center; font: 12px "宋体"; background-color: #FFF; background: rgba(0%, 0%,0%, 100%); } ul, ol, li {list-style-type:none;vertical-align:0} a {outline-style:none;color:#535353;text-decoration:none} a:hover { color: #D40000; text-decoration: none} .button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2); } .red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); } .red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;} .red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');} .cor_bs,.cor_bs:hover{color:#ffffff;} .keBody{background:url(../images/bodyBg.jpg) repeat #333;} .keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal} .kePublic{background:#FFF; padding:50px;} .keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px} .keTxtP{font-size:16px; color:#ffffff;} .keUrl{color:#FFF; font-size:30px;} .keUrl:hover{ text-decoration: underline; color: #FFF; } .mKeBanner,.mKeBanner div{text-align:center;} .mkeFocus { height: 488px; width: 603px; border: 1px solid #C9CACB; border-radius:8px; padding-top: 7px; margin:0 auto } .mkeUl { margin: 0px auto; height: 486px; width: 588px; overflow: hidden; position: relative; } .mkeUl ul { position: absolute; left: 0px; top: 0px; height: 486px; } .mkeUl ul li { float: left; text-align: center; font: 20px "微软雅黑"; } .mkeUl ul li img { margin-bottom: 10px; } .mkeNum { background: rgba(0%, 0%,0%, 100%) url(../images/banNum.jpg); height: 35px; width: 37px; position: absolute; z-index: 1; left: 13px; bottom: 4px; font: 14px Arial; visibility: hidden;} .mke_ns1 { line-height: 16px; text-align: center; height: 16px; width: 16px; position: absolute; left: 0px; top: 0px; } .mke_ns2 { line-height: 16px; color: #9FA0A0; text-align: center; display: block; height: 16px; width: 16px; position: absolute; right: 0px; bottom: 0px; } .mkeLbtn {
height: 30px;
width: 30px; position: absolute; left: 6px; top: 200px; cursor: pointer; z-index: 10;
color: #F00;
font-size: 1cm;
font-family:fantasy;
visibility: visible; } .mkeRbtn { position: absolute; top: 200px; right: 6px; height:30px; width: 30px; cursor: pointer; z-index: 10; color: #00F;
font-size: 1cm;
font-family:fantasy;
visibility: visible; }