相信很多剛開始接觸CSS或想對切版有所認識,都知道Amos老師吧!! 非常非常感謝老師的系列教學影片,給我這新手莫大幫助啊!
我是從 金魚都能懂的網頁切版 開始學習,並從老師提供的其他影片去加深觀念~~
首先,會先了解div的放置、使用什麼標籤,順便熟悉一下HTML。
banner
的區塊container
的容器,作為來設定裝下裡面文字的容器container
中,再放一個class="banner-txt"
,用來放置文字區塊<body>
<div class="banner">
<div class="container">
<!-- 設定固定寬度的容器 -->
<div class="banner-txt">
<h1>金魚都能懂的
<small>這個網頁畫面怎麼切</small>
</h1>
<h2>圖文滿版區塊</h2>
<p>這畫面實在常見,在各種樣版網站可說是設計常客
金魚切不出來實在說不過去阿</p>
</div>
</div>
</div>
</body>
接下來,CSS的簡單解析
banner
的地方會去設定填滿整個視窗。container
用來設定所放入文字的容器,他的寬與高,並讓他置中。banner-txt
的地方,將高度設定和container
一樣,並設定flex讓內容文字能夠依照想要的方式來進行排列。會將幾個製作的大方向紀錄下來,換自己實作時可以提醒自己下一步可以從哪邊下手。
CSS Reset
金魚都能懂網頁設計入門 : CSS Reset
meyerweb.com
計網頁時重要的起手式,主要是為了讓各家瀏覽器的網頁外觀維持一致。
不同瀏覽器,在一開始,會有預設的部分,會導致在做css時和預想的設置會有差異,所以要記得reset。
flex 的使用
玩轉CSS
多重背景
/* 多重背景的使用 */
background: linear-gradient(115deg, darksalmon 50%, transparent 50%)center center /100% 100%, url(https://picsum.photos/seed/picsum/1200/600)right center /auto 100%;
參考資料
金魚都能懂的網頁設計-雜記
以上~說明我是如何規劃練習時間、而在看教學影片時,會如何學習、實作的方式。