iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
自我挑戰組

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

介紹html與css

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

html的開始、讓網頁出現文字

開啟visual studio code並且新增一個檔案,將檔案儲存為html檔,接下來在檔案內輸入!,再按下tab鍵,就會跑出一些預設的架構 對著html檔按...

2021-09-01 ‧ 由 fujoshi123 分享
DAY 2

html字體的變化

讓網頁出現文字後想要改變文字的大小、顏色、字型...這時候就需要用到css了,你可以再新建一個檔案並存為css檔,並且與這個html檔連結,這裡使用html檔內...

2021-09-02 ‧ 由 fujoshi123 分享
DAY 3

html清單

今天學習如何在網頁上顯示清單列表,我們需要用到ul li與ol li 首先是ul li,在body裡面輸入以下程式碼 就能得到這樣的效果 可以從上圖看到每個...

2021-09-03 ‧ 由 fujoshi123 分享
DAY 4

html表格

今天來說說如何在html中產生一個表格,我們需要用到table這個語法,table的用法如下 table括號內的其他內容是為了讓框線顯示出來做的設定,有興趣的...

2021-09-04 ‧ 由 fujoshi123 分享
DAY 5

html表格-合併儲存格

想要在html表格中完成合併儲存格的效果,需要用到rowspan和colspan分別為垂直和水平合併儲存格 先示範rowspan的用法 rowspan=&qu...

2021-09-05 ‧ 由 fujoshi123 分享
DAY 6

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

今天來說如何用html和css做出網頁上方的標題欄,就像iT邦幫忙網頁中藍色的那欄 首先我們新增一個div,將他的長度設為50px,寬度設為100%,並且給他...

2021-09-06 ‧ 由 fujoshi123 分享
DAY 7

html標題欄上的按鈕

今天要在昨天寫好的標題欄上新增按鈕,要讓按鈕出現在標題欄裡,所以要將按鈕的div寫在column的div裡 <div class="co...

2021-09-07 ‧ 由 fujoshi123 分享
DAY 8

html div水平並列

我們昨天寫出了標題欄上的一個按鈕,今天想要多寫幾個按鈕出來,但是當我們複製了多個but1的div時,卻會發現他們排列成了一直行 <div clas...

2021-09-08 ‧ 由 fujoshi123 分享
DAY 9

html鼠標移上改變圖樣和底色

我們昨天做出了四個按鈕,今天想要試著在鼠標移上時改變效果,首先先把按鈕顏色改成跟底色相同 想讓物體在鼠標放上時改變狀態,就必須在css中用到hover這個語法...

2021-09-09 ‧ 由 fujoshi123 分享
DAY 10

html 改變按鈕位子

昨天為止我們成功做出了多個按鈕並且在鼠標移上時改變了他的效果,今天我們想要改變按鈕的位子,讓他可以靠在最右邊 先來說說div有三種參數可以調整,分為margin...

2021-09-10 ‧ 由 fujoshi123 分享