Board logo

標題: Box Model 設計-邊框練習(一) [打印本頁]
作者: 陳育霖    時間: 2023-8-29 03:00     標題: Box Model 設計-邊框練習(一)

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

請依下圖完成網頁設計。
字體為: Arial、sans-serif，顏色為:#ccc、#2196F3、#f8f8f8、#333、#444、#555、#fff，字體大小為:14、16、24、40px
[attach]16361[/attach]
本帖隱藏的內容需要回復才可以瀏覽
作者: 蔡幸融    時間: 2023-8-29 16:59

  1. <html>

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

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

  20.         nav {
  21.             background-color: #444;
  22.             text-align: center;
  23.         }

  25.         body{
  26.             background-color: #f0f0f0;
  27.         }

  29.         .boxcontainer {
  30.             display: flex;
  31.             flex-wrap: wrap;
  32.         }

  34.         .box{
  35.             background-color: #fff;
  36.             margin: 2%;
  37.             padding: 20px;
  38.             width: 40%;
  39.             box-shadow: 2px 2px 4px #444;
  40.         }
  41.     </style>
  42. </head>

  44. <header>
  45.     旅遊景點推薦
  46.     <nav>
  47.         <a href="">首頁</a>
  48.         <a href="">景點介紹</a>
  49.         <a href="">旅遊指南</a>
  50.         <a href="">關於我們</a>
  51.     </nav>
  52. </header>

  54. <body>
  55.     <div class="boxcontainer">
  56.         <div class="box">
  57.             <img src="" alt="圖片">
  58.             <h2>美麗海灘</h2>
  59.             <p>夏威夷，美國</p>
  60.             <p>藍天、白沙灘</p>
  61.         </div>
  62.         <div class="box">
  63.             <img src="" alt="圖片">
  64.             <h2>美麗海灘</h2>
  65.             <p>夏威夷，美國</p>
  66.             <p>藍天、白沙灘</p>
  67.         </div>
  68.         <div class="box">
  69.             <img src="" alt="圖片">
  70.             <h2>美麗海灘</h2>
  71.             <p>夏威夷，美國</p>
  72.             <p>藍天、白沙灘</p>
  73.         </div>
  74.         <div class="box">
  75.             <img src="" alt="圖片">
  76.             <h2>美麗海灘</h2>
  77.             <p>夏威夷，美國</p>
  78.             <p>藍天、白沙灘</p>
  79.         </div>
  80.     </div>
  81. </body>

  83. </html>
複製代碼




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