您的位置:软件 > 设计在线 > 网页陶吧 > 技术平台 > CSS样式表 > 正文
CSS实例：横线样式的输入框
[文章信息]
作者:
时间:2002-09-27
出处:
责任编辑:
[文章导读]
网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线，很多朋友对此很感兴趣
advertisement
热点推荐
· 闪客五周年作品展：灵光1999
· 10.18精选 Win2003共享打印
· Messenger Plus!新功能体验
· 专业的魅力：图层的使用
· 金山文字2003中对文档进行页面设置
[正文]
　　在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线，很多朋友对此很感兴趣。其实要实现这样的效果并不困难，我们只要用一段简短的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>
　　实现效果简洁清爽。 
 　　
·"WAP天极之IT新闻资讯，50万元等你拿"    ·天极WAP之游戏狂图，50万元等你下载


发表评论推荐给朋友我想参加相关培训打印我对此感兴趣订阅电子杂志
相关内容阅读排行榜
  • 闪客五周年作品展：灵光1999
  • 10.18精选 Win2003共享打印
  • [配置推荐]7000元HL2游戏配置
  • FPS顶级秘密武器 Aqua3鼠标垫
  • Messenger Plus!新功能体验
  • 扶不起的国足 《PSOBB》足球赛
  • 另类魔兽争霸简史
  • 魔兽亡灵族历代主流战术回顾
    • Advertisement

    天极无线
    待机彩图 　　　>>更多
    多彩动画 　　　>>更多
    美妙和弦 　　　>>更多
    ◎天使在唱歌
    ◎壁虎漫步
    ◎PrettyBoy
    ◎LoveLoveLove
    ◎我是你的小小狗
    ◎单身情歌
    ◎十面埋伏
    ◎祝酒歌
    ◎回心转意
    ◎波斯猫
    ◎太委屈    		 S.H.E
    潘玮柏
    M2M
    蔡依林
    阿牛
    林志炫
    陈弈迅
    刀郎
    黑龙
    S.H.E
    陶晶莹
    情人玫瑰坊
    音乐风云
    新片速递
    神秘测试
    都市约会
    ·天极彩信天天精彩
    ·图铃梦工厂下载无限！
    ·找寻童真，卡通专题
    ·夏日激情交友社区！
    ·星座运程，预测人生

    CSEEK搜索