:::

3. 自適應CSS排版

一、 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;
    }
    

     

 


:::

書籍目錄

展開 | 闔起

線上使用者

55人線上 (4人在瀏覽線上書籍)

會員: 0

訪客: 55

更多…