Board logo

標題: 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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <link rel="stylesheet" href="style4.css">
  5.         <title>文字排版範例</title>
  6.     </head>
  7.     <body>
  8.         <h1>文字排版範例</h1>
  9.         <h2>這裡是一個子標題</h2>
  10.         <p>這是一個使用text-indent屬性的段落,可以設定首行縮排,這樣就可以使段落的第一行空出來,使文章更有層次感和美觀</p>
  11.         <h2>使用連結</h2>
  12.         <p>
  13.             這是一個包含連結的段落,你可以
  14.             <a href="">點擊這裡</a>
  15.             來進一步了解更多內容
  16.         </p>
  17.         <h2>有序清單</h2>
  18.         <ol>
  19.             <li>第一項</li>
  20.             <li>第二項</li>
  21.             <li>第三項</li>
  22.         </ol>
  23.         <h2>調整行間距和字母間距</h2>
  24.         <p style="line-height: 1;">這是一個使用line-height屬性設定為1的段落,行高和文字大小一致,這樣行間距會比較緊湊。</p>
  25.         <p style="line-height: 24px;">這是一個使用line-height屬性設定為24px的段落,行高設定為具體的高度值,使行間距較大,提高閱讀舒適度。</p>
  26.         <p>字母間距是設定字母之間的距離,使用letter-spacing屬性可以調整自母間距。</p>
  27.         <P style="letter-spacing: 10px;">letter-spacing 10px</P>
  28.         <p style="letter-spacing: 20px;">letter-spacing 20px</p>
  29.     </body>

  30. </html>
複製代碼





歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/) Powered by Discuz! 7.2