Board logo

標題: CSS 字體屬性 (三) 練習 [打印本頁]

作者: 陳育霖    時間: 2023-8-12 01:03     標題: CSS 字體屬性 (三) 練習

請依下圖完成網頁設計。
字體為:Arial,顏色為:#f0f0f0、#333、#444、#555、#fff,字體大小為:14、16、18、24、36px
[attach]16208[/attach]
本帖隱藏的內容需要回復才可以瀏覽

作者: 蔡幸融    時間: 2023-8-12 14:59

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <style>
  5.         body {
  6.             text-align: center;
  7.             font-family: Airal;
  8.             background-color: #f0f0f0;
  9.         }

  10.         nav{
  11.             background-color: #444;
  12.             font-size: 18px;
  13.             line-height: 2;
  14.         }
  15.         nav a{
  16.             color: #fff;
  17.         }
  18.         h1 {
  19.             color: #333;
  20.             text-shadow: 2px 2px 4px #333;
  21.         }

  22.         .title{
  23.             color: #fff;
  24.             background-color: #333;
  25.             font-size: 24px;
  26.         }
  27.         button{
  28.             color: #fff;
  29.             background-color: #333;
  30.             font-size: 18px;
  31.         }
  32.     </style>
  33. </head>

  34. <body>
  35.     <div class="title">歡迎來到日常簡單網站</div>
  36.     <nav>
  37.         <a href="">首頁</a>
  38.         <a href="">關於我們</a>
  39.         <a href="">產品</a>
  40.         <a href="">聯絡我們</a>
  41.     </nav>
  42.     <h1>歡迎光臨我們的網站</h1>
  43.     <p>我們提供優質的產品和服務,歡迎隨時與我們聯絡。</p>
  44.     <img src="" alt="產品圖片">
  45.     <p>我們的產品是高品質的,專注於提供最佳的用戶體驗</p>
  46.     <p>
  47.         請瀏覽我們的
  48.         <a href="">產品頁面</a>
  49.         以獲取更多資訊
  50.     </p>
  51.     <ul>
  52.         <li>優質材料</li>
  53.         <li>精湛工藝</li>
  54.         <li>全球運送</li>
  55.     </ul>
  56.     <button>了解更多</button>


  57. </body>

  58. </html>
複製代碼





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