金魚系列網頁怎麼切(斜切)

# 金魚系列網頁怎麼切(斜切) --- tags: HTML CSS relate --- ###### tags: `HTML, CSS` ## 斜切重點這裡最重要的就是這行程式碼，它讓背景的圖片轉變成斜切的角度`linear-gradient(115deg, #7bf 70%` 這邊來解釋下前面的115deg的部分是指下方圈出來的地方的角度: ![](https://i.imgur.com/6Re5VNc.png) ## 第二個部分是 #7bf 是它的顏色第三個部分是這個顏色的占比 70% 下方那行程式碼 transparent 的 50%代表兩個顏色的交界處的模糊程度，越高趴數越糊 100% 100%的部分前面是前面那個是控制上下的鋸齒狀後面是控制左右的鋸齒狀都是一百趴才有辦法呈現畫面變成斜切。 ```css= background: linear-gradient(115deg, #7bf 70%, transparent 50%) center center / 100% 100%, url("https://picsum.photos/1200/600?random=10") right center / auto 100%; ``` ---------- ## 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> ``` ## 輸出結果如下這邊比較直觀就是打上內容: <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 全域設定把一些比較不方便的東西邊邊處理掉 ![](https://i.imgur.com/9jMkR3W.png) ## Class部分的處理一些字型顏色圖片背景上面的調整 ![](https://i.imgur.com/JV8QpZw.png) ----- ## banner 這個區塊因為它是最外面最大塊的地方，寬度設定成%讓它可以做到視窗縮放， vh這個就是整個視窗高度的意思。 ![](https://i.imgur.com/VTlpfeI.png) ------ ## container 這邊比較特別是設定了高度100%，因為如果不設定高度的話就是內容的高度，而不會滿版，設定的文字就沒辦法呈現在那個位置。 max-width是為了讓視窗縮放的時候可以讓文字縮排。 ![](https://i.imgur.com/hHYVaEY.png) ----- ## banner-txt 所以這個部分設定的重點是讓banner裡面的文字擺在想要的位置。這邊的高度也是因為撐開整個區塊因此一樣使用height，接下來可以看到flex是相當好用的屬性可以直接讓區塊直接進行排列，並且不需要做padding border margin的計算，接下來的flex-direction是為了讓它變成直向，justify-content則是讓它對齊中間，align-items: flex-start ![](https://i.imgur.com/T2l5uWv.png) ![](https://i.imgur.com/Hrgs8Ml.png) ![](https://i.imgur.com/RBbZgjx.png) ------------------------ ## 文字設定區接下來的區塊基本上都是在做文字上面的設定比較要注意的點在於 h1 small裡面的設定display:block這邊是為了讓它折行，其它基本上沒有太大問題。 ![](https://i.imgur.com/vwRMrFh.png)