「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;
 
−
  }
 
−
}
 
−
}}
 
−
<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>
 

於 2019年1月28日 (一) 21:05 的修訂

  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. 關於本站
取自「http://well-being-ng.net/wiki1231/index.php?title=CSS版面配置&oldid=47342」