iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
0
自我挑戰組

網頁學習紀錄系列 第 16

鐵人賽 Day16-向 KKBOX 致敬!來一個滿版主視覺吧!!

  • 分享至 

  • xImage
  •  

今天要來寫一個滿版圖片,但不使用 img 的標籤,想呈現下方畫面
https://ithelp.ithome.com.tw/upload/images/20190919/2011930055CE83qfdh.jpg

這次做法跟先前一個練習類似,但這次有一個地方有優化了一下,就是在這個地方增加下列屬性

.container-right {
    width: 77%;
    float: right;
    margin-left: 3%;
}

為什麼要這樣寫呢?
原因是因為本來的 container-left 跟 right 只有單純設定左邊 20% 寬,右邊 80% 寬,這樣會有一個問題就是這兩個區塊是連在一起的,所以為了讓畫面變更好看,圖片跟選單要有一點距離,所以在這邊多寫了一個 margin-left,
因為往左邊推擠了 3%,所以整個寬度比要調整成 80%-3%=77%,所以 77% 是這樣來的。

其他內容大同小異,
可以直接看看 codepen 應該就會懂囉~
https://codepen.io/hnzxewqw/pen/vYBQLrv


上一篇
鐵人賽Day15-向 KKBOX 致敬!寫個右邊欄位的 header!
下一篇
鐵人賽Day17-突如其來的電腦當機
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言