iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
1
Modern Web

喪屍黑白切系列 第 28

Day 28 | 來組合個畫面吧 - Part 1

  • 分享至 

  • xImage
  •  

終於要來組合畫面嚕~
寫了這麼多天的小區塊切版,
終於要派上用場了!
是不是常常有一種:「我想要學的是整個網頁的切版,不是這種小區塊!」的吶喊啊?
其實小區塊切得好,切版就不會是一件很難開頭的事情。

講解一下我規劃的架構是如何:

先放一下整個頁面會長如何好了,
因為時間有限,
我就沒有考量 RWD,
是以固定尺寸來進行製作的。


( banner 背景圖 Edan Cohen from Unsplash )

我其實有點不太確定要怎麼樣提供我的檔案,
總覺得整個都貼上好像有點太冗了,
今天就先分享我 HTML 的 codepen 好了,
明天分享加上 CSS 的模樣。

codepen(有沒有那種看到很早期網頁的感覺)

一般我的結構起手式都會長這樣,
沒有用 main 是因為他的支援度的問題(又是 IE)。

<header></header>
<div class="main"></div>
<footer></footer>

HTML 結構

有共用的就會有同一個 class
畢竟網頁內容滿多都是模組化的概念,
這樣可以一起設定,
要做變更的時候你就會感激自己當初規劃的很好。

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天繼續組合畫面~


上一篇
Day 27 | 等待的時間不無聊 - loader
下一篇
Day 29 | 來組合個畫面吧 - Part 2
系列文
喪屍黑白切30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
wang32
iT邦新手 5 級 ‧ 2020-10-14 17:17:03

快成功了

我成功了耶耶!

我要留言

立即登入留言