HackMD - Collaborative Markdown Knowledge Base

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html, body{ margin:0; padding:0; } .header{ position:fixed; top:0; z-index:100; width:100%; min-width:800px; height: 80px; background: brown; } .navbar{ width:800px; height: 40px; position:absolute; top:40px; left:50%; margin-left:-400px; } .navbar ul{ list-style-type:none; margin:0; padding:0; } .navbar ul li{ width:160px; height:40px; line-height:40px; text-align:center; float:left; } .navbar ul li a{ color:#fff; text-decoration:none; } #c{ display: flex; margin-top: 55px; } #div1{ flex: 1; width: 50%; height: 500px; top:40px; background: black; box-sizing: border-box; } #div2{ flex: 1; box-sizing: border-box; width: 50%; height: 800px; top:40px; background: blue; } #f{ clear:both; height:100px; background:yellow; } .box{ margin: 100px -10px -90px 20px; width: 45%; height:30%; background: green; float: left; } .p{ margin-left: 5px; color:red; } </style> </head> <body> <button onclick="hint()">點我</button> <script language="Javascript"> function hint(){ var user=prompt('請問許晉瑞是GAY嗎?',"") if(user!=null && user!=""){ alert("你回答的是:\t"+user+"\t!") }else{ alert("你沒輸入") } } </script> <div class="header"> <div class="navbar"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> </ul> </div> </div> <div id = "c"> <div id = "div1"> <div class = "box"></div> <div class = "box"></div> <div class = "box"></div> <div class = "box"></div> </div> <div id = "div2"> <input type="button" value="點我" onclick="hint()" id = "btn"> <br> <br> <p class = "p">Prompt 跳出一個可輸入對話方塊</p> <p class = "p">alert 跟 confirm 類似都是跳出一個帶有指定消息的方塊 Prompt則是跳出一個可輸入的對話方塊</p> </div> </div> <div id = "f"></div> </body> </html>