[手刻] - 切版練習-Edge Ledger

Orow's Blog

2019-02-01

project

css, html

這個網頁也是透過 Udemy 課程來學習，手刻練習，也有 RWD 的呈現。

Demo

切版練習-Edge Ledger - Demo

1. Introduction 網頁介紹

這是一個投資帳務公司的網頁。
會固定在最上面的 navbar 並帶有透明度，showcase 背景圖加上 overlay 的暗黑色，文字敘述、按鈕與 what 區塊的捲動搭配，接著 what 區塊三等份的圖片與文字敘述，who 區塊則是一半照片，一半是描敘。clients 區塊則是用五張照片排版呈現，contact 區塊一邊為 form 表單，另一則是用引入 google mpas API 使用的地圖資訊。最後則是 footer。

RWD 則是設定在視窗寬度小於 768px 與大於 1100px 時會讀不同的 css 檔案。
字型則是引入 google font。
排版跟上一個手刻網頁的差異則是使用了flexbox的方式。

1
2
3

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css"/>
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="css/widescreen.css"/>

2. Layout Notes

這個網頁也是純手刻，所以 CSS 一開始會先 reset，將所有的 margin，padding 歸零，並先設定一些基本修飾，box-sizing:border-box則是讓 margin 與 border 等修改不會改變到 box model 大小。也預先引入了 google font 的字型

如果是練習的網頁，有著 sample，則會先看過一次，分析有哪些區塊，用到什麼方式，背景等。
這個網頁就有用到黑底白字，部分 item 在 active 時與 button 在 hover 時，呈現顏色不同都可以使用通用的 CSS 修飾。

h1, h2, h3等 title，可以先設定 padding 的方式，a的部分則先將text-decoration:none;設定好來移除底線，常見的p設定上下的 margin，這都可以視情況微調。

@import url("https://fonts.googleapis.com/css?family=Roboto");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
}

a {
  text-decoration: none;
}

p {
  margin: 0.75rem 0;
}