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。

利用CSS制作背景变色的横向导航栏的更多相关文章

  1. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  2. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  3. 利用CSS制作脸书

    很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...

  4. html+css写出响应式侧边导航栏

    html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...

  5. div+css+position实现简单的纵向导航栏

    完成效果: 这应该是很简单的纵向导航栏了. OK,进入正题 首先,我们看上面的效果图可以分析得出,要实现这个效果需要用到的技术点 1.hover 2.position 3.布局 我认为在这个效果的实现 ...

  6. HTML&CSS基础学习笔记1.11—导航栏

    上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...

  7. 利用css制作横向和纵向时间轴

    Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...

  8. 利用CSS制作三角形

    在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果.   首先,我们来定义一个 ...

  9. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

随机推荐

  1. BZOJ：3231: [Sdoi2008]递归数列

    题解: 矩阵乘法,在矩阵中构造当前前缀和: 注意:for(int/long long ;;); #include<iostream> #include<cstdio> #inc ...

  2. mybatis环境搭建（eclipse,idea）

    基于java配置SSM,eclipse 新建maven,web项目 .... 项目结构: jar包 pom.xml spring和DispatcherServlet上下文 public class D ...

  3. php语言注意点

    PHP大小写问题 http://www.jb51.net/article/38579.htm 推荐大家始终坚持“大小写敏感”,遵循统一的代码规范.1. 变量名区分大小写 2. 函数名.方法名.类名不区 ...

  4. swift中block的使用

    在OC中习惯用block来传值,而swift中,block被重新定义了一下,叫闭包: 使用的技巧:谁定义谁传值:   案例使用A.B控制器: 1~4步在B中执行,最后在A中执行: - B控制器: 1- ...

  5. Web前端工程师需要注意的开发规范有哪些？

    从事web前端开发工作我们就需要了解web前端开发的规范,这样才能保证高效快速的完成工作,本篇就和大家分享一下web前端开发工程师需要注意的web前端开发规范有哪些,希望对小伙伴们有所帮助. web前 ...

  6. 二分+半平面交——poj1279

    /* 二分距离,凸包所有边往左平移这个距离,半平面交后看是否还有核存在 */ #include<iostream> #include<cstring> #include< ...

  7. MySQL笔记 02

    SQL对表中数据的CRUD操作: 插入数据: insert into 表名 (列名1,列名2,....) values (值1,值2,....): 插入部分: insert into xuesheng ...

  8. Nginx系列p3：实现一个具有缓存功能的反向代理服务器

    今天我们利用 OpenResty 来实现一个反向代理服务器 step1:首先下载安装 OpenResty # 下载安装 OpenResty # 默认安装在 /usr/local 目录下,可在编译时指定 ...

  9. springboot-jar-web

    预览 与springboot-jar的区别是: 1.pom.xml 将 <dependency> <groupId>org.springframework.boot</g ...

  10. c++ 模板联系4

    //定义类成员函数特化类型 #include "stdafx.h" #include <iostream> using namespace std; typedef f ...