標題:
CSS 字體屬性 (二) 練習
[打印本頁]
作者:
陳育霖
時間:
2023-8-5 16:25
標題:
CSS 字體屬性 (二) 練習
本帖最後由 陳育霖 於 2023-8-12 14:19 編輯
請依下圖完成網頁設計,大標為h1,其餘標題為h2。
h1字體大小為28px、且置中,h2字體顏色為#007bff、大小為24px
p的開頭為32px長度、高度為1.5倍,顏色為#333,ol 的開頭寬度為40px
[attach]16191[/attach]
本帖隱藏的內容需要回復才可以瀏覽
作者:
蔡幸融
時間:
2023-8-12 14:29
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style4.css">
<title>文字排版範例</title>
</head>
<body>
<h1>文字排版範例</h1>
<h2>這裡是一個子標題</h2>
<p>這是一個使用text-indent屬性的段落,可以設定首行縮排,這樣就可以使段落的第一行空出來,使文章更有層次感和美觀</p>
<h2>使用連結</h2>
<p>
這是一個包含連結的段落,你可以
<a href="">點擊這裡</a>
來進一步了解更多內容
</p>
<h2>有序清單</h2>
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
<h2>調整行間距和字母間距</h2>
<p style="line-height: 1;">這是一個使用line-height屬性設定為1的段落,行高和文字大小一致,這樣行間距會比較緊湊。</p>
<p style="line-height: 24px;">這是一個使用line-height屬性設定為24px的段落,行高設定為具體的高度值,使行間距較大,提高閱讀舒適度。</p>
<p>字母間距是設定字母之間的距離,使用letter-spacing屬性可以調整自母間距。</p>
<P style="letter-spacing: 10px;">letter-spacing 10px</P>
<p style="letter-spacing: 20px;">letter-spacing 20px</p>
</body>
</html>
複製代碼
歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://seed.istak.org.tw/)
Powered by Discuz! 7.2