---
# System prepended metadata

title: Untitled

---

<!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>