|
|
| 第 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;
| |
| − | }
| |
| − | }
| |
| − | }}
| |
| − | <div class='content'>
| |
| − | <h1 class='content'>目錄</h1>
| |
| − | <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' 屬性] |
| 第 100 行： |
第 20 行： |
| | #[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>
| |
| − | </div>
| |
