返回列表 發帖

【隨堂測驗】html 訂餐系統

本帖最後由 陳育霖 於 2023-8-5 15:50 編輯

請依下圖製作一個相同的訂餐網頁,標題為h2大小,餐品數量選項為0~5。

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

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

  3. <head>
  4.     <title>【隨堂測驗】html 訂餐系統</title>
  5. </head>

  6. <body>
  7.     <h1>歡迎來到我的餐廳</h1>
  8.     <ul>
  9.         <li><a href="#menu">菜單</a></li>
  10.         <li><a href="#order">訂餐</a></li>
  11.         <li><a href="#contact">聯絡我們</a></li>
  12.     </ul>

  13.     <div id="menu">
  14.         <h2>菜單</h2>
  15.         <label>牛排套餐 - $200</label>
  16.         <select>
  17.             <option>0</option>
  18.             <option>1</option>
  19.             <option>2</option>
  20.             <option>3</option>
  21.             <option>4</option>
  22.             <option>5</option>
  23.         </select><br>
  24.         <label>海鮮拼盤 - $180</label>
  25.         <select>
  26.             <option>0</option>
  27.             <option>1</option>
  28.             <option>2</option>
  29.             <option>3</option>
  30.             <option>4</option>
  31.             <option>5</option>
  32.         </select><br>
  33.         <label>蔬菜沙拉 - $50</label>
  34.         <select>
  35.             <option>0</option>
  36.             <option>1</option>
  37.             <option>2</option>
  38.             <option>3</option>
  39.             <option>4</option>
  40.             <option>5</option>
  41.         </select><br>
  42.         <label>披薩套餐 - $150</label>
  43.         <select>
  44.             <option>0</option>
  45.             <option>1</option>
  46.             <option>2</option>
  47.             <option>3</option>
  48.             <option>4</option>
  49.             <option>5</option>
  50.         </select><br>
  51.         <label>義大利麵 - $100</label>
  52.         <select>
  53.             <option>0</option>
  54.             <option>1</option>
  55.             <option>2</option>
  56.             <option>3</option>
  57.             <option>4</option>
  58.             <option>5</option>
  59.         </select><br>
  60.         <label>炸雞桶 - $120</label>
  61.         <select>
  62.             <option>0</option>
  63.             <option>1</option>
  64.             <option>2</option>
  65.             <option>3</option>
  66.             <option>4</option>
  67.             <option>5</option>
  68.         </select><br>
  69.     </div>

  70.     <div id="order">
  71.         <h2>訂餐</h2>
  72.         <label>姓名:</label>
  73.         <input type="text"><br>
  74.         <label>Email:</label>
  75.         <input type="email"><br>
  76.         <label>電話:</label>
  77.         <input type="tel"><br>
  78.         <label>取餐時間:</label>
  79.         <input type="time"><br>
  80.         <button>提交訂單</button>
  81.     </div>

  82.     <div id="contact">
  83.         <h2>聯絡我們</h2>
  84.         <p>地址:台灣大道123號</p>
  85.         <p>電話:(123)456-7890</p>
  86.         <p>email:info@myretaurant.com</p>
  87.         <p>版權所有 &copy; 2023 我的餐廳</p>
  88.     </div>

  89. </body>

  90. </html>
複製代碼

TOP

返回列表