萬門教育-WEB全棧工程師零基礎特訓班-第二講-課堂筆記

阿新 • • 發佈：2020-11-28

一、Flex佈局要領

Flexible Layout：彈性佈局

Bootstrap：柵格佈局

產品是做業務的，產品是為業務服務的。框架能滿足百分之九十幾的需求。

CSS1：display:block;

CSS2：display:table;

CSS3：display:flex; display:box; display:grid;

實踐案例，設計如下圖的頁面：

分析頁面：

整體是三行，header佔整體頁面20%，main佔60%，footer佔20%。

響應式佈局，可隨著頁面大小自動放大、縮小調整。

容器：flex container

頁面佈局 —— 容器，容器中還可以放小容器。

區域性：flex-direction:column

區域性有橫向。

整體：flex-direction:row

整體是橫向佈局。

整體頁面可以做到橫縱相交。

動手實驗 —— Flex box layout

窄屏模式：Mobile First

手機優先，因為現在移動網際網路時代，使用手機看頁面的比例已經超過PC，所以做頁面的時候先考慮Mobile Fierst。

手機和PC顯示最大的區別不是解析度，而是顯示比例的區別。手機是窄屏模式、PC是寬屏模式。

頁面不需要做兩套，而是基於media query(媒介查詢)，自動偵測是窄屏模式還是寬屏模式。

窄屏模式下main區域是橫向排列，寬屏模式下main區域內容是縱向排列。

寬屏模式：

動手實驗

編寫網頁使用程式設計工具Visual Studio Code，國外軟體推薦使用必應搜尋(英文版)。

vscode裡新建檔案，副檔名是html。

程式碼編輯區輸入html選擇html5，此時vscode會自動填寫html5的固定內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

給vscode安裝外掛Live Server，裝好以後在html檔案編輯區滑鼠右鍵調出選單選擇“open with live server”即可迅速看到頁面顯示效果。

先做佈局，再寫樣式。

<div class = "container">
    <div class = "header"> header</div>
    <div class = "main">
        <div class = "nav"> nav </div>
        <div class = "article"> article </div>
        <div class = "aside"> aside </div>
    </div>
    <divv class = "footer" > footer </div>
    
    </div>


</body>
</html>

做完的樣式如下：

接下來加樣式：<style>標籤與</style>標籤之間加樣式。

    <style>
        .container {
            display: flex;
            height: 100vh;
            flex-direction: column;
        }

        .main {
            display: flex;
            flex: 1;
            flex-direction: column;
        }

        .main .article {
            flex: 1;
            background-color: yellowgreen;
        }

        .main .nav,
        .main .aside {
            background-color: bisque;
        }

        .header,
        .footer {
            background-color: green;
            height: 20vh;
        }
    </style>

加了style後的效果

注意.container裡面的描述height: 100vh; (高度百分百)、.header和.footer 裡面的描述height:20vh;(高度20%)。寫網頁最好寫成百分比，不要寫成絕對值。寫絕對值無法縮放，寫成百分比時放大縮小頁面會自動縮放調整。
媒體查詢，即判斷顯示裝置，目前窄屏優先(適配手機)已完成，然後編寫程式碼判斷是否寬屏，編寫寬屏優先(適配PC)的程式碼。
```
        @media screen and (min-width:400px) {

            .main {
                flex-direction: row;
            }

            .main .nav,
            .main .aside {
                flex: 0 0 20vw;
            }

        }
```
min-width:400px 表示當螢幕寬度比大於等於400px時，切換佈局方式。(老師開始設576，此時經常不會切換到寬屏模式，觸發條件數字偏大)

以上是flex box佈局模式。

二、Bootstrap柵格佈局

推特出品的前端模板，老師推薦用bing國際版查官網https://getbootstrap.com/，在官網查資料。

(視訊資料顯示官網bootstrap版本是4.1.3，推斷該視訊是2年前出的)

實踐案例：

從bootstrap找到card模板：

    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src=".../100px180/" alt="card-img-cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

在head中匯入bootstrap的連結

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

card複製2份，最終完整程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>

    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src=".../100px180/" alt="card-img-cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src=".../100px180/" alt="card-img-cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src=".../100px180/" alt="card-img-cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

</body>

</html>

card效果1，直接複製後card是縱向排列成3個。

加了container會有留白和間距。(網頁設計一大重要技巧是合適的留白，整齊的留白和間距。)
```
    <div class="container">
        <div class="row">
```
container下面一行寫明佈局是"row"，現在卡片是橫向排列了。注意：bootstrap佈局優先考慮的是手機優先。
再調整style
```
    <style>
        body {
            margin-top: 1em;
            margin-left: 1em;
        }

        .mycard {
            margin-right: 1em;
            margin-bottom: 1em;
        }
    </style>
```
marin-top指的是上邊距，marin-left指的是左邊距，marin-right指的是右邊距，marin-bottom指的是下邊距。

1em指的是當前字型大小的一個字元高或寬。15px是指15個畫素。

自定義了.mycard，指定右邊和下邊空一個字元間距。
給下方的3個card 新增 mycard約束。
注意畫面的層次感，背景不要用全白，例如京東很多頁面背景是灰色。

在body中新增background-color:#f4f4f4，不要使用gray，使用gray顏色太暗，#f4f4f4白中帶灰做背景恰好。
然後修改card頭部顯示的圖片，從必應上搜索免費圖片，將其連線加入src=""的雙引號中間。

調整整體邊距、卡片邊距、card寬度為14rem。

最終程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <style>
        body {
            margin-top: 0.5em;
            margin-left: 1.5em;
            background-color: #f4f4f4;
        }

        .mycard {
            margin-right: 1em;
            margin-bottom: 0.5em;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="card mycard" style="width: 14rem;">
                <img class="card-img-top"
                    src="https://tse2-mm.cn.bing.net/th/id/OIP.nSluwXTBNhttcpYpVoqXkAHaEK?pid=Api&w=1920&h=1080&rs=1"
                    alt="card-img-cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's
                        content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>

            <div class="card mycard" style="width: 14rem;">
                <img class="card-img-top"
                    src="https://tse3-mm.cn.bing.net/th/id/OIP.tEr4hG4YKm0D3aPmgjnMxwHaEK?pid=Api&w=640&h=360&rs=1"
                    alt="card-img-cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's
                        content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>

            <div class="card mycard" style="width: 14rem;">
                <img class="card-img-top"
                    src="https://tse3-mm.cn.bing.net/th/id/OIP.krKN7PZBjYCZZOfYviIEGQHaEK?pid=Api&w=900&h=506&rs=1"
                    alt="card-img-cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                        card's
                        content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

最終效果：

使用模板的優點是自動適應不同裝置不同解析度，當螢幕寬度大時可以一行顯示3個card，螢幕小一些一行自動調整為顯示2個card，螢幕再變窄時會自動調整為一行顯示1個card。

三、對比總結：

使用框架比使用CSS手動佈局工作量大大減輕，但CSS手動佈局靈活度更高。合理應用恰當的框架可以大大提高工作效率，框架可以滿足百分之九十幾的需求，只有極少數需求需要手動CSS調整。

四、第一、二講回顧

web應用涉及管理端、商戶端、使用者端、資料庫、服務端應用。

以互動為主的應用，這與網站差距非常大，網站互動內容少，web應用互動內容多。

為什麼選用M-E-A-N技術棧？

一種語言開發前端、後端，typescript作為前端，JavaScript作為後端服務。

面向物件程式設計可維護性和效率更高一些。

常用的響應式佈局模式：

Flexbox：Flexible Layout彈性佈局

Bootstrap：Bootstrap 4.x柵格佈局

Flex佈局要領：

flex container ：容器內可以巢狀容器

flex-direction:column 豎向佈局

flex-direction:row 橫向佈局(預設)

彈性盒子佈局flex box layout

窄屏模式優先(手機模式)mobile first

基於media query自動調整佈局

bootsrap柵格佈局

要去官方網站學習和檢視，學習最新、最標準的內容和案例。

萬門教育-WEB全棧工程師零基礎特訓班-第二講-課堂筆記

一、Flex佈局要領 Flexible Layout：彈性佈局 Bootstrap：柵格佈局產品是做業務的，產品是為業務服務的。框架能滿足百分之九十幾的需求。

Web全棧工程師之路(三)——JavaScript篇(十七)——this

以下是html程式碼，個人建議放在IDE裡執行，邊看效果，邊學習~ <!DOCTYPE html>

Web全棧工程師之路(三)——JavaScript篇(十九)——建構函式

以下是html程式碼，個人建議放在IDE裡執行，邊看效果，邊學習~ <!DOCTYPE html>

吐血整理，測試小白到軟體測試全棧工程師全部學習資料！

前言　　從軟體測試小白做到軟體測試全棧工程師過程中，每天不停在部落格、論壇各種找學習資料。大家和我有沒有感覺的，自己要想的資料很難找，而且資料經常不全。每天找資料上花很多時間。

Python全棧工程師之html學習筆記

https://www.bilibili.com/video/av15241731 筆記來源:黑馬程式設計師 HTML(Hyper Text Markup Language):超文字標籤語言

老男孩教育python全棧第22期Day15筆記

day15 今日內容大綱昨日內容回顧作業講解裝飾器：完美的呈現了開放封閉原則。裝飾器的本質：閉包。

想成為全棧工程師，要做到哪幾點？

簡介：如何成為一名全棧工程師？需要具備哪些技術積累？成為全棧工程師有哪些好處？希望本文能為期望成為全棧工程師的同學提供一點幫助，和同學們一起分享交流。

Java全棧工程師

Java全棧工程師在網路市場上聲名鵲起的主流技術棧一一精講。大家一起努力學習交流吧-v:307570512 科技和商業的深度融合，電子商務專案前後端教材級案例開發。

全棧工程師是什麼？如何才能成為全棧工程師？

如何成為一名全棧工程師？網際網路最熱的話題之一,似乎正在成為IT行業的新潮流和新趨勢，廣大開發人員之間對”全棧”類話題的討論也從未停止。曾經看到過一篇關於全棧設計師的文章，譭譽參半。有的人認為全

web全棧-第四講：後端框架express.js初步體驗。

express基本概念後端框架 —— express.js，基於Node.js平臺，快速、開放、極簡的web開發框架。

開課吧Web全棧架構師2021

新建類後，要用@controller註解宣告將該類通過springboot進行統一controller管理。通過@getmapper(’’)註解宣告一個函式為路由函式，將路由地址傳入，在瀏覽器通過localhost:8080(預設)路徑進行訪問。直接通

Web全棧~27.檔案和目錄的操作

技術標籤：webjava Web全棧~27.檔案和目錄的操作上一期 File方法介紹 File構造方法 //pathname表示完整路徑，該路徑可以是相對路徑，也可以是絕對路徑

“擺地攤“都找不到全棧工程師？JNPF幫你分分鐘搞定！

大街上捕捉野生程式設計師都這樣了還找不到全棧工程師全棧工程師（Full-Stack Engineer）圖鑑：

華為AI全棧成長計劃課程——AI應用篇——第二週筆記

第2章人工智慧的詩與遠方：NLP案例 2.1 NLP介紹　　　　自然語言處理自然語言處理（NLP, Natural Language Processing），作為AI領域中最重要的分支之一，與語言文字這一承載人類文明的重要載體緊密相連，研究

一起零基礎學Python（第二天）

技術標籤：python學習Python基礎python列表列表是由一系列按特定順序排列的元素組成。Python中是由中括號（ [ ] ）表示，裡面的元素用逗號隔開。

《Python零基礎快樂學習之旅》學習筆記8——元組（tuple）

技術標籤：學習筆記Pythonpython元組文章目錄第8章元組（tuple）8.1 元組的定義8.2 讀取元組元素8.3 遍歷所有元組元素8.4 修改元組內容8.5 元組切片（tuple slices）8.6 方法與函式8.7 列表與元組資料互轉8

java零基礎入門學習第三天——相關筆記

技術標籤：筆記學習javajava程式語言 Java03 導包的三種方式： 1.手動導包 2.點選滑鼠自動生成

《Python零基礎快樂學習之旅》學習筆記10——集合（set）

技術標籤：學習筆記Pythonpython集合文章目錄第10章集合（set）10.1 建立集合10.1.1 使用大括號建立集合10.1.2 使用set()函式定義集合

《Python零基礎快樂學習之旅》學習筆記14——文件的讀取與寫入

技術標籤：學習筆記Pythonpython檔案讀取與寫入第14章文件的讀取與寫入 14.1 讀取文件

《Python零基礎快樂學習之旅》學習筆記15——程式除錯與異常處理

技術標籤：學習筆記Pythonpython異常處理第15章程式除錯與異常處理 15.1 程式異常

萬門教育-WEB全棧工程師零基礎特訓班-第二講-課堂筆記

一、Flex佈局要領

二、Bootstrap柵格佈局

三、對比總結：

四、第一、二講回顧

相關推薦