---
# System prepended metadata

title: Untitled

---

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