游客:
注册
|
登录
|
帮助
网友俱乐部
»
网页制作
»
HTML/CSS教程
» CSS实例:横线样式的输入框
网友生活网
|
网友学堂
如何获得金币?
诚招斑竹
IP归属地查询 PR查询 收录查询 whois查询
免费超短2级域名,your.jpy.cc
火狐浏览器,网上冲浪更快更爽更惬意
注册亚洲交友中心,找个人来同居吧!
7CODE查杀恶意代码,守护您的电脑
‹‹ 上一主题
|
下一主题 ››
投票
交易
悬赏
活动
打印
|
推荐
|
订阅
|
收藏
标题: CSS实例:横线样式的输入框
帝王
荣誉会员
UID 67224
精华
4
积分 64829
帖子 33564
威望 -6
金币 31601
热心 139
阅读权限 50
注册 2007-7-29
状态 离线
#1
使用道具
发表于 2008-2-1 22:25
资料
个人空间
短消息
加为好友
CSS实例:横线样式的输入框
在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要用一段简短的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>
实现效果简洁清爽。
[广告]
免费域名(Free Subdomain)
免费空间(Free hosting)
PR查询(Google Pagerank)
投票
交易
悬赏
活动
控制面板首页
编辑个人资料
积分交易
公众用户组
好友列表
个人空间管理
基本概况
流量统计
客户软件
发帖量记录
论坛排行
主题排行
发帖排行
积分排行
在线时间
管理团队
管理统计
当前时区 GMT+8, 现在时间是 2008-8-22 06:51
信产部ICP备案:
京ICP备05066424号
北京市公安局网监备案:1101050648号
Powered by
Discuz!
5.5.0
TOP
清除 Cookies
-
联系我们
-
网友俱乐部
-
Archiver
-
WAP