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. <input name="radiobutton" type="radio" value="radiobutton" >

  32. </td>
  33. </tr>
  34. <tr>
  35. <td height="25">家庭住址:</td>
  36. <td><input name="textfie2" type="text" size="40"></td>
  37. </tr>
  38. <tr>
  39. <td height="25">联系电话:</td>
  40. <td><input name="textfie3" type="text" size="15"></td>
  41. </tr>
  42. <tr>
  43. <td height="25">满意度评价:</td>
  44. <td>
  45. <input type="checkbox" name="checkbox" value="checkbox">非常满意
  46. <input type="checkbox" name="checkbox" value="checkbox">一般
  47. <input type="checkbox" name="checkbox" value="checkbox">非常差
  48. </td>
  49. </tr>
  50. <tr>
  51. <td height="25">意见:</td>
  52. <td>
  53. <textarea name="textarea" cols="40" rows="10"></textarea>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td align="center">
  58. <input type="submit" name="Submit1" value="提交">
  59. <input type="reset" name="Submit2" value="重置">
  60. </td>
  61. </tr>
  62. </table>
  63. </form>
  64. </body>
  65. </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:;
  17. padding:;
  18. border: none;
  19.  
  20. }
  21. #button li{
  22. margin:;
  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。

利用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. MVC学生管理系统-阶段IV(修改学生信息)

    项目源码 :https://download.csdn.net/download/weixin_44718300/11091042 前期准备,主体框架, 学生列表显示  请看阶段一文章 添加学生信息 ...

  2. hihocoder:#1082 : 然而沼跃鱼早就看穿了一切(用string)

    题目是这样的: 描述 fjxmlhx每天都在被沼跃鱼刷屏,因此他急切的找到了你希望你写一个程序屏蔽所有句子中的沼跃鱼("marshtomp",不区分大小写).为了使句子不缺少成分, ...

  3. vue实现CheckBox与数组对象绑定

    实现需求: 实现一个简易的购物车,页面的表格展示data数据中的一个数组对象,并提供选中商品和全选商品checkbox复选框,页面实时显示选中商品的总金额: 分析: 1:使用v-for循环渲染arra ...

  4. matplotlib画图--Line Color

    1.线形 2.标记 3.颜色

  5. POJ 1149:PIGS 网络流经典题

    PIGS Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18345   Accepted: 8354 Description ...

  6. 利用mysecureshell搭建sftp服务

    1.下载对应的mysecureshell-1.33-1.x86_64.rpm包 2.安装mysecureshell-1.33-1.x86_64.rpm 3.添加ftp用户 useradd ftp 4. ...

  7. 目录服务不能与此服务器复制,因为距上一次与此服务器复制的时间已经超过了 tombstone 生存时间。

    1.PDC数据正常 2.其他DC无法复制,报如下错误:目录服务不能与此服务器复制,因为距上一次与此服务器复制的时间已经超过了 tombstone 生存时间. 3.直接强制复制即可 repadmin / ...

  8. 斐波那契数列 yield 和list 生成

    def fab_demo4(max): a,n,b = 0,0,1 while n < max: yield b # 生成器走到这一步返回b,需要再次调用才能继续执行 a,b = b,a+b n ...

  9. Redis的数据结构和对象。

    一.简单动态字符串(simple dynamic string--SDS) Redis使用SDS表示字符串值,键值对都用SDS实现.SDS中的字符数组buf以空字符串结尾,好处是可以直接重用一部分C字 ...

  10. 解决 urxvt “unknown terminal type.”

    登录到远程服务器上后,有时执行某些命令会提示unknown terminal type. 这是因为远程ssh不支持urxvt,执行 export TERM=xterm-256color 或者在远程主机 ...