1.內嵌式元件
2.區塊式
<style type="text/css">
選擇器{屬性1:屬性值1; 屬性2:屬性值2;...... }
</style>
選擇器 1.tag名稱
2.id #
3.class .
3.外部檔案式
css漸層色
background:linear-gradient(參數1參數2參數N)
=======================
<!doctype html>
<head>
<meta charset="utf-8">
<title>appform2</title>
</head>
<style type="text/css">
#dv1 { display:none;}
#s1 { cursor:pointer;}
label {color:#36F}
#s1,#r1{
color:#66F;
font-size:16px;
background:linear-gradient(to top right,blue,white,yellow);
border-radius:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script language="javascript">
function fun1() {
if ($("#dv1").is(":visible"))
{$("#dv1").css('display','none'); $("#s1").html("開啟");}
else {$("#dv1").css('display','block');$("#s1").html("關閉");}
}
</script>
<body>
<center>
<h3 ><span id="s1" name="s1" style="border:2px solid darkred;" onclick="fun1();" >開啟</span></h3>
<div id="dv1" name="dv1" style="width:800px;height:450px;border:2px solid darkred;background:url(image/bg4.jpg) " >
<form id="f1" name="f1" method="post">
<table border="0" id="tbl1" name="tbl1" width="700" >
<tr><td colspan="6">個人基本資料</td></tr>
<tr><td ><label id="lab1">編號</label></td>
<td width="25%"><input type="text" id="t1" name="t1" size="20" style="background-color:#6CF" /></td>
<td><label id="lab2">姓名</label></td>
<td width="25%"><input type="text" id="t2" name="t2" size="20"></td>
<td><label id="lab3">生日</label></td>
<td width="25%"><input type="text" id="t3" name="t3" size="20"></td>
</tr>
<tr><td><label id="lab4">血型</label></td>
<td>
<select id="sel1" name="sel1" style="width:20">
<option value="O" >O
<option value="A" >A
<option value="B" >B
<option value="AB" >AB
</select>
</td>
<td><label id="lab5">學歷</label></td>
<td>
<select id="sel2" name="sel2" style="width:20">
<option value="中學" >中學
<option value="專科" >專科
<option value="大學" >大學
<option value="" >研究所
</select>
</td>
<td><label id="lab6">性別</label></td>
<td>
<select id="sel3" name="sel3" style="width:20">
<option value="男" >男
<option value="女" >女
</select>
</td>
</tr>
<tr>
<td><label id="lab7>"婚姻</label></td>
<td><input type="radio" name="marrige" value="已婚" />已婚
<input type="radio" name="marrige" value="未婚" />未婚
</td>
<td><label id="lab8">興趣</label></td>
<td colspan="3">
<input type="checkbox" name="habby" value="爬山" />爬山
<input type="checkbox" name="habby" value="讀書" />讀書
<input type="checkbox" name="habby" value="打球" />打球
<input type="checkbox" name="habby" value="大自然" />大自然
</td>
</tr>
<tr><td colspan="6"><label id="lab9">專長</label></td></tr>
<tr>
<td colspan="6">
<textarea id="te1" name="te1" cols="90" rows="7"></textarea>
</td>
</tr>
<tr>
<td colspan="6">
<table width="100%">
<tr>
<td>
<input type="submit" id="s1" name="s1" value="傳送" />
</td>
<td align="right">
<input type="reset" id="r1" name="r1" value="清除" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</center>
</body>
</html>
沒有留言:
張貼留言