iT邦幫忙

鐵人檔案

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

從零開始自學HTML/CSS網頁設計 系列

一直都對於架設網站很有興趣,但學習到的相關資訊知識都是偏向後端的程式能力,因此想藉由這個機會,自我挑戰從未碰過的領域。在這三十天裡,我會以「成功架設一個網頁」為目標,期望自己能順利完成!

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

設定HTML網站的外部連結和書籤連結

一、設定外部連結如果想要將網站可以連結到其他的網頁,就必須以a標籤、href屬性和target屬性框住要作為連結的文字。1、href屬性:屬性值是連結目的地的路...

2022-09-24 ‧ 由 H 分享
DAY 12

相對路徑和絕對路徑

一、相對路徑相對路徑是以目前所開啟的HTML檔案來指定其他的檔案,所以沒辦法透過相對路徑指定外部網站。我們這裡先假設一個情境,我們希望w.html可以跳轉到x....

2022-09-25 ‧ 由 H 分享
DAY 13

建立CSS檔案

首先我們先來介紹幾個CSS的基本語法。 改變標題及顏色:在head元素內插入style標籤,並在style元素內輸入h1元素來變更標題文字大小、顏色:然後點選及...

2022-09-26 ‧ 由 H 分享
DAY 14

CSS的屬性介紹

文字的大小大家一定很好奇,為什麼在HTML檔案裡插入h標籤和p標籤時,文字大小會隨著標籤等級而改變,這是因為瀏覽器預設了他們的font-size值,如下圖所示...

2022-09-27 ‧ 由 H 分享
DAY 15

class屬性與id屬性指定CSS的方法

class選擇器如果只想在特定的區域套用裝飾,可以在HTML檔裡加入class屬性,如下所示: <footer> <p class=&qu...

2022-09-28 ‧ 由 H 分享
DAY 16

CSS的盒子模組

如果你想要運用CSS將文章排版的話,就要知道如何控制留白。CSS的留白分成「padding」和「margin」這兩個屬性,其中框內留白可以利用padding屬性...

2022-09-29 ‧ 由 H 分享
DAY 17

用CSS來裝飾表格

我們想要在表格套用邊框、留白和背景色,就會使用到之前學過的border、background-color和pudding屬性,除此之外還有幾個屬性可以加入,稍等...

2022-09-30 ‧ 由 H 分享
DAY 18

用CSS裝飾清單

如果想將HTML的清單符號改成其他款式,可以使用CSS的list-style-type屬性,以下舉例要把清單符號改成黑色矩形: li{ list-sty...

2022-10-01 ‧ 由 H 分享
DAY 19

用CSS裝飾導覽列

首先想要消除導覽列的清單符號,就可以輸入以下的程式碼: ul li{ list-style-type: none; } 但由於考慮到之後會增加其他的u...

2022-10-02 ‧ 由 H 分享
DAY 20

用CSS配置主圖片並裝飾

首先先以div標籤框住HTML檔的img元素,並在div標籤上加上「class="mainviaual"」:需注意的是div標籤是定義範圍的...

2022-10-03 ‧ 由 H 分享