<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .navbar{ margin: 0; position: fixed; left: 0px; top:0px; width: 100%; height:50px; background:red; float: top; z-index: 100; } ul{ margin: 0; padding: 0; } li{ margin:0; padding: 0; position: relative; left: 20px; width: 100px; height:50px; background:red; float: left; list-style-type: none; } #div1{ position: relative; top:50px left: 50px; width: 50%; height:500px; background:pink; z-index: 0; float: left; margin-top: 40px; } .box{ margin: 100px -10px -90px 20px; width: 45%; height: 30%; background: yellow; z-index: 20; float: left; } #div2{ position: relative; margin: 40px 0px; width:50%; height:1000px; background:gray; z-index: 0; float: left; } #div3{ margin: 0px; position: fixed; left: 0px; bottom: 0px; width: 100%; height:50px; background:blue; z-index: 100; } </style> </head> <body> <div class="navbar"> <ul > <li><a href="#">MEUN1</a></li> <li><a href="#">MEUN2</a></li> <li><a href="#">MEUN3</a></li> </ul> </div> <div id="div1"> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> <div class="box">box4</div> </div> <div id="div2"> <p> prompt() 跳出個輸入框 讓你輸入東西 </p> <button onclick="hint()">點我</button> <script language="Javascript"> function hint(){ var user=prompt('你今天花了幾單?',"") if(user!=null && user!=""){ alert("總共:\t"+user+"\t單") }else{ alert("是不是30單") } } </script> <p>alert() 跳出個提示框（確定)，confirm() 跳出個確認框（確定，取消），prompt()跳出個輸入框 讓你輸入東西 </p> </div> <div id="div3"></div> </body> </html>