「CSS版面配置」修訂間的差異
跳至導覽
跳至搜尋
| 第1行： | 第1行： | ||
| − | [[分類:HTML]]{{#css: | + | [[分類:HTML]] |
| − | + | {{#css: | |
| + | .toc { | ||
line-height: 1.5em; | line-height: 1.5em; | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | .toc ul { | |
padding: 0; | padding: 0; | ||
width: 90%; | width: 90%; | ||
margin: auto; | margin: auto; | ||
} | } | ||
| − | + | .toc li { | |
list-style-type:none; | list-style-type:none; | ||
margin-bottom: .5em; | margin-bottom: .5em; | ||
} | } | ||
| − | + | .toc li a { | |
display: block; | display: block; | ||
text-align: center; | text-align: center; | ||
| 第29行： | 第30行： | ||
transition: all 0.1s ease-out; /* Firefox 16+, Opera 12.50+ */ | transition: all 0.1s ease-out; /* Firefox 16+, Opera 12.50+ */ | ||
} | } | ||
| − | + | .toc li a:hover { | |
text-decoration: none; | text-decoration: none; | ||
background-color: #c63b6f; | background-color: #c63b6f; | ||
} | } | ||
| − | + | .toc li a:active { | |
border-bottom: solid #b03060 1px; | border-bottom: solid #b03060 1px; | ||
top: 4px; | top: 4px; | ||
| 第42行： | 第43行： | ||
} | } | ||
@media screen and (min-width:601px) { | @media screen and (min-width:601px) { | ||
| − | + | .toc { | |
-moz-column-count: 2; | -moz-column-count: 2; | ||
-moz-column-gap: 1em; | -moz-column-gap: 1em; | ||
| 第53行： | 第54行： | ||
} | } | ||
}} | }} | ||
| − | <ul | + | <table><tr><th> |
| + | <ul 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> | ||
| 第64行： | 第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></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> | ||
| 第75行： | 第78行： | ||
<li>[http://zh-tw.learnlayout.com/about.html 關於本站]</li> | <li>[http://zh-tw.learnlayout.com/about.html 關於本站]</li> | ||
</ul></ul> | </ul></ul> | ||
| + | </th></tr></table> | ||