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. idea修改web项目的访问路径

    转 新建好了项目发现项目只能以localhost:8080这样的访问路径访问到主页,也就是index.jsp 那么之前我用eclipse新建的项目都是localhost:8080/xxx(项目名称)来 ...

  2. MyBatis整体架构

    Mybatis整体架构 基础支持层 反射模块 Java中的反射很强大,但是还是需要封装的.MyBatis专门提供了反射模块,对元素的反射进行了封装,提供了简洁的API,对反射进行了优化,例如缓存了类的 ...

  3. Swift字符串截取与Range使用

    1.String.Index String.Index表示一个位置,使用String与String.Index可以获取该位置的Character let str = "123456789&q ...

  4. Jenkins-在CentOS7 上安装配置

    Jenkins-在CentOS7 上安装配置 1.安装JDK yum install -y java 2.安装jenkins 方法1:添加Jenkins库到yum库,Jenkins将从这里下载安装. ...

  5. Linux文件和目录的属性及权限

    Linux文件和目录的属性及权限讲解 文字解释: 第一列:inode索引节点 第二列:文件类型及权限 第三列:硬链接个数 第四列:文件或目录所属的用户(属主) 第五列:文件或目录所属的用户所归属的组( ...

  6. Android进阶——Android事件分发机制之dispatchTouchEvent、onInterceptTouchEvent、onTouchEvent

    Android事件分发机制可以说是我们Android工程师面试题中的必考题,弄懂它的原理是我们避不开的任务,所以长痛不如短痛,花点时间干掉他,废话不多说,开车啦 Android事件分发机制的发生在Vi ...

  7. mysql第四篇：数据操作之多表查询

    mysql第四篇:数据操作之多表查询 一.多表联合查询 #创建部门 CREATE TABLE IF NOT EXISTS dept ( did int not null auto_increment ...

  8. JavaBean和json数据之间的转换（一）简单的JavaBean转换

    1.为什么要使用json? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,因为其高性能.可读性强的原因,成为了现阶段web开发中前后端交互数据的主要数据 ...

  9. 寒假day21

    标签模块报了一些错误,暂时没有找出原因.刷了一些面试题

  10. [SUCTF 2019]EasyWeb

    0x00 知识点 本题知识量巨大,把我给看傻了..盯着网上师傅们的博客看了好久.. 知识点1 构造不包含数字和字母的webshell 思路来自p牛 参考链接: https://www.leaveson ...