返回列表 發帖

CSS 清單選項 (一) 練習

請依下圖完成網頁設計。
字體為:Arial,顏色為:#ff5733、#f8f8f8、#1f7acf、#f0f0f0、#333、#444、#555、#fff,字體大小為:14、16、18、24、36px
本帖隱藏的內容需要回復才可以瀏覽
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

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

  3. <head>
  4.     <style>
  5.         body main{
  6.             font-family: Airal;
  7.             background-color: #f0f0f0;
  8.             text-decoration: overline;
  9.             text-decoration-color: red;
  10.         }

  11.         nav {
  12.             text-align: center;
  13.             background-color: #444;
  14.             font-size: 18px;
  15.             line-height: 2;
  16.         }

  17.         nav a {
  18.             color: #fff;
  19.         }

  20.         h1 {
  21.             font-weight: 700;
  22.             color: #1f7acf;
  23.         }

  24.         .title {
  25.             text-align: center;
  26.             color: #fff;
  27.             background-color: #333;
  28.             font-size: 24px;
  29.         }

  30.         button {
  31.             color: #fff;
  32.             background-color: #1f7acf;
  33.             font-size: 18px;
  34.         }
  35.         ul{
  36.             list-style-type: square ;
  37.         }
  38.     </style>
  39. </head>

  40. <body>
  41.     <div class="title">歡迎來到日常簡單網站</div>
  42.     <nav>
  43.         <a href="">首頁</a>
  44.         <a href="">關於我們</a>
  45.         <a href="">產品</a>
  46.         <a href="">聯絡我們</a>
  47.     </nav>
  48.     <main>
  49.         <h1>歡迎光臨我們的網站</h1>
  50.         <p>我們提供優質的產品和服務,歡迎隨時與我們聯絡。</p>
  51.         <img src="" alt="產品圖片">
  52.         <p>我們的產品是高品質的,專注於提供最佳的用戶體驗</p>
  53.         <p>
  54.             請瀏覽我們的
  55.             <a href="">產品頁面</a>
  56.             以獲取更多資訊
  57.         </p>
  58.         <ul>
  59.             <li>創意設計</li>
  60.             <li>專業團隊</li>
  61.             <li>客製化解決方案</li>
  62.         </ul>

  63.         <ol>
  64.             <li>優質材料</li>
  65.             <li>精湛工藝</li>
  66.             <li>全球運送</li>
  67.         </ol>
  68.         <button>了解更多</button>
  69.     </main>



  70. </body>

  71. </html>
複製代碼

TOP

返回列表