Tad 教材網 - 線上書籍

:::

\[1061\] XOOPS佈景設計
==================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/42/03.pdf)

### 一、 CSS的position位置概念

1. position:static「靜態」這是網頁的預設值。
2. position:relative 「相對」指的是相對該元素原來所在的位置（下一個元素並不會隨之起舞），可用 top、bottom、left、right來調整該元素位置。
3. position:absolute「絕對」指的是相對於整個網頁最左上角的位置（此元素會飄起來，下一個元素會當作它不存在一樣遞補其位置），一樣可用top、bottom、left、right來調整該元素位置。position:absolute搭配z-index，可以將元素進行上下排列。一般而言，z-index預設值為0。
4. position:fixed「固定」指的是相對於整個視窗最左上角的位置（此元素也會飄起來，下一個元素一樣當作它不存在而遞補其位置），可用top、bottom、left、right來調整該元素位置，不管視窗如何捲動，永遠保持在固定位置（可用來做浮動視窗）。
5. 當position:relative包著position:absolute的時候，後者就會以前者的位置為基準，而非整個視窗。
6. 把連結做成按鈕（將Top標籤加入 class=”top”屬性），並讓按鈕有按下去的感覺： ```
  <pre class="brush:css;">
  .top {
      font-size:12px;
      color:#fff;
      background-color:#3bb3e0;
      padding:5px 10px;
      border-radius:5px;
      box-shadow: 0px 5px 0px 0px #156785;
  }
  .top:active {
      position:relative;
      top:3px;
      box-shadow: 0px 2px 0px 0px #156785;
  }
  ```
 
### 二、 CSS的偽元素 （pseudo-element）

1. 用::和之前的擬類別（Pseudo-classes）做出區隔，但其實一個:也是可以用的。
2. 「::first-line」：元素中的第一行；「::first-letter」：元素中的第一個字
3. 「::before」：在元素前；「::after」：在元素後插入內容（需和content一起使用）
4. 「::placeholder」：元素的佔位符號；「::selection」：元素被反白時
5. 在按鈕左邊加個箭頭，content亦可用url()來載入外部素材，如圖片等。 ```
  <pre class="brush:css;">
  .top::before{
      content:'▲ ';
  }
  ```
 
###   
 三、 將回頂端做成圓形浮動工具

1. 先將HTML縮減為一組，移至頁尾，並用一個 id="float\_tool" 的div容器將連接包住。
2. 設定此容器固定在視窗右下角，並將按鈕改成圓形，以方便點擊。 ```
  <pre class="brush:css;">
  <div id="float_tool">
      <a href="#Home" class="top">Top </a>
  </div>
  
  .top {
      font-size: 12px;
      color: #fff;
      background-color: #3bb3e0;
      width: 60px;
      height: 60px;
      line-height: 60px;
      border-radius: 60px;
      text-align: center;
      display: inline-block;
      box-shadow: 0px 5px 0px 0px #156785;
      position: relative;
  }
  
  #float_tool{
      position: fixed;
      bottom: 10px;
      right: 10px;
  }
  
  ```
 
### 四、 加入簡易的平順滑動

1. <https://github.com/GabrielDelepine/smooth-scroll>
2. 下載解壓，並將smooth-scroll.js放置和index.html同一層。
3. 將以下語法加入到頁尾即可。 ```
  <pre class="brush:xml;">
  <script src="smooth-scroll.js"></script>
  ```
 
###   
 五、 自適應排版

1. 先在HTML中加入viewport設定：網頁寬度預設為屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔屏幕面積的100%。
2. <meta name="viewport" content="width=device-width, initial-scale=1">
3. 寬度用百分比：CSS中將包住整體頁面的container寬度設成百分比，例如width: 90%;
4. 字型大小改用em取代px
5. 圖片可加入max-width:100%; 來達成自動等比例縮小效果
 
### 六、 利用媒體查詢來動態調整版面

1. 先把主要的幾個大區塊整理一下，確立基本架構： ```
  <pre class="brush:css;">
  .container {
      box-sizing: border-box;
      margin: 0px auto;
  }
  article {
      display: table-cell;
      vertical-align: top;
  }
  aside {
      display: table-cell;
      background: rgba(141, 190, 178, 0.2);
      vertical-align: top;
  }
  ```
2. 螢幕解析度 1024 以上時：@media screen and (min-device-width: 1024px){CSS宣告} ```
  <pre class="brush:css;">
  .container {
  width: 90%;
  }
  article {
  width: 75%;
  padding: 30px;
  }
  aside {
  width: 25%;
  }
  ```
3. 螢幕解析度 768 以上，1024 以下：@media screen and (min-device-width: 768px) and (max-device-width: 1024px){CSS宣告} ```
  <pre class="brush:css;">
  .container {
      width: 90%;
  }
  article {
      width: 75%;
      padding: 30px;
  }
  aside {
      width: 25%;
  }
  ```
4. 螢幕解析度 768 以下：@media screen and (max-device-width: 768px) {CSS宣告} ```
  <pre class="brush:css;">
  .container {
      width: 98%;
  }
  
  article {
      display: block;
      box-sizing: border-box;
      width: 100%;
      padding: 20px;
  }
  aside {
      display: block;
      box-sizing: border-box;
      width: 100%;
      padding: 20px;
  }
  ```
 
###   
 七、 Flexbox彈性盒初體驗

1. 可以手動玩一下：http://wcc723.github.io/WorkShop-gh-pages/cssFlex/
2. 版面架構可改成： ```
  <pre class="brush:css;">
  .container {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      margin: 0px auto;
  }
  .row {
      display: flex;
      background: rgba(255, 255, 255, 0.8);
  }
  article {
      vertical-align: top;
  }
  aside {
      background: rgba(141, 190, 178, 0.2);
      vertical-align: top;
  }
  ```
3. 螢幕解析度 768 以下：@media screen and (max-device-width: 768px) {CSS宣告} ```
  <pre class="brush:css;">
  .row {
      display: flex;
      flex-direction: column;
  }
  article {
      box-sizing: border-box;
      width: 100%;
      padding: 20px;
  }
  
  aside {
      box-sizing: border-box;
      width: 100%;
      padding: 20px;
  }
  ```

:::