---
# System prepended metadata

title: Untitled

---

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.navbar{
			margin: 0;
			position: fixed;
			left: 0px;
			top:0px;
			width: 100%;
			height:50px;
			background:red;
			float: top;
			z-index: 100;
            
		}
		ul{
			margin: 0;
			padding: 0;
		}
		li{
			margin:0;
			padding: 0;
			position: relative;
			left: 20px;
			width: 100px;
			height:50px;
			background:red;
			float: left;
			list-style-type: none;
		}
		#div1{
			position: relative;
			top:50px
			left: 50px;
			width: 50%;
			height:500px;
			background:pink;
			z-index: 0;
			float: left;
			margin-top: 40px;
		}
		.box{ 
			margin: 100px -10px -90px 20px;
			width: 45%;
			height: 30%;
			background: yellow;
			z-index: 20;
			float: left;
		}
		#div2{
			position: relative;
			margin: 40px 0px;
			width:50%;
			height:1000px;
			background:gray;
			z-index: 0;
			float: left;	
		}
		#div3{
			margin: 0px;
			position: fixed;
			left: 0px;
			bottom: 0px;
			width: 100%;
			height:50px;
			background:blue;
			z-index: 100;
		}
	</style>
</head>
<body>
	<div class="navbar">
		<ul >
			<li><a href="#">MEUN1</a></li>
			<li><a href="#">MEUN2</a></li>
			<li><a href="#">MEUN3</a></li>
		</ul>
	</div>
	<div id="div1">
		<div class="box">box1</div>
		<div class="box">box2</div>
		<div class="box">box3</div>
		<div class="box">box4</div>
	</div>
	<div id="div2">
		<p>
		prompt() 跳出個輸入框 讓你輸入東西
		</p>
		<button onclick="hint()">點我</button>
		<script language="Javascript">
			function hint(){
				var user=prompt('你今天花了幾單?',"")
				if(user!=null && user!=""){
					alert("總共:\t"+user+"\t單")
				}else{
					alert("是不是30單")
				}
			}
		</script>
		<p>alert() 跳出個提示框（確定)，confirm() 跳出個確認框（確定，取消），prompt()跳出個輸入框 讓你輸入東西
	</p>
	</div>
	<div id="div3"></div>
</body>
</html>