CSS版面配置:修訂版本之間的差異
出自六年制學程
第 76 行: | 第 76 行: | ||
} | } | ||
}} | }} | ||
+ | <ul id='toc'> | ||
+ | <li> | ||
#[http://zh-tw.learnlayout.com/no-layout.html 沒有版面配置] | #[http://zh-tw.learnlayout.com/no-layout.html 沒有版面配置] | ||
#[http://zh-tw.learnlayout.com/display.html 關於 'display' 屬性] | #[http://zh-tw.learnlayout.com/display.html 關於 'display' 屬性] | ||
第 96 行: | 第 98 行: | ||
#[http://zh-tw.learnlayout.com/frameworks.html CSS 框架] | #[http://zh-tw.learnlayout.com/frameworks.html CSS 框架] | ||
#[http://zh-tw.learnlayout.com/about.html 關於本站] | #[http://zh-tw.learnlayout.com/about.html 關於本站] | ||
+ | </li> | ||
+ | </ul> |
2019年1月28日 (一) 20:54的修訂版本
{{#css: .content {
max-width: 600px; margin: 1em auto;
} h1.content {
margin: .5em auto 1em;
} h1, h2 {
font-family: 'Bree Serif', serif; font-weight: normal;
} h1 {
margin: 1.5em 0; font-weight: normal; text-align: center;
} h2 {
font-family: 'Bree Serif', serif; margin: 1.2em 0; font-weight: normal;
}
- toc {
line-height: 1.5em; padding-left: 0;
}
- toc ul {
padding: 0; width: 90%; 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; }
} }}