<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function hey() { var number = prompt("請輸入暱稱", "暱稱"); alert("嗨嗨嗨嗨嗨 " + number); } </script> <style> html, body, div,ul{ margin:0; } #menu li { float: left; line-height: 100px; margin: 0 0 0 20px; list-style-type: none; } #menu{ position: fixed; background:red; width: 100%; height: 70px; top: 0; left: 0; z-index: 10; } #box2{ background:yellow; width: 50%; height: 700px; top: 0px; float: left; z-index: 1; } #box3{ margin-top:50px; padding-top: 5px; background:gray; width: 50%; height: 1500px; top: 0px; left: 0px; float: left; z-index: 1; } #b1{ background:pink; position: relative; width: 200px; height: 200px; top: 0px; left: 0px; float: left; margin: 100px 120px 20px 120px; z-index: 1; } #box4{ float: left; background:blue; width: 100%; height: 20px; position: relative; bottom: 0px; z-index: 2; } </style> </head> <body> <div id="menu" class="box500"> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </div> <div id="box2" class="box500"> <div id="b1" class="box500"></div> <div id="b1" class="box500"></div> <div id="b1" class="box500"></div> <div id="b1" class="box500"></div> </div> <div id="box3" class="box500"> <h1>1. Prompt 是什麼？</h1> <p>彈出消息框讓使用者輸入</p> <h1>2. 請提出一個問題，讓使用者輸入，將使用者輸入的值彈出視窗(alert)。</h1> <input type="button" onclick="hey()" value="問題"> <h1>3. 針對 alert, prompt, confirm 三者進行比較，格式不限。</h1> <p> alter只有消息框 prompt有消息框、使用者可輸入 confirm是訊息確認框 </p> </div> <div id="box4" class="box500"> </div> </body> </html>