Board logo

標題: Box Model 設計-邊框練習(二) [打印本頁]

作者: 陳育霖    時間: 2023-8-29 03:03     標題: Box Model 設計-邊框練習(二)

請依下圖完成網頁設計。
字體為: Arial、sans-serif,顏色為:#ccc、#f9f9f9、#f4f4f4、#e74c3c
[attach]16362[/attach]
本帖隱藏的內容需要回復才可以瀏覽

作者: 蔡幸融    時間: 2023-8-29 17:17

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

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

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

  24.         .boxcontainer {
  25.             display: inline;
  26.         }
  27.     </style>
  28. </head>

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

  51.     </div>

  52. </body>

  53. </html>
複製代碼





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