<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html, body , div, ul{ margin: 0; padding: 0; } .header{ width:100%; min-width:800px; height:80px; background:#666; box-shadow:0px 1px 10px 0px #333; position:relative; z-index:10; float: left; position: fixed; top: 0; } .footer{ width:100%; min-width:800px; height:100px; background:#666; box-shadow:0px 1px 10px 0px #333; position:relative; z-index:10; float: left; top: 0; } #div0{ background: red; } #div1{ background: blue; } #div2{ background: gray; height:600px; width:70%; box-sizing: border-box; float: left; margin-top: 82px; } #div3{ background: yellow; width:30%; height:800px; top:70px; box-sizing: border-box; float:right; margin-top: 82px; } #div0 li{ float: left; list-style-type: none; margin-left: 30px; position: relative; font-size: 50px; } #div1 li{ float: left; list-style-type: none; margin-left: 450px; position: relative; font-size: 50px; } #div2 li{ } #box{ background: yellow; float: left; height:40%; width:40%; margin: 100px 10px -90px 20px; } </style> <ul id = "div0" class="header"> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> </head> <body> <div id = "div2"> <div id="box"></div> <div id="box"></div> <div id="box"></div> <div id="box"></div> </div> <div id = "div3"> <P>1.prompt是 彈出個輸入框 讓你輸入東西</P> <BR></BR> <p>are you smart</p> <button onclick="myFunction()">yes</button> <button onclick="myFunction2()">no</button> <script> function myFunction() { alert("are you sure???"); } </script> <script> function myFunction2() { alert("haha"); } </script> <BR></BR> <button onclick="hint()"> CLICK ME </button> <script language="javascript"> function hint(){ var question = prompt('請問你喜歡10556018嗎?',"") if (question!= null && question != "") { alert("您回答的是\t" + question+"\t") }else{ alert("您沒輸入") } } </script> <BR></BR> <P>alert() 彈出個提示框 (確定) confirm() 彈出個確認框 (確定,取消) prompt() 彈出個輸入框 讓你輸入東西</P> </div> <ul id = "div1" class="footer"> <li>Div3</li> </ul> </body> </html>