CSS版面配置

{{#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;

}

1. toc {

 line-height: 1.5em;
 padding-left: 0;

}

1. toc ul {

 padding: 0;
 width: 90%;
 margin: auto;

}

1. toc li {

 list-style-type:none; 
 margin-bottom: .5em;

}

1. 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+ */

}

1. toc li a:hover {

 text-decoration: none;
 background-color: #c63b6f;

}

1. 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;
 }

} }}

1. 沒有版面配置
2. 關於 'display' 屬性
3. margin: auto;
4. 關於 max-width 屬性
5. 關於 Box Model（區塊模型）
6. 關於 box-sizing 屬性
7. 關於 position 屬性
8. 更完整的 position 範例
9. 關於 float 屬性
10. 關於 clear 屬性
11. clearfix 密技
12. float 版面配置範例
13. 百分比寬度
14. 媒體查詢（media queries）
15. display: inline-block
16. 使用 inline-block 版面配置
17. column
18. flexbox
19. CSS 框架
20. 關於本站