• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS 制作漂亮的网页表单

CSS 制作漂亮的网页表单

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含漂亮,网页表单等相关知识,佚名 希望在学习及工作中可以帮助到您

 

代码如下:


<!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" content="text/html; charset=gb2312" /> <title>Form demo</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> </body> </html>
提示:您可以先修改部分代码再运行

您可能想查找下面的文章:

  • CSS3制作漂亮的照片墙的实现代码
  • 纯CSS3制作漂亮带动画效果的主机价格表
  • Css3+Js制作漂亮时钟(附源码)
  • CSS 制作漂亮的网页表单

相关文章

  • 2017-08-06LESSCSS让CSS使用起来更加灵活成就CSS动态化
  • 2017-08-14CSS:line-height:150%与line-height:1.5的真正区别是什么?
  • 2017-08-06纯CSS实现超简单的二级下拉导航菜单代码
  • 2017-08-06IE中关于使用innerHTML加入HTML代码的问题
  • 2017-08-06css中position属性使用详解
  • 2017-08-06纯CSS实现的菱形导航菜单效果代码
  • 2017-08-06CSS3打造百度贴吧的3D翻牌效果示例
  • 2017-08-06PNG背景透明在网页设计中的运用
  • 2017-08-06关于clearBoth在GOOGLE Chrome中的问题解决方法
  • 2017-08-06魔幻般冒泡背景的CSS3按钮动画

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
    • clip 剪裁矩形实现代码
    • css表头固定样式的方法
    • CSS display:block在Firefox下显示布局错乱问题
    • CSS3制作漂亮的照片墙的实现代码
    • 利用CSS3实现文本框的清除按钮相关的一些效果
    • CSS3——齿轮转动关键代码
    • css渐变色彩 省略标记 嵌入字体 文本阴影全面了解
    • div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
    • IE6中有一个BUG叫border边框断线现象(border边框部分消失)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有