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>

  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>
複製代碼




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