<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
<style>
*{margin: 0px;}
body{width: 610px;
margin: 10px auto}
section{
width: 600px;
background-color: #04A0A3;
margin: 3px;
}
span{
background-color: #01C43C;
width: 100px;
display: inline-block;
text-align: center;
margin-right: 5px;
}
#contant{background-color: #999966}
</style>
<script src="jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
//alert(123)
$("h3").mouseover(function(event){
alert("hi~")
})
})
</script>
</head>
<body>
<form action="">
<h3>事件說明</h3>
<section><span>文字輸入:</span><input type="text"></section>
<section><span>密碼輸入:</span><input type="password"></section>
<section><span>下拉選單:</span>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</section>
<section><span>表單送發:</span><input type="submit" value=""></section>
<section><span>選取圓鈕:</span><input type="radio" name="" id=""></section>
<section><span>核取方塊:</span><input type="checkbox" name="" id=""></section>
<section><span>基本按鈕:</span><input type="button" value=""></section>
</form>
<hr/>
<div id="contant">訊息內容</div>
</body>
</html>
沒有留言:
張貼留言