1.表单
页面如下：
<html>
<head>
<title>注册表单页面</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="500" border="1" align="center" cellpadding="0" cellspacing="2">
<tr>
<td width="143" height="25">姓名：</td>
<td width="351"><input name="name" type="text" id="name" size="20"></td>
</tr>
<tr>
<td height="25">年龄：</td>
<td>
<select name="age" id="age">
<option value="5" selected>5</option>
<option value="5" >6</option>
<option value="5" >7</option>
<option value="5" >8</option>
<option value="5" >9</option>
<option value="5" >10</option>
<option value="5" >11</option>
<option value="5" >12</option>
</select>
</td>
</tr>
<tr>
<td height="25">性别：</td>
<td>
<input name="radiobutton" type="radio" value="radiobutton" checked>
男
<input name="radiobutton" type="radio" value="radiobutton" >
女
</td>
</tr>
<tr>
<td height="25">家庭住址：</td>
<td><input name="textfie2" type="text" size="40"></td>
</tr>
<tr>
<td height="25">联系电话：</td>
<td><input name="textfie3" type="text" size="15"></td>
</tr>
<tr>
<td height="25">满意度评价：</td>
<td>
<input type="checkbox" name="checkbox" value="checkbox">非常满意
<input type="checkbox" name="checkbox" value="checkbox">一般
<input type="checkbox" name="checkbox" value="checkbox">非常差
</td>
</tr>
<tr>
<td height="25">意见：</td>
<td>
<textarea name="textarea" cols="40" rows="10"></textarea>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Submit1" value="提交">
<input type="reset" name="Submit2" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
2.背景变换的导航菜单
2.1.菜单效果图如下
当鼠标点击菜单中的某一项时，此项的背景颜色发生变化，并且中间显示目录的长度变宽。
2.2 代码如下
<html>
<head>
<title>一列宽度</title>
<meta charset="utf-8" />
<style type="text/css">
#button{
width: 500px;
margin-top: 300px;
margin-left:800px;
font-family: 宋体;
font-size: 12px;
background-color:#000000;
}
#button ul{
list-style: none;
margin:;
padding:;
border: none; }
#button li{
margin:;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#FFEBCD;
}
#button li a{
display: block;
padding: 5px 5px 5px 1em ;
background-color:azure;
color:#000000;
text-decoration: none;
width: 80%;
border-left-width: 50px;
border-right-width: 50px;
border-right-style: solid;
border-left-style: solid;
border-left-color: chocolate;
border-right-color: aqua;
}
html>body #button li a{
width: auto;
}
#button li a:hover{
background-color:#FFEBCD;
color:#000000;
border-left-width: 45px;
border-right-width: 45px;
border-right-style: solid;
border-left-style: solid;
border-left-color:aqua;
border-right-color: chocolate; }
</style>
</head>
<body>
<div id="button">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">客房介绍</a></li>
<li><a href="#">酒店服务</a></li>
<li><a href="#">休闲娱乐</a></li>
<li><a href="#">旅行社</a></li>
</ul>
</div> </body>
</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.代码
<html>
<head>
<title>利用CSS制作横向导航</title>
<meta charset="utf-8" />
<style>
#n li{
float: left;
font-family: 宋体;
font-size: 60px;
margin-top: 50px;
margin-left:100px;
}
#n li a{
color:ivory;
text-decoration: none;
padding-top: 4px;
display: block;
width: 300px;
height: 80px;
text-align: center;
background-color:blue;
margin-left: 4px;
}
#n li a:hover{
background-color:#00FFFF;
color:black;
}
</style>
</head>
<body>
<div id="n">
<ul> <li><a href="#">首页</a></li>
<li><a href="#">学校概况</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">人才培养</a></li>
<li><a href="#">师资队伍</a></li>
<li><a href="#">科学建设</a></li>
<li><a href="#">科学研究</a></li>
</ul> </div>
</body>
</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.代码：
<html>
<head>
<meta charset="utf-8" />
<title>按钮的背景颜色和字体</title>
<style type="text/css">
input.ann{border: 1 solid ##D2691E;
color: #000000;
font-size: 50pt;
font-style:normal;
font-variant: normal;
font-weight: normal;
height: 100pt;
width: 300pt;
line-height: normal;
background-color:#D2691E;
} </style>
</head>
<body>
<input type="submit" value="登录" name="Sumbit" class="ann" />
<input type="reset" value="取消" name="close" class="ann" />
</body>
</html>
代码分析：定义一个名为ann的按钮样式，设置边框border为1，颜色，字号，字体风格和加粗都为正常，按钮的高度height，行高为正常，背景颜色为background-color。