HTML中登录界面的编写
效果展示：
代码展示：
导航
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
</head>
<body>
<ul>
<li><a href="login/demo01.html">001</a></li>
<li><a href="login/demo02.html">002</a></li>
</ul>
</body>
</html>
纯HTML：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<p><a href="../index.html">返回</a></p>
登录注册界面
<div>
<form action="demo01.html" method="post">
<p>
账号：<input type="text" name="username">
</p>
<p>
密码：<input type="password" name="password">
</p>
<p>
<input type="reset" value="重置"><input type="submit" value="提交">
</p>
</form>
</div>
</body>
</html>
HTML+CSS：
对于CSS部分的代码，可以另创建一个文件（.css结尾的文件），然后在html文件中引入css文件即可，使用外部的css文件，和下文中的在一个文件中的效果是一样的。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<style>
*{
padding: 0;
margin: 0;
text-decoration: none;
}
body{
background-color: antiquewhite;
}
#main,#left{
height: 800px;
}
#main{
width: 1500px;
background-color: aquamarine;
margin: 30px auto 0;
/*background-image: url("../img/01.jpg");*/
}
#left{
width: 800px;
/*background-color: #699ef5;*/
float: left;
background-image: url("../img/01.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
h1{
font-size: 50px;
}
#right div h1{
text-align: left;
text-align: center;
margin-bottom: 26px;
}
#right{
float: right;
width: 600px;
height: 600px;
background-color: #6fff1c;
padding: 100px 50px 100px;
}
#right div{
background-color: #dcdbed;
width: 500px;
height: 400px;
padding: 60px 0px 40px 70px;
font-size: 30px;
border-radius: 30px;
}
#right div form p input{
width: 300px;
height: 30px;
margin-left: 20px;
border: none;
border-bottom: solid rgba(0, 0, 0, 0.34) 1px;
}
#right div form > input{
margin-left: 105px;
width: 100px;
height: 30px;
margin-top: 30px;
}
#right div form p input:focus{
outline: none;
}
#right div form p{
padding: 20px 0 0;
}
#right div ul{
width: 760px;
height: 100px;
margin-top: 50px;
}
#right div ul li{
width: 50px;
height: 50px;
background-color: aquamarine;
float: left;
margin:16px 5px;
text-align: center;
line-height: 50px;
border-radius: 50%;
list-style: none;
font-size: 22px;
}
</style>
</head>
<body>
<p><a href="../index.html">返回</a></p>
<div id="main">
<a href="../img/01.jpg">
<div id="left">
</div>
</a>
<div id="right">
<h1>Title</h1>
<div>
<h1>登录界面</h1>
<form action="demo01.html" method="post">
<p>
账号：<input type="text" name="username">
</p>
<p>
密码：<input type="password" name="password">
</p>
<input type="reset" value="重置"><input type="submit" value="提交">
</form>
<ul>
<li>您</li>
<li>好</li>
<li>！</li>
<li>欢</li>
<li>迎</li>
<li>您</li>
<li>~</li>
</ul>
</div>
</div>
</div>
</body>
</html>
