CSS版面配置

出自六年制學程
在2019年1月27日 (日) 22:34由丁志仁對話 | 貢獻所做的修訂版本

跳轉到: 導覽搜尋

{{#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. 關於本站