没有公告

 | 网站首页 | 头条 | 摄影 | 茶文化 | 技术 | 饮食 | 教育 | 军事 | 天昊电梯 | 
您现在的位置: 4567官网 >> 技术 >> 技术交流 >> DIV和CSS技术 >> 正文
CSS实例:横线样式的输入框
作者:4567软件… 文章来源:本站原创 点击数:265 更新时间:2004-11-30 17:25:50
在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要用一段简短的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>



免责声明:作品版权归所属媒体与作者所有! 本站刊载此文不代表同意其说法或描述,仅为提供更多信息。如果您认为我们侵犯了您的版权,请告知!本站立即删除。有异议请联系我们。
技术录入:admin    责任编辑:admin 
网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
| 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告