首页  |  论坛  |  资讯  |  新知  |  互助吧  |  上网指南  |  站长学院  |  商务应用  |  每日新知  |  网络组建  |  PHP开源  |  时代观察  |  电脑教室  |  互联网创业
图片  |Google|  专题  |  春运  |  新发现  |  教你一招  |  病毒安全  |  源码下载  |  下载频道  |  数字产品  |  java开源  |  网络文明  |  网站动态  |  博客加油站
  栏 目 导 航
DIV+CSS
Dreamwaver
Flash
HTML
更多
配色
特效
CSS
XHTML
  
CSS实例:横线样式的输入框
编辑整理:52net.com  最后更新  2006-01-15

    在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要用一段简短的CSS代码控制好表单输入框的样式即可。

   示例如下:

   请输入您的用户名:


  下面我们就来看看这段实现效果的css代码。它主要运用了表格边框的样式控制,将左、上、右边框设置为none,只剩下下边框即可。


  <style type="text/css">   <!--   .line{     BORDER-LEFT-STYLE: none;     BORDER-RIGHT-STYLE: none;     BORDER-TOP-STYLE: none   }   -->   </style>

  样式表中代码解释如下:

  “BORDER-LEFT-STYLE:none”: 隐藏左边框
  “BORDER-RIGHT-STYLE: none”: 隐藏右边框
  “BORDER-TOP-STYLE: none”: 隐藏上边框
  “BORDER-bottom-STYLE: none”: 隐藏下边框。


  下面让我们一起来看一个应用实例:   <html>   <head>   <title>横线式输入框</title>   <style type="text/css">   <!--   .line{     BORDER-LEFT-STYLE: none;     BORDER-RIGHT-STYLE: none;     BORDER-TOP-STYLE: none ;   }   -->   </style>   <!--注:此段为css代码,你还可以在这里设置出其他的样式效果-->   </head>   <body bgcolor="#FFFFFF" text="#000000">   隐藏的边框的输入框:   <p>用户名:<input type="text" name="name" class=line>    <!-- 注:class=line 这条语句将你预设的css应用在表单中 -->   </p>   </body>   </html>
  实现效果简洁清爽。 

 1、本站文章部分来源于互联网,转载是为了更好信息共享。如果侵犯了您的合法权益,请及时  通知我们,我们将第一时间删除。
 2、52net阶梯网力倡IT文化,崇尚互联共享,欢迎各种媒体转载我们的原创文章,转载请注明  出处(包括作者):52net阶梯网(www.52net.com)
相关文章
 
热点文章
  
推荐文章
关于我们 | 免责说明 | 人才招聘 | 给我留言 | 联系我们 | 友情链接 | 网站地图
Copyright @ 2006-2008 52net.com. All rights reserved. 52net阶梯网 版权所有
京ICP备05070331号