iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
自我挑戰組

html與css粗淺新手入門教學系列 第 6

用html和css做出網頁的標題欄

今天來說如何用html和css做出網頁上方的標題欄,就像iT邦幫忙網頁中藍色的那欄
https://ithelp.ithome.com.tw/upload/images/20210906/2014008653XWrfN2SJ.jpg
首先我們新增一個div,將他的長度設為50px,寬度設為100%,並且給他一個顯眼的底色方便我們觀察
https://ithelp.ithome.com.tw/upload/images/20210906/20140086mtvlbbwtbb.jpg
打開網頁預覽會得到以下的效果,這裡使用的是chrome瀏覽器
https://ithelp.ithome.com.tw/upload/images/20210906/20140086Li3bpvTxA9.jpg
可以發現在顏色區塊的外圈還有一小段的留白
這是因為每個瀏覽器的不同造成的,這時我們需要連結一個reset.css的檔案,將瀏覽器中的留白消除,可以將這個網站https://meyerweb.com/eric/tools/css/reset/ 中的程式碼直接貼在一個新的空白檔案中,並且儲存為css檔,這個檔案要儲存在跟你要連結的html檔同一個資料夾中,接下來在你的html檔的head中新增以下這段程式碼

<link rel="stylesheet" href="reset.css">

這時候在打開網頁就會發現我們創造的色塊貼齊網頁的邊線了
https://ithelp.ithome.com.tw/upload/images/20210906/20140086fdUDGkVT4e.jpg
到這裡我們就成功創造出標題欄的色塊了,明天再來說說如何在這個色塊上新增一些可以點選的文字區塊


上一篇
html表格-合併儲存格
下一篇
html標題欄上的按鈕
系列文
html與css粗淺新手入門教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言