---
# System prepended metadata

title: Untitled

---

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function hey()
		{
  		var number = prompt("請輸入暱稱", "暱稱");
 		alert("嗨嗨嗨嗨嗨    " + number);
 		}
	</script>

	
	
 
	<style>


		html, body, div,ul{
			margin:0;
		}
		

		
		#menu li {
	  		float: left;
	  		line-height: 100px;
	  		margin: 0 0 0 20px;
	  		list-style-type: none;
		}
		#menu{
			position: fixed;
			background:red;
			width: 100%;
			height: 70px;
			top: 0;
			left: 0;
			z-index: 10;

			
		}
		#box2{
			
			background:yellow;

			width: 50%;
			height: 700px;
			top: 0px;			
			float: left;
			z-index: 1;
		}
		#box3{
			margin-top:50px;
			padding-top: 5px;
			background:gray;
			width: 50%;
			height: 1500px;
			top: 0px;
			left: 0px;
			float: left;
			z-index: 1;
		}
		#b1{

			background:pink;
			position: relative;
			width: 200px;
			height: 200px;
			top: 0px;
			left: 0px;
			float: left;
			margin: 100px 120px 20px 120px;
			z-index: 1;
		}
		#box4{
			float: left;
			background:blue;
			width: 100%;
			height: 20px;
			position: relative;
  			bottom: 0px;
			z-index: 2;
		}
	</style>
</head>
<body>
	
	<div id="menu" class="box500">	
		<ul>
			 <li>menu1</li>
			 <li>menu2</li>
			 <li>menu3</li>
		</ul>
	</div>	
	<div id="box2" class="box500">
		<div id="b1" class="box500"></div>
		<div id="b1" class="box500"></div>
		<div id="b1" class="box500"></div>
		<div id="b1" class="box500"></div>
	</div>

	<div id="box3" class="box500">
		<h1>1. Prompt 是什麼？</h1>
		<p>彈出消息框讓使用者輸入</p>
	    
	    <h1>2. 請提出一個問題，讓使用者輸入，將使用者輸入的值彈出視窗(alert)。</h1>  
	    <input type="button" onclick="hey()" value="問題">
	    
	    <h1>3. 針對 alert, prompt, confirm 三者進行比較，格式不限。</h1>
	    <p>
	    	alter只有消息框
	    	prompt有消息框、使用者可輸入
	    	confirm是訊息確認框
	    </p>
	</div>
	
	<div id="box4" class="box500">
	</div>
</body>
</html>