Board logo

標題: CSS 清單選項 (一) 練習 [打印本頁]
作者: 陳育霖    時間: 2023-8-12 10:04     標題: CSS 清單選項 (一) 練習

請依下圖完成網頁設計。
字體為:Arial，顏色為:#ff5733、#f8f8f8、#1f7acf、#f0f0f0、#333、#444、#555、#fff，字體大小為:14、16、18、24、36px
[attach]16210[/attach]
本帖隱藏的內容需要回復才可以瀏覽
作者: 蔡幸融    時間: 2023-8-12 15:17

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

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

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

  20.         nav a {
  21.             color: #fff;
  22.         }

  24.         h1 {
  25.             font-weight: 700;
  26.             color: #1f7acf;
  27.         }

  29.         .title {
  30.             text-align: center;
  31.             color: #fff;
  32.             background-color: #333;
  33.             font-size: 24px;
  34.         }

  36.         button {
  37.             color: #fff;
  38.             background-color: #1f7acf;
  39.             font-size: 18px;
  40.         }
  41.         ul{
  42.             list-style-type: square ;
  43.         }
  44.     </style>
  45. </head>

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

  71.         <ol>
  72.             <li>優質材料</li>
  73.             <li>精湛工藝</li>
  74.             <li>全球運送</li>
  75.         </ol>
  76.         <button>了解更多</button>
  77.     </main>



  81. </body>

  83. </html>
複製代碼




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