您的位置:绿色软件网站建设 -> Html/CssCSS实例:横线样式的输入框
CSS实例:横线样式的输入框
发布于:2007-2-19 14:44:16来源:不详阅读次数:TAG列表:暂时还没有tag
    在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要用一段简短的CSS代码控制好表单输入框的样式即可。

   示例如下:

   请输入您的用户名:


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


  <style type="text/css">      </style>

  样式表中代码解释如下:

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


  下面让我们一起来看一个应用实例:         <title>横线式输入框</title>   <style type="text/css">      </style>           隐藏的边框的输入框:  <p>用户名:<input type="text" name="name" class=line>     </p>      
  实现效果简洁清爽。
复制地址发给您的朋友阅读!

查看更多评论

100分 85分 70分 55分 40分 25分 10分 0分 用户名字: