返回顶部

[文摘] CSS实例:横线样式的输入框

[复制链接]
awagink 显示全部楼层 发表于 2008-4-19 13:00:04 |阅读模式 打印 上一主题 下一主题
在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要用一段简短的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>

  实现效果简洁清爽。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

纳速健身网成立于2006年8月,是国内优秀健身运动网站,现拥浏览人数超30万。网站是集养生、武术、太极拳和健身气功等多种健身项目于一体的多功能交流平台。平台提供大量优质的教学视频、伴奏音乐(太极拳晨练音乐,广场舞音乐,健身气功音乐)、图文教程、运动科普和经验分享,为健身爱好者提供完善的运动指导平台。
  • 纳速QQ群乙:151815303
  • 纳速QQ群丙:79104490
  • 微信交流群:微信好友搜索【nasuwang】加小纳微信进群交流健身知识,备注【纳速】
  •                     或者扫描页面底部右侧二维码添加小纳微信>>>
  • 微信公众号

  • 微信群客服交流

  • Copyright © 2006-2021, 纳速健身网. | | 辽ICP备13002388号-1 辽公安网备21050202000005号公安网备号 纳速武术-乙 QQ