1.表單
頁面如下：
1 <html> 2 <head> 3 <title>注冊表單頁面</title> 4 </head> 5 <body> 6 <form name="form1" method="post" action=""> 7 <table width="500" border="1" align="center" cellpadding="0" cellspacing="2"> 8 <tr> 9 <td width="143" height="25">姓名：</td> 10 <td width="351"><input name="name" type="text" id="name" size="20"></td> 11 </tr> 12 <tr> 13 <td height="25">年齡：</td> 14 <td> 15 <select name="age" id="age"> 16 <option value="5" selected>5</option> 17 <option value="5" >6</option> 18 <option value="5" >7</option> 19 <option value="5" >8</option> 20 <option value="5" >9</option> 21 <option value="5" >10</option> 22 <option value="5" >11</option> 23 <option value="5" >12</option> 24 </select> 25 </td> 26 </tr> 27 <tr> 28 <td height="25">性別：</td> 29 <td> 30 <input name="radiobutton" type="radio" value="radiobutton" checked> 31 男 32 <input name="radiobutton" type="radio" value="radiobutton" > 33 女 34 </td> 35 </tr> 36 <tr> 37 <td height="25">家庭住址：</td> 38 <td><input name="textfie2" type="text" size="40"></td> 39 </tr> 40 <tr> 41 <td height="25">聯系電話：</td> 42 <td><input name="textfie3" type="text" size="15"></td> 43 </tr> 44 <tr> 45 <td height="25">滿意度評價：</td> 46 <td> 47 <input type="checkbox" name="checkbox" value="checkbox">非常滿意 48 <input type="checkbox" name="checkbox" value="checkbox">一般 49 <input type="checkbox" name="checkbox" value="checkbox">非常差 50 </td> 51 </tr> 52 <tr> 53 <td height="25">意見：</td> 54 <td> 55 <textarea name="textarea" cols="40" rows="10"></textarea> 56 </td> 57 </tr> 58 <tr> 59 <td align="center"> 60 <input type="submit" name="Submit1" value="提交"> 61 <input type="reset" name="Submit2" value="重置"> 62 </td> 63 </tr> 64 </table> 65 </form> 66 </body> 67 </html>
2.背景變換的導航菜單
2.1.菜單效果圖如下
當鼠標點擊菜單中的某一項時，此項的背景顏色發生變化，並且中間顯示目錄的長度變寬。
2.2 代碼如下
1 <html> 2 <head> 3 <title>一列寬度</title> 4 <meta charset="utf-8" /> 5 <style type="text/css"> 6 #button{ 7 width: 500px; 8 margin-top: 300px; 9 margin-left:800px; 10 font-family: 宋體; 11 font-size: 12px; 12 background-color:#000000; 13 } 14 #button ul{ 15 list-style: none; 16 margin: 0; 17 padding: 0; 18 border: none; 19 20 } 21 #button li{ 22 margin: 0; 23 border-bottom-width: 1px; 24 border-bottom-style: solid; 25 border-bottom-color:#FFEBCD; 26 } 27 #button li a{ 28 display: block; 29 padding: 5px 5px 5px 1em ; 30 background-color:azure; 31 color:#000000; 32 text-decoration: none; 33 width: 80%; 34 border-left-width: 50px; 35 border-right-width: 50px; 36 border-right-style: solid; 37 border-left-style: solid; 38 border-left-color: chocolate; 39 border-right-color: aqua; 40 } 41 html>body #button li a{ 42 width: auto; 43 } 44 #button li a:hover{ 45 background-color:#FFEBCD; 46 color:#000000; 47 border-left-width: 45px; 48 border-right-width: 45px; 49 border-right-style: solid; 50 border-left-style: solid; 51 border-left-color:aqua; 52 border-right-color: chocolate; 53 54 } 55 </style> 56 </head> 57 <body> 58 <div id="button"> 59 <ul> 60 <li><a href="#">首頁</a></li> 61 <li><a href="#">公司簡介</a></li> 62 <li><a href="#">最新動態</a></li> 63 <li><a href="#">客房介紹</a></li> 64 <li><a href="#">酒店服務</a></li> 65 <li><a href="#">休閑娛樂</a></li> 66 <li><a href="#">旅行社</a></li> 67 </ul> 68 </div> 69 70 </body> 71 </html>
代碼分析：
利用#button定義div，包括寬度，右邊框，填充的復合屬性，字體，字號，背景顏色和字體顏色。
利用#button ul定義div下的ul對象的樣式，包括列表屬性list-style，邊距margin，填充padding，邊框border屬性。
利用#button li 定義li對象的樣式。
利用#button li a定義定義對象下的鏈接文字樣式。
利用#button li a:hover定義li 對象下的鏈接文字激活樣式。
ul是css布局中使用的很廣泛的一種元素，主要用來描述列表的內容，每一個<ul></ul>中的內容為一個列表塊，快中每一個列表數據用<li></li>來描述。
3.背景變換的橫向導航欄
3.1.頁面效果如下
開始頁面
鼠標點擊時的頁面
3.2.代碼
1 <html> 2 <head> 3 <title>利用CSS制作橫向導航</title> 4 <meta charset="utf-8" /> 5 <style> 6 #n li{ 7 float: left; 8 font-family: 宋體; 9 font-size: 60px; 10 margin-top: 50px; 11 margin-left:100px; 12 } 13 #n li a{ 14 color:ivory; 15 text-decoration: none; 16 padding-top: 4px; 17 display: block; 18 width: 300px; 19 height: 80px; 20 text-align: center; 21 background-color:blue; 22 margin-left: 4px; 23 } 24 #n li a:hover{ 25 background-color:#00FFFF; 26 color:black; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="n"> 32 <ul> 33 34 <li><a href="#">首頁</a></li> 35 <li><a href="#">學校概況</a></li> 36 <li><a href="#">機構設置</a></li> 37 <li><a href="#">人才培養</a></li> 38 <li><a href="#">師資隊伍</a></li> 39 <li><a href="#">科學建設</a></li> 40 <li><a href="#">科學研究</a></li> 41 </ul> 42 43 </div> 44 </body> 45 </html>
代碼分析：首先定義了ul下的li對象，給#n li 指定了float：left屬性，所有的li對象都向左浮動，從而形成橫向的排列方式。
導航的關鍵在於a鏈接對象的樣式控制，在這里使用#n li a{}給li 下的每一個鏈接對象編寫了樣式。
display：block使得a鏈接對象的顯示方式由一段文本變為一個塊狀對象，這樣就可以使用CSS的外邊距，內邊距，邊框等屬性給a鏈接標簽上加一系列的樣式，通過display：block的應用，對a標簽元素設置寬度with,高度heigh，並在每一個a標簽對象你之間使用margin-left：2px形成左側的外邊距像素為2像素，
利用# n li a:hover定義定義鏈接文字激活后的狀態，利用background-color：設置激活后的背景顏色，利用color設置文字顏色。
4.改變按鈕的北京顏色和文字顏色
1.按鈕頁面如下：
2.代碼：
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>按鈕的背景顏色和字體</title> 5 <style type="text/css"> 6 input.ann{border: 1 solid ##D2691E; 7 color: #000000; 8 font-size: 50pt; 9 font-style:normal; 10 font-variant: normal; 11 font-weight: normal; 12 height: 100pt; 13 width: 300pt; 14 line-height: normal; 15 background-color:#D2691E; 16 } 17 18 </style> 19 </head> 20 <body> 21 <input type="submit" value="登錄" name="Sumbit" class="ann" /> 22 <input type="reset" value="取消" name="close" class="ann" /> 23 </body> 24 </html>
代碼分析：定義一個名為ann的按鈕樣式，設置邊框border為1，顏色，字號，字體風格和加粗都為正常，按鈕的高度height，行高為正常，背景顏色為background-color。