利用基本的html+css逻辑实现一个简易的注册页面
编辑
编辑
源码如下:
<html> <style> body{ background-image:url("/i/paper.jpg"); } </style> <body> <h1 style="background-color:hsl(39, 100%, 50%)" align=center>注 册</h1> <style> div{ text-align:center; color:black; font-size:18; font-weight:900; } .button { background-color:#555555; border-radius: 4px; transition-duration: 0.4s; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; cursor: pointer; } .button1:hover { background-color: #4CAF50; color: white; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e7e7e7; background-color: #f3f3f3; } li { float: left; } li a { display: block; color: #666; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #ddd; } li a.active { color: white; background-color: #4CAF50; } input[type=text1] { width: 30%; padding:20px ; margin:10px 0; box-sizing: border-box; text-align:left; } </style> <ul> <li><a class="active" href="###">首页</a></li> <li><a href="###">公告</a></li> <li><a href="###">客服</a></li> <li><a href="###">关于我们</a></li> <li style="float:right"><a class="active" href="###">退出</a></li> </ul> <script> window.alert("欢迎注册,编程猿!"); </script> <div> <form method="get" action="login.jsp"> 设置用户名:<br> <input type="text" name="beginNum" value="请输入用户名" maxlength="10" size="40" ><br><br> 性别: <input type="radio" name="sexy" value="男" checked="true">男 <input type="radio" name="sexy" value="女" >女<br><br> 设置密码:<br> <input type="text" name="endNum" value="请输入密码" maxlength="10" size="40" ><br><br> 确认密码:<br> <input type="text" name="endNum" value="请输入密码" maxlength="10" size="40" ><br><br> 学历: <select > <option value="volvo">初中</option> <option value="saab">高中</option> <option value="opel">专科</option> <option value="audi">本科</option> </select><br> 就业方向: <input type="radio" name="subject" value="java" checked="true">Java后端 <input type="radio" name="subject" value="web" >web前端 <input type="radio" name="subject" value="C#" >C# <input type="radio" name="subject" value="python">python<br><br> 期望薪资: <input list="money" name="money"> <datalist id="money"> <option value="5k以上"> <option value="8-10k"> <option value="10k-12k"> <option value="12-15k"> <option value="15k以上"> </datalist> <input type="submit"><br> 备注: <input type="text1" name="beginNum" value="说点什么吧....." maxlength="1000" size="40" ><br><br> <button class="button button1" type="button" onclick="alert('注册成功')" align=center>点击完成注册</button> <input class="button button1" type="reset" value="退出"> </div> </form> </body> </html>
如果觉得起到帮助,帮忙一键三连哦~~~