「CSS版面配置」修訂間的差異
跳至導覽
跳至搜尋
| 第1行： | 第1行： | ||
[[分類:HTML]] | [[分類:HTML]] | ||
| + | {{#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; | ||
| + | } | ||
| + | } | ||
| + | }} | ||
#[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' 屬性] | ||