一颗赛艇——html+css登录页面

vlambda
2020-07-18

一颗赛艇——html+css登录页面

最近看了html和css,于是无聊的时候做了一个注册页面

第一次做感觉效果海星，就是代码渣了点。

一颗赛艇——html+css登录页面

代码：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>login</title> <link rel="stylesheet" type="text/css" href="pic.css"/> </head> <body>  <div id="mydiv1"> <div id="mydiv2"> <img src="logo2.png" width="300px" height="200px"><br> </div>  <div id="mydiv3"> <form action="localhost:8080/login" method="get"> <div id="namediv"> <h4/>姓名:&nbsp;&nbsp<input type="text" name="username"/> </div>  <div id="agediv"> <h4/>年龄:&nbsp;&nbsp<input type="text" name="userage"/> </div>  <div id="sexdiv"> <h4/>性别:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 男<input type="radio" name="sex" value="1"/> &nbsp;&nbsp;&nbsp;&nbsp;女<input type="radio" name="sex" value="1"/> </div>  <div id="pasdiv"> <h4/>密码:&nbsp;&nbsp<input type="password" name="userpassword"/> </div>  <div id="repasdiv"> <h4/>确认密码:&nbsp;&nbsp<input type="password" name="reuserpassword"/> </div>   <div id="emaildiv"> <h4/>邮箱:&nbsp;&nbsp<input type="email" name="useremail"/> </div>   <div id="submitdiv"> <input type="submit" value="注册"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"/> </div>  <div id="problemdiv"> <a href="www.baidu.com"><font color="yellow"/ size="4">遇到问题？请戳这里</a>          </div>       </form> </div> </div> </body></html>

css组件：

#mydiv1{ background-image: url(bg4.jpg); height: 100vh;}
#mydiv2{ margin-left:550px; border-radius: 15px 15px;}
#mydiv3{ background-image: url(bg5.jpg); width: 300px; height: 450px; position: inherit; margin-left: 556px; margin-top: 50px;  border-radius: 5px 5px;}
#namediv{ border: #000000; position:fixed; margin-top: 20px; margin-left: 40px; }
#agediv{ border: #000000; position: fixed; margin-top: 80px; margin-left: 40px;}
#sexdiv{ position: fixed; margin-top: 140px; margin-left: 40px;}
#pasdiv{ position: fixed; margin-top: 200px; margin-left: 40px;}
#repasdiv{ position: fixed; margin-top: 260px; margin-left: 10px;}
#emaildiv{ position: fixed; margin-top: 320px; margin-left: 40px;}
#submitdiv{ position: fixed; margin-top: 390px; margin-left: 40px;}
#problemdiv{ position: fixed; margin-top: 430px; margin-left: 40px;}