返回列表 發帖

Rank: 7Rank: 7Rank: 7
1# 跳轉到 » 倒序看帖
打印
tT
陳育霖發表於 2023-8-29 03:03 | 只看該作者

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

請依下圖完成網頁設計。
字體為: Arial、sans-serif，顏色為:#ccc、#f9f9f9、#f4f4f4、#e74c3c

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

Rank: 1
2#
蔡幸融發表於 2023-8-29 17:17 | 只看該作者
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <style>
  6.         body {
  7.             background-color: #f4f4f4;
  8.         }

  10.         .box {
  11.             background-color: #fff;
  12.             margin: 2%;
  13.             padding: 5px 25px;
  14.             width: 240px;
  15.             height: 210px;
  16.             border: 2px solid #ccc;
  17.             border-radius: 10px 10px;
  18.             font-family: Arial, sans-serif;
  19.         }
  20.         h2{
  21.             font-size: 30px;
  22.         }
  23.         p{
  24.             font-size: 22px;
  25.         }

  27.         .boxcontainer {
  28.             display: inline;
  29.         }
  30.     </style>
  31. </head>

  33. <body>
  34.     <div class="boxcontainer">
  35.         <div class="box">
  36.             <h2>積點漢堡</h2>
  37.             <p>100%純牛肉，新鮮蔬菜</p>
  38.             <p style="font-weight: bold; color: #e74c3c;">$8.99</p>
  39.         </div>
  40.         <div class="box">
  41.             <h2>積點漢堡</h2>
  42.             <p>100%純牛肉，新鮮蔬菜</p>
  43.             <p style="font-weight: bold; color: #e74c3c;">$8.99</p>
  44.         </div>
  45.         <div class="box">
  46.             <h2>積點漢堡</h2>
  47.             <p>100%純牛肉，新鮮蔬菜</p>
  48.             <p style="font-weight: bold; color: #e74c3c;">$8.99</p>
  49.         </div>
  50.         <div class="box">
  51.             <h2>積點漢堡</h2>
  52.             <p>100%純牛肉，新鮮蔬菜</p>
  53.             <p style="font-weight: bold; color: #e74c3c;">$8.99</p>
  54.         </div>

  56.     </div>

  58. </body>

  60. </html>
複製代碼

TOP

返回列表