Board logo

標題: 【隨堂測驗】html 訂餐系統 [打印本頁]
作者: 陳育霖    時間: 2023-8-5 09:09     標題: 【隨堂測驗】html 訂餐系統

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

請依下圖製作一個相同的訂餐網頁，標題為h2大小，餐品數量選項為0~5。
[attach]16188[/attach]
本帖隱藏的內容需要回復才可以瀏覽
作者: 蔡幸融    時間: 2023-8-5 16:07

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

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

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

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

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

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

  95. </body>

  97. </html>
複製代碼




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