iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
自我挑戰組

菜鳥的暑假Web學習系列 第 4

Day 4 nav介紹

大家好~今天我們要來試做HTML裡的nav標籤,會結合上一篇文章裡介紹過的div&img喔!

首先給個header,header的class名稱為headerClass(class名稱可以自己取名),裡面放div,div的class名稱為navClass(class名稱可以自己取名)
https://ithelp.ithome.com.tw/upload/images/20200901/20129566K1MsKLXg0r.png
在裡面新增一個div用來放置圖片,id的名稱為itravelLogo(id名稱可以自己取名),然後把img放進這個div裡面
https://ithelp.ithome.com.tw/upload/images/20200901/2012956664rpUeDpNh.png
之後在下方再新增一個div用來放置nav,id的名稱為navId(id名稱可以自己取名),然後把nav放進這個div裡面
https://ithelp.ithome.com.tw/upload/images/20200901/20129566OuJUKkkCkR.png
在nav裡面新增ul、li
ul: 標籤用來定義一個無排序的項目清單列表
li: 標籤通常用來顯示個別項目的標籤,可用來顯示文字清單或超連結清單等等
https://ithelp.ithome.com.tw/upload/images/20200901/20129566KR4L4tLaoY.png
可以在li裡面增加自己想要的內容,像這樣
https://ithelp.ithome.com.tw/upload/images/20200901/20129566raEr0ZArtH.png
附上完整的CSS
https://ithelp.ithome.com.tw/upload/images/20200901/201295663BwxX6nWT2.png
在.headerClass裡的position: fixed和z-index: 1是想要有浮動的感覺
https://ithelp.ithome.com.tw/upload/images/20200901/201295666iSC3yKVtY.png
用瀏覽器打開會像這樣
https://ithelp.ithome.com.tw/upload/images/20200919/201295662qlIIP0WE7.png
以上就是今天的內容/images/emoticon/emoticon41.gif


上一篇
Day 3 用汪星人介紹div&img
下一篇
Day 5 input介紹
系列文
菜鳥的暑假Web學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言