# 挑戰-金魚都能懂的網頁切版 : 圖文滿版區塊 ### 網頁網址 https://judyyutong.github.io/my-projects/fullScreen.html ### HTML版面結構 ![](https://i.imgur.com/Asfa3A1.png) *半透明覆蓋色塊，是為明顯標示``container``和``banner-txt``兩者重疊所佔版面而暫時顯示，實際版面練習作品沒有此色塊。 ```HTML= <body> <div class="banner"> <div class="container"> <div class="banner-txt"> <h1> 金魚都能懂的 <small> 這個網頁畫面怎麼切 </small> </h1> <h2>圖文滿版區塊</h2> <p>這畫面實在常見，在各種樣板網站可以說是設計常客 <br>切不出來實在說不過去啊</p> </div> </div> </div> </body> ``` ### 學習重點 1. CSS Reset：清除瀏覽器預設空間，以真正實現滿版 2. ``background: linear-gradient``：運用**多重背景(Multiple Backgrounds)** 寫法，控制傾斜角度、畫面佔比、透明度、對齊位置等，達到色彩與圖片滿版斜切 4. ``display:flex``：透過flex軸向、物件對齊方式等進行排版 5. 相對單位`vh`：vh=viewport height=視窗高度，設容器高度為100vh即為滿版高(縮放視窗就不會出現捲軸) -- ### 1. CSS Reset ```CSS= *{ margin: 0; padding: 0; list-style: none; } ``` ``*``代表套用至全部元素，以上設定用於消除所有瀏覽器預設的外距、內距以及清單預設列點縮排空間。 -- ### 2. background: linear-gradient ```CSS= .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 屬性一點也不難」](https://wcc723.github.io/css/2017/07/21/css-flex/)、[Flex 觀念與應用](https://ithelp.ithome.com.tw/articles/10248209) - `display:flex`要設定在父層。 因此本切版練習中，若想針對文字進行排版，得先建立一個父層「外容器」把所有文字包在其中：建立`banner-txt`，並宣告`display:flex`。 ```CSS= 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」](https://youtu.be/rwTMBmnIHcY?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=806) - 註：[Relative Lengths](https://www.w3schools.com/cssref/css_units.asp) vh：Relative to 1% of the height of the viewport