挑戰-金魚都能懂的網頁切版 : 圖文滿版區塊

網頁網址

https://judyyutong.github.io/my-projects/fullScreen.html

HTML版面結構

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

*半透明覆蓋色塊，是為明顯標示container和banner-txt兩者重疊所佔版面而暫時顯示，實際版面練習作品沒有此色塊。

















<body>
    <div class="banner">
        <div class="container">
            <div class="banner-txt">
                    <h1>
                        金魚都能懂的
                        <small>
                            這個網頁畫面怎麼切
                        </small>
                    </h1>
                    <h2>圖文滿版區塊</h2>
                    <p>這畫面實在常見，在各種樣板網站可以說是設計常客
                    <br>切不出來實在說不過去啊</p>
            </div>
        </div>
    </div>
</body>

學習重點

CSS Reset：清除瀏覽器預設空間，以真正實現滿版
background: linear-gradient：運用多重背景(Multiple Backgrounds) 寫法，控制傾斜角度、畫面佔比、透明度、對齊位置等，達到色彩與圖片滿版斜切
display:flex：透過flex軸向、物件對齊方式等進行排版
相對單位vh：vh=viewport height=視窗高度，設容器高度為100vh即為滿版高(縮放視窗就不會出現捲軸)

–

1. CSS Reset





*{
    margin: 0;
    padding: 0;
    list-style: none;
}

*代表套用至全部元素，以上設定用於消除所有瀏覽器預設的外距、內距以及清單預設列點縮排空間。

–

2. background: linear-gradient







        .banner{
            width: 100%;
            height: 700px;
            background-color: #cccccc;
            background: linear-gradient(115deg, rgb(224, 221, 216) 50%, transparent 50%) center center / 100% 100%, 
            url(https://picsum.photos/1200/600) right center / auto 100%;
        }

background-color先隨意指定顏色為#CCCCCC，反正之後會被background: linear-gradient的效果給覆蓋過去。
background: linear-gradient使用 多重背景寫法：
- 第一組背景：115deg代表畫面斜切115度，設定50%有色彩rgb(224, 221, 216)，另外50%是透明transparent，background position設為中間(＊其實這邊測試只打一個center也行，不知道為何要打兩個center?)，漸層色寬100%，高100%，佈滿畫面。
- 第二組背景：指定為假圖生產器url，background position設為 right center，寬度auto，高度100%
- 這樣背景底圖看起來，就會是滿版斜切，且左色塊右圖片。

–

3. CSS Flex 父層與子層

分有「Flexbox外容器」與「Flex items子物件」，外容器與子物件有各自適用的屬性，如果屬性沒有施加在對應對象上就會無效。外內屬性分類可見他人文章介紹「圖解：CSS Flex 屬性一點也不難」、Flex 觀念與應用
display:flex要設定在父層。

因此本切版練習中，若想針對文字進行排版，得先建立一個父層「外容器」把所有文字包在其中：建立banner-txt，並宣告display:flex。







banner-txt{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }

先設定主軸

flex-direction: column：負責主軸資料流向排列方式，column是由上往下排列。(補充：預設會是row）
justify-content: center：負責主軸資料流向對齊方式，center為「置中」。當資料流向是column(由上往下）時，center對齊便是「垂直置中」。
在此範例中表示banner-txt容器內的子物件都會與banner-txt這個父層彼此垂直置中。

再設定次軸

align-items: flex-start：負責次軸對齊方式，flex-start表示對齊「起點」。
align-items僅針對單行子物件作用。
（本次範例中，主軸由上往下，所以次軸就是由左往右，因而對齊起點=靠左對齊。)
這個設定能使得.banner-txt h1的CSS設定border-bottom: 1px solid #333;，也就是「這個網頁畫面怎麼切」底下的黑線，不要無限橫向延伸，而是齊左對齊並只撐到文字框份量。
- 註：當主軸是由上至下時(column)，次軸是由左至右。
- 註：當主軸是由左至右時(row)，次軸是由上至下；
最後達到用flex讓文字由上往下排列，並且齊左對齊。

–

4. 高度單位：相對單位vh與絕對單位px

原本最外層的.banner高度設為100vh，則高度會與視窗大小相等，因而形成滿版，則瀏覽器視窗不會有捲軸；但若不想要畫面撐到最滿，而把高度單位改為700px，瀏覽器視窗就會出現捲軸。

註：原教學影片修改高度片段：「畫面不要做這麼高，把高度從100vh改成700px」
註：Relative Lengths
vh：Relative to 1% of the height of the viewport

挑戰-金魚都能懂的網頁切版 : 圖文滿版區塊

網頁網址

HTML版面結構

學習重點

1. CSS Reset

2. background: linear-gradient

3. CSS Flex 父層與子層

先設定主軸

再設定次軸

4. 高度單位：相對單位vh與絕對單位px

Read more

路人起步-邁向前端工程師-從零開始理解Git

前端幼幼班：安裝 shell 環境

理解如何在Github使用Pull Request (PR)

:open_book:Judy的Markdown使用筆記