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”屬性），並讓按鈕有按下去的感覺： ```
    
    .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()來載入外部素材，如圖片等。 ```
    
    .top::before{
        content:'▲ ';
    }
    ```
 
###   
 三、 將回頂端做成圓形浮動工具

1. 先將HTML縮減為一組，移至頁尾，並用一個 id="float\_tool" 的div容器將連接包住。
2. 設定此容器固定在視窗右下角，並將按鈕改成圓形，以方便點擊。 ```
    
    <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. 將以下語法加入到頁尾即可。 ```
    
    <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. 先把主要的幾個大區塊整理一下，確立基本架構： ```
    
    .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宣告} ```
    
    .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宣告} ```
    
    .container {
        width: 90%;
    }
    article {
        width: 75%;
        padding: 30px;
    }
    aside {
        width: 25%;
    }
    ```
4. 螢幕解析度 768 以下：@media screen and (max-device-width: 768px) {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. 版面架構可改成： ```
    
    .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宣告} ```
    
    .row {
        display: flex;
        flex-direction: column;
    }
    article {
        box-sizing: border-box;
        width: 100%;
        padding: 20px;
    }
    
    aside {
        box-sizing: border-box;
        width: 100%;
        padding: 20px;
    }
    ```

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1301

快速登入

書籍目錄

展開 | 闔起

線上使用者

111人線上 (67人在瀏覽線上書籍)

會員: 0

訪客: 111

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者