CSS版面配置：修訂版本之間的差異
出自六年制學程
| 第 55 行： | 第 55 行： | ||
}} | }} | ||
<table width='800px'><tr><th width=50%> | <table width='800px'><tr><th width=50%> | ||
| − | < | + | <div class='toc'><ul> |
<li>[http://zh-tw.learnlayout.com/no-layout.html 沒有版面配置]</li> | <li>[http://zh-tw.learnlayout.com/no-layout.html 沒有版面配置]</li> | ||
<li>[http://zh-tw.learnlayout.com/display.html 關於 'display' 屬性]</li> | <li>[http://zh-tw.learnlayout.com/display.html 關於 'display' 屬性]</li> | ||
| 第 66 行： | 第 66 行： | ||
<li>[http://zh-tw.learnlayout.com/float.html 關於 float 屬性]</li> | <li>[http://zh-tw.learnlayout.com/float.html 關於 float 屬性]</li> | ||
<li>[http://zh-tw.learnlayout.com/clear.html 關於 clear 屬性]</li> | <li>[http://zh-tw.learnlayout.com/clear.html 關於 clear 屬性]</li> | ||
| − | </ul></ | + | </ul></div></th><th><ul class='toc'><ul> |
<li>[http://zh-tw.learnlayout.com/clearfix.html clearfix 密技]</li> | <li>[http://zh-tw.learnlayout.com/clearfix.html clearfix 密技]</li> | ||
<li>[http://zh-tw.learnlayout.com/float-layout.html float 版面配置範例]</li> | <li>[http://zh-tw.learnlayout.com/float-layout.html float 版面配置範例]</li> | ||
2019年1月28日 (一) 23:37的修訂版本
{{#css: .toc {
line-height: 1.5em; padding-left: 0;
} .toc ul {
padding: 0; width: 100%; margin: auto;
} .toc li {
list-style-type:none; margin-bottom: .5em;
} .toc li a {
display: block;
text-align: center;
padding: .5em;
color: #fff;
background-color: #D64078;
border: solid #B03060 1px;
border-bottom: solid #B03060 4px;
text-shadow: 0px 2px 0 #B03060;
border-radius: .3em;
position: relative;
-webkit-transition: all 0.1s ease-out; /* Safari 3.2+, Chrome */
-moz-transition: all 0.1s ease-out; /* Firefox 4-15 */
-o-transition: all 0.1s ease-out; /* Opera 10.5–12.00 */
transition: all 0.1s ease-out; /* Firefox 16+, Opera 12.50+ */
} .toc li a:hover {
text-decoration: none; background-color: #c63b6f;
} .toc li a:active {
border-bottom: solid #b03060 1px;
top: 4px;
-webkit-transition: all 0 ease-out; /* Safari 3.2+, Chrome */
-moz-transition: all 0 ease-out; /* Firefox 4-15 */
-o-transition: all 0 ease-out; /* Opera 10.5–12.00 */
transition: all 0 ease-out; /* Firefox 16+, Opera 12.50+ */
} @media screen and (min-width:601px) {
.toc {
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.2em;
}
} }}
