<!DOCTYPE html> <html> <head> <link href="styles.css" rel="stylesheet"> <meta charset="utf-8"> <title>Hi</title> </head> <style type="text/css"> html, body, div{ margin: 0; } .navbar{ background: #042571; height: 60px; width: 100%; line-height:40px; font-size:18px; position:fixed; z-index: 2; } div.navbar ul{ margin:0; padding:0; list-style-type:none; } div.navbar ul li{ width:150px; text-align:center; float:left; } div.navbar ul li a{ text-decoration:none; color:#fff; } div.content{ float: left; } div.content .left{ float: left; background:#7A86AD; height:900px; } .box{ background:#FFFF83; position: relative; width: 60px; height:80px; z-index: 1; margin: 80px 100px 20px 100px; left:0px; float: left; top: 0px; } #div1{ float: left; background: #505F90; height: 700px; width: 600px; } #div2{ float: left; background: #083190; width: 1300px; height: 1050px; padding-top: 50px; padding-left: 20px; box-sizing: border-box; } #footer{ height: 40px; width: 100%; background: #07123A; clear: both; } </style> <script type="text/javascript"> var theResponse = window.prompt("1+5="); alert(theResponse); </script> <body> <div class="navbar"> <ul> <li><a href="#">abcde</a></li> <li><a href="#">fghij</a></li> <li><a href="#">mnopq</a></li> <li><a href="#">rstuv</a></li> </ul> </div> <div class="content"> <div id="div1"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div id="div2"> <h3>1.Prompt 是什麼？</h3> <p>彈出個輸入框 讓使用者輸入東西。</p> <h3> 3.Prompt 是什麼？ </h3> <p> alert() 彈出個提示框，按確定關閉<br/> confirm() 彈出個確認框，按確定、取消關閉<br/> prompt() 彈出個輸入框，讓你輸入東西 <br/> </p> </div> <div id="footer"></div> </div> </body> </html>