利用CSS制作背景变色的横向导航栏

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。