html写的简易表单注册界面,先来看界面截图:
表单在整个网页设计中都会碰到,比如注册界面,会有一些提示的样子,具体的内容可以参考12课表单和元素
来看代码部分,主要是body内容:
<ul> <li> <span>用户名:</span> <input type="text" placeholder="请输入英文字母或者汉字" /> <p class="p1">用户名必须为数字+字母,至少8位以上! <i class="bk"></i> </p> </li> <li> <span>密码:</span> <input type="password" placeholder="1234567**" /> <p class="p2">请不要输入电话或者生日作为密码! <i class="bk"></i> </p> </li> <li> <span>确认密码:</span> <input type="password" placeholder="1234567**" /> <p class="p3">请再次输入你的密码确认! <i class="bk"></i> </p> </li> <li> <span>email:</span> <input type="text" placeholder="362647423@qq.com" /> <p class="p4">电子邮件作为后期找回密码的重要依据 <i class="bk"></i> </p> </li> <li> <span>昵称:</span> <input type="text" placeholder="小熊" /> <p class="p5">请输入一个昵称作为你的网名 <i class="bk"></i> </p> </li> <li> <a>我有账户,我要登录</a> <a style="width:80px">注册</a> </li> </ul>
目前是把整个界面写死的,在整个内容的部分中。每一段都有对应的文字提示,在鼠标放上去后在把对应位置的内容进行显示
a{text-decoration:none;} img{border:none;} ul{ width:440px; height:480px; padding:20px; margin:60px auto; border-radius:6px; border:1px solid #aaa; } li{ position:relative; width:400px; height:60px; margin:20px; } p{ display:none; height:30px; text-indent:5px; line-height:30px; font-size:14px; color:#fff; padding:8px; border-radius:6px; background:#1e84bb; } .bk{ position:absolute; top:9px; left:-30px; width:0px; height:0px; border-top:15px solid transparent; border-left:15px solid transparent; border-bottom:15px solid transparent; border-right:15px solid #1e84bb; } .p1{ position:absolute; right:-250px; top:0px; } .p2{ position:absolute; right:-228px; top:0px; } .p3{ position:absolute; right:-172px; top:0px; } .p4{ position:absolute; right:-252px; top:0px; } .p5{ position:absolute; right:-196px; top:0px; } li:hover p{ display:block; } input:focus{ border:2px solid #55bcee; } span{ display:inline-block; width:70px; height:60px; text-align:right; font-size:16px; } input{ text-indent:15px; width:320px; height:60px; border:1px solid #aaa; border-radius:6px; } a{ display:inline-block; height:40px; line-height:40px; font-size:16px; float:right; text-align:center; background:#1e84bb; border-radius:5px; margin-right:20px; padding:0px 10px; }
最开始吧文字部分display:none;不显示,然后hover的时候在改成display:block;输入框的修饰部分就加了一个border-radius圆角修饰。属于比较接单的表单界面
发表评论