HackMD - Collaborative Markdown Knowledge Base

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,html,ul{ margin:0; padding: 0; } #navbar{ position: fixed; background: purple; width: 100%; height: 80px; z-index: 5; } #navbar li{ float: left; margin-left: 50px; line-height: 80px; font-size: 40px; list-style-type: none; } #content div{ float: left; } #div1{ width: 40%; height: 1200px; float: left; background: lightgray; } #div2{ width: 60%; height: 1200px; float: left; background: gray; margin-top: 70px; } .boxes{ float: left; margin-top: 200px; height: 200px; width: 200px; background:yellow; margin-left: 150px; } #div3{ clear: both; position: relative; width: 100%; height: 100px; background: black; bottom: 0; } </style> </head> <body> <ul id="navbar"> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> <div id="content"> <div id="div1" class="box"> <div id="b1" class="boxes"></div> <div id="b2" class="boxes"></div> <div id="b3" class="boxes"></div> <div id="b4" class="boxes"></div> </div> <div id="div2" class="box"> <p>prompt是什麼?<br>prompt會產生一個對話框，對話框中有一個輸入欄位可讓使用者填入資料，而使用者填入的資料會回傳至程式中</p> <button onclick="hint()">暱稱</button> <script language="Javascript"> function hint(){ var nickname = prompt("請輸入暱稱", "") if(nickname!= null && nickname != ""){ alert("您的回答是\t"+nickname+"\t") }else{ alert("您沒輸入喔!") } } </script> <input type="button" value="點我" onclick="hint()" id="btn"> <p>針對 alert, prompt, confirm 三者進行的比較<br>alert 對話框會顯示確認按鈕，按下確認按鈕後可以繼續執行<br>prompt 則會出現輸入框，輸入後會顯示在對話盒中<br>confirm對話盒則會有確認即取消的按鈕，按下其中一個則會繼續</p> </div> </div> <div id="div3"> </script> <input type="button" value="點我" onclick="hint()" id="btn"> </div> </body> </html>