模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
表单按钮特效代码
>
收藏
分享
查看评论
表单按钮
演示
一个清新的CSS表单布局_表单按钮特效
查看演示效果
特效Tag:
CSS表单
添加
一个清新的CSS表单布局,直接复制代码就能用,还能研究一下CSS布局的知识,应该很不错哦。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>CSS表单</title> <style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#666666; background:#fff; text-align:center; } * { margin:0; padding:0; } a { color:#1E7ACE; text-decoration:none; } a:hover { color:#000; text-decoration:underline; } h3 { font-size:14px; font-weight:bold; } pre,p { color:#1E7ACE; margin:4px; } input, select,textarea { padding:1px; margin:2px; font-size:11px; } .buttom{ padding:1px 10px; font-size:12px; border:1px #1E7ACE solid; background:#D0F0FF; } #formwrapper { width:450px; margin:15px auto; padding:20px; text-align:left; border:1px solid #A4CDF2; } fieldset { padding:10px; margin-top:5px; border:1px solid #A4CDF2; background:#fff; } fieldset legend { color:#1E7ACE; font-weight:bold; padding:3px 20px 3px 20px; border:1px solid #A4CDF2; background:#fff; } fieldset label { float:left; width:120px; text-align:right; padding:4px; margin:1px; } fieldset div { clear:left; margin-bottom:2px; } .enter{ text-align:center;} .clear { clear:both; } --> </style> </head> <body> <div id="formwrapper"> <h3>已注册用户登录</h3> <form action="" method="post" name="apLogin" id="apLogin"> <fieldset> <legend>用户登录</legend> <div> <label for="Name">用户名</label> <input type="text" name="Name" id="Name" size="18" maxlength="30" /> <br/> </div> <div> <label for="password">密码</label> <input type="password" name="password" id="password" size="18" maxlength="30" /> <br/> </div> <div class="cookiechk"> <label> <input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="选择是否记录您的信息">记住我</a></label> <input name="login791" type="submit" class="buttom" value="登录" /> </div> <div class="forgotpass"><a href="#">您忘记密码?</a></div> </fieldset> </form> <br/> <h3>未注册创建帐户</h3> <form action="" method="post" name="apForm" id="apForm"> <fieldset> <legend>用户注册</legend> <p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong> 在您注册之前请先认真阅读服务条款.</p> <div> <label for="Name">用户名</label> <input type="text" name="Name" id="Name" value="" size="20" maxlength="30" /> *(最多30个字符)<br/> </div> <div> <label for="Email">电子邮箱</label> <input type="text" name="Email" id="Email" value="" size="20" maxlength="150" /> *<br/> </div> <div> <label for="password">密码</label> <input type="password" name="password" id="password" size="18" maxlength="15" /> *(最多15个字符)<br/> </div> <div> <label for="confirm_password">重复密码</label> <input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" /> *<br/> </div> <div> <label for="AgreeToTerms">同意服务条款</label> <input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" /> <a href="#" title="您是否同意服务条款">先看看条款?</a> * </div> <div class="enter"> <input name="create791" type="submit" class="buttom" value="提交" /> <input name="Submit" type="reset" class="buttom" value="重置" /> </div> <p><strong>* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.<br/> * 这些条款可能在未经您同意的时候进行修改.</strong></p> </fieldset> </form> </div> <p> <fieldset> <legend>sdf</legend> </fieldset> </p> </body> </html>
所属频道:
表单按钮特效
/
更新时间:2013-01-13
[收藏]
[报错]
[返回列表]
相关
表单按钮特效
:
又一个带描述的表单
可自由移动位置的导航条
页面转跳。跟本站的教学文章中的那些转到第几页一样的
带Checkbox的列表框
提供四种打开新窗的形式
自动复制代码
方便登录各种管理页面以及任何EMAIL量身定做!
QQ分类搜索代码
查找表格的内容
一个带描述的表单
常用email检验函数
file框模拟新解
表单按钮特效Rss订阅
特效代码搜索
表单按钮特效推荐
让Select列表各项上移和下移的Js代码
JavaScript判断输入框中是否包含中文
复选框单选、多选的实现
Js控制显示、隐藏文本框中的密码
上传图片的高宽
CSS立体按钮效果
点击按钮后加载进度条
JavaScript常规性表单判断实例
JS判断密码强度的代码
JavaScript文本域字体选择功能
猜你也喜欢看这些
全中文日期显示
JavaScript获取当前时间,含日期和星期几
生肖计算器
JS计时器(非倒计时)
日历和时间钟
网页倒计时
鼠标悬停时,显示当前日期
跟随时钟
在状态栏显示时间
当你打开页面时根据当前的时间出现相应的问候语
相关链接:
复制本页链接
|
搜索一个清新的CSS表单布局
特效说明:
表单按钮模板
-
一个清新的CSS表单布局
。