Board logo

標題: Box Model 設計-內外邊距練習 [打印本頁]
作者: 陳育霖    時間: 2023-8-12 13:35     標題: Box Model 設計-內外邊距練習

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

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

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

  4. <head>
  5.     <style>
  6.         body{
  7.             text-align: center;
  8.             background-image: url(sky.avif);
  9.         }
  10.         div{
  11.             background-color: rgba(255,255,255,0.5);
  12.         }
  13.         header{
  14.             background-color: rgba(0,0,0,0.2);
  15.             color: #fff;
  16.             font-size: 24px;
  17.             
  18.         }
  19.         nav{
  20.             background-color: #333;
  21.             line-height: 2;
  22.             padding: 5px 0px;
  23.         }
  24.         nav a{
  25.             text-decoration: none;
  26.             color: #fff;
  27.             font-size: 18px;
  28.             margin: 5px 15px 5px;
  29.         }
  30.         footer{
  31.             background-color: #444;
  32.             color: #fff;
  33.         }

  35.     </style>
  36. </head>

  38. <header> 歡迎來到日常生活網頁</header>
  39. <body>
  40.     <nav>
  41.         <a href="">首頁</a>
  42.         <a href="">關於我們</a>
  43.         <a href="">美食</a>
  44.         <a href="">健康</a>
  45.         <a href="">連絡我們</a>
  46.     </nav>
  47.     <div>
  48.         <h1>探索美好的日常</h1>
  49.         <p>在這個網站上</p>
  50.         <p>從美食、旅遊</p>
  51.         <p>讓我們一啟</p>
  52.     </div>
  53. </body>
  54. <footer>版元我有</footer>

  56. </html>
複製代碼




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