[手刻] - 純ＣＳＳ＋ＲＷＤ 切版練習-The Plant Shop

本次練習是參考 hexo 上的一個 theme， 來練習手刻加上 RWD 應用，網站主要是在販賣植物的網頁。

網站 DEMO

The Plant Shop 切版練習 - Demo

網站介紹

網頁分為三個頁面：Home、About、Contact：

Home： 主要結構依序為 navbar 、 header 背景圖與文字敘述，點擊按鈕 shop 按鈕可以到達下方 main 裡、 main 主要展示商品的部分、footer 放置三個社群網站的 icon

About：主要結構為同 Home 中的 navbar 與 footer，main一張圖片與敘述

Contact: 簡單的表格輸入使用者資料與訊息

網站佈局紀錄

css 管理

分別用兩隻 css 做管理:

• 螢幕寬度大於 990px 以上用 style.css

  1	<link rel="stylesheet" href="css/style.css" />

• 螢幕寬度小於 900px 用 mobile.css

  1	<link rel="stylesheet" media="screen and (max-width: 990px)" href="css/mobile.css" />

RWD 佈局

網頁會有三個不同的佈局，利用 media query 來偵測螢幕寬度做佈局上的調整：

• 990px 以上
• 768px~900px 之間
• 768px 以下

大於 990 px 以上畫面：

768 px 以下畫面：

Navbar 區塊

Navbar 區塊主要分為兩部分由一個店家 logo 與三個分頁加上一個購物車，這邊排版使用 float 練習，分頁加上購物車的部分利用 ul、li，並使用 list-style:none 將 li 黑點清除

• Logo float:left 另一部分則是 float:right
  

• 當需螢幕寬度過小時，第二部分則要改為 float:none
  

當螢幕小於 768 px ，要顯示 navicon，並監聽 click 事件

利用click 事件，切換 class 來決定顯示哪個佈局

1
2
3
4
5
6
7
8

function myFunction() {
       var x = document.getElementById("navbarmenu");
       if (x.className === "navbarul") {
         x.className += " responsive";
       } else {
         x.className = "navbarul";
       }
     }

購物車 Snipcart

一個可以快速建立起購物車功能的套件還可以分析
snipcart 官網
註冊好之後，只要引入並修改 data-api-key 即可使用：

1
2
3
4
5
6
7
8
9
10
11

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script
    src="https://cdn.snipcart.com/scripts/2.0/snipcart.js"
    id="snipcart"
    data-api-key=" XXX "
  ></script>
  <link
    href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css"
    type="text/css"
    rel="stylesheet"
  />

點選增加到購物車畫面：

shop 區塊

shop 區塊佈局分別為一排三個商品，依據螢幕寬度若介於 900~768 px 則為兩個一排，float 設定為：float: left

若小於 768px 就為一排一個進行排列，float: none

tags: css RWD