站长资源网页制作 CSS制作用户登录和用户注册的用户体验表单 整理:jimmy2024/10/8浏览2次 站长资源 网页制作 网盘链接 云盘下载 简介关于用CSS制作符合标准的表单前面我们已经看过代码,这里是又一个例子。用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" content="text/html; charset=gb2312" /> <title>Form demo jb51.net</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> 提示:您可以先修改部分代码再运行 上一篇:左上角图片文字环绕在图片右侧 下一篇:鼠标激活显示背景色网页特效CSS代码 最新资源 群星.2024-繁花电视剧原声带3CD【环球】【 江希文.1994-伝说少女(饿狼伝说动画原声大 洪荣宏.2010-上爱的人【华特】【WAV+CUE】 《大牌国语情歌 经典再现 深情对唱 2CD》 《陈百强粉红色的一生精选 3CD》[FLAC/分 《丁当 20首重量级歌曲 Fu Good 下一站天 歌莉雅.2012-My.Voice.Story【环星】【FL 群星.1993-一曲成名·青春无悔【飞碟】【W 刘德华.2000-爱无知(金装版)【NEWMELODY】 许巍《时光漫步》1CD[FLAC/分轨][804.3MB 一句话新闻一文看懂荣耀MagicBook Pro 16荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?