返回列表 發帖

Box Model 設計-邊框練習(一)

本帖最後由 陳育霖 於 2023-8-29 03:02 編輯

請依下圖完成網頁設計。
字體為: Arial、sans-serif,顏色為:#ccc、#2196F3、#f8f8f8、#333、#444、#555、#fff,字體大小為:14、16、24、40px

本帖隱藏的內容需要回復才可以瀏覽
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

  1. <html>

  2. <head>
  3.     <style>
  4.         header {
  5.             background-color: #555;
  6.             color: #fff;
  7.             padding: 5px 0px;
  8.             text-align: center;
  9.             font-size: 24px;
  10.         }

  11.         nav a {
  12.             text-decoration: none;
  13.             color: #fff;
  14.             margin: 15px 5px;
  15.             font-size: 16px;
  16.         }

  17.         nav {
  18.             background-color: #444;
  19.             text-align: center;
  20.         }

  21.         body{
  22.             background-color: #f0f0f0;
  23.         }

  24.         .boxcontainer {
  25.             display: flex;
  26.             flex-wrap: wrap;
  27.         }

  28.         .box{
  29.             background-color: #fff;
  30.             margin: 2%;
  31.             padding: 20px;
  32.             width: 40%;
  33.             box-shadow: 2px 2px 4px #444;
  34.         }
  35.     </style>
  36. </head>

  37. <header>
  38.     旅遊景點推薦
  39.     <nav>
  40.         <a href="">首頁</a>
  41.         <a href="">景點介紹</a>
  42.         <a href="">旅遊指南</a>
  43.         <a href="">關於我們</a>
  44.     </nav>
  45. </header>

  46. <body>
  47.     <div class="boxcontainer">
  48.         <div class="box">
  49.             <img src="" alt="圖片">
  50.             <h2>美麗海灘</h2>
  51.             <p>夏威夷,美國</p>
  52.             <p>藍天、白沙灘</p>
  53.         </div>
  54.         <div class="box">
  55.             <img src="" alt="圖片">
  56.             <h2>美麗海灘</h2>
  57.             <p>夏威夷,美國</p>
  58.             <p>藍天、白沙灘</p>
  59.         </div>
  60.         <div class="box">
  61.             <img src="" alt="圖片">
  62.             <h2>美麗海灘</h2>
  63.             <p>夏威夷,美國</p>
  64.             <p>藍天、白沙灘</p>
  65.         </div>
  66.         <div class="box">
  67.             <img src="" alt="圖片">
  68.             <h2>美麗海灘</h2>
  69.             <p>夏威夷,美國</p>
  70.             <p>藍天、白沙灘</p>
  71.         </div>
  72.     </div>
  73. </body>

  74. </html>
複製代碼

TOP

返回列表