HTML+CSS成果展(2)：仿寫拼多多網站

參考資料來源：udemy 課程

從上次練習從零創造網頁佈局後，發現自己的技巧和美感都有待進步，決定跟著udemy課程的實作項目:搭建拼多多網站首頁，來學習真實網站有哪些常用的佈局和技巧。

學習流程：將影片要仿寫的部份截圖->自己寫看看->觀看課程影片比對老師和我的作法差異->改善程式->完成！

大致的切版規劃:

切版成三區塊，以及一個固定於網頁左下方的qrcode，在html會分成四個<div></div>撰寫

header+nav(嚴格來說只有navigation bar)
body(以相同模板套用內容並垂直排列)
footer(下方聯絡資訊等樣式)
qrcode banner

Header+nav section

切版設計:

html元素:

圖片和nav文字都是 <a></a> 元素

css樣式重點:

網頁滑動仍固定於上方:

1
2
3
4


    position: fixed; /*固定在最上面*/
    top: 0; /*定位*/
    left: 0; /*定位*/
    z-index: 999; /*滑動時不會被上來的div蓋住*/

nav的div以flex呈現水平排列，以border作為間隔，並清除尾端div的border

1
2


    display: flex; /*將div以flex規劃排列方式，呈現清單*/
    flex-direction: row; 

nav 下面的小div以border作為間隔
在倒數個div加上class name(.g-header-list-re)，練習以+方式清除最後一個div元素的border

1
2
3
4
5


    border-right: 1px solid gray; 
    
    .g-header-list-re + div  { /*清除最後一個元素的border*/
    border-right: none;  
    }

body section

切版設計:

html元素:

由於區塊模板相似，做好一個候可以重複套用添加內容
一個區塊以div包覆，下面分三個小div操作
最上div面用 <p></p> 和 <a></a> 放置文字與連結點選
中間div放大圖片
下方div包含三個小div，放置圖片，文字等商品資訊

css樣式重點:

body整體以header做父元素定位，並做水平置中
body寬度以view point為單位設定，使其可依照視窗縮放比例
區塊模板以flex呈垂直排列

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


    position: absolute; 
    top: 40%;
    left: 50%; /*搭配margin-left: -(width/2)做水平置中*/
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    gap: 50px;

    margin-left: -40vw; /*寬度的一半做水平置中*/
    width: 80vw;

區塊模版最上方的<p>和<a> 分別以 float: left; float: right; 浮動
區塊模板下方再套用flex呈水平排列

1
2
3


    display: flex;
    flex-direction: row;
    gap: 10px;

切版設計:

html元素:

上方div內有兩個小div，分別放置qrcode跟聯絡資訊
下方div跟header的nav清單相似，但以list寫法呈現

css樣式重點:

footer整體以body做父元素定位
使用預先知道得body total height作為top距離，讓footer銜接在body下方

1
2
3
4
5
6


    position:absolute;
    top: 3000px; /*不太好得做法，以body為父元素，body height為top距離*/
    padding-top: 60px;
    width:100vw; /*可依視窗大小縮放的寬度單位*/
    height:300px;
    background-color: lightgray;

上方div內的兩個小div以float:left;做浮動
- 左側div以flex讓內部三個div呈水平排列，同時設定跟右側div相同的高度
- 右側div主要調整的是p元素的間隔，高寬，以及與左側div的距離，並以border做區隔

1
2
3
4
5


    /*左側div css*/
    display: flex; /*flex方式排列qrcodes*/
    flex-direction: row;
    gap: 10px; 
    height: 240px; /*讓img+text總高和右側聯絡資訊一樣*/

1
2
3
4
5
6
7
8


    /*右側div css*/
    text-align: left;
    border-left: 1px solid black;
    margin-left: 15px;
    margin-bottom: 20px;
    padding-left: 45px;
    line-height: 30px;
    font-size: 20px;

下方div(.g-footer-list)的list以更改display:inline-block;的方式呈水平排列，並保留設定元素寬度的能力
練習以last-child或first-child方式移除頭尾元素的border

1
2
3
4
5
6


    .g-footer-list ul li { /*以inline-block displayed list製作清單*/
    display: inline-block; /*可設長寬的元素*/
    border-left: 1px solid black;
    margin: 0 auto; /*給予寬度的情況下，margin auto可置中*/
    width: 100px;
    }

1
2
3


    .g-footer-list li:first-child { /*remove border for the first element in the list*/
    border: none;
}

html元素:

div包含img和兩個小div

css樣式設計:

整體定位，以網頁為父元素，固定浮動於左下方
設定z-index浮動在body和footer上方

1
2
3
4
5
6
7


    position: fixed; /*固定浮動在網頁左下方*/
    bottom: 50px;
    left: 100px;
    z-index: 998; /*不被body蓋住*/
    padding: 10px 30px;
    border: 1px solid gray;
    background-color: white;

先設定圖片寬度，配合left和margin-left讓圖片水平置中於div內

1
2
3
4
5
6


img {
    position: relative;
    left: 50%;
    margin-left: -75px; 
    width: 150px;
}

成果展示

Github 原始碼

一併附上拚多多網站連結

檢討回顧

以上就是我得第一版網站仿寫，過程歷經許多trial and error，像是沒規劃好區塊，等寫到60%時又重新修改架構，打掉重練的狀況；也蠻常遇到加了css樣式但卻出不來的困惑。最後列出幾點我在udemy上學到的技巧，以及這一版仿寫有待改進的部分:

navigation bar 應該也改成list製作會比較簡單，開太多div來包感覺沒意義
footer出現在尾端的定位方式非robust，和body依賴性太高，萬一body新增內容豈不是要調整top數值?
佔滿視窗大小並依比例調整，改用100%會比100vw好，原因可以參考此網站的解釋
透過將float: left;`` float: right; 設成一個class name，當有元素需要就加上這個class是有效率的方法
同理可以新增清除浮動的class，有需要就加上

1
2
3
4
5


 .clearfix::after { /*清除浮動
    content: "";
    display: block;
    clear: both;
} 

一開始就設定所有的a元素都移除下底線，或所有list都移除符號

大致的切版規劃:

Header+nav section

body section

footer section

qrcode banner

成果展示

檢討回顧