web前端设计与开发大作业(三）----注册与登陆界面

最新推荐文章于 2023-05-27 12:45:37 发布

原创最新推荐文章于 2023-05-27 12:45:37 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5

web 同时被 2 个专栏收录

6 篇文章

订阅专栏

web大作业

5 篇文章

订阅专栏

本文主要介绍了如何使用HTML5和CSS3技术进行网页设计，重点是创建吸引人的注册和登录界面。首先，详细阐述了登录界面的布局和样式设置，接着转向注册界面的设计，包括输入框、按钮等元素的实现与美化。

一.登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
   <style type="text/css">
	body{
	    margin: 0;
	    padding: 0;
	    background: url(images/image4%20.jpg);
	    font-family: sans-serif;
	    background-size: cover;
	}
	.box{
	    position: absolute;
	    top:50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    width: 400px;
	    padding: 40px;
	    background: rgba(0,0,0,.8);
	    box-sizing: border-box;
	    box-shadow: 0 15px 25px rgba(0,0,0,.5);
	    border-radius: 10px;
	 
	}
	.box h2{
	    margin: 0 0 30px;
	    padding: 0;
	    color: #fff;
	    text-align: center;
	}
	.box .inputBox{
	    position: relative;
	}
	.box .inputBox input{
	    width: 100%;
	    padding: 10px 0;
	    font-size: 16px;
	    color: #fff;
	    margin-bottom: 30px;
	    border-bottom: 1px solid #fff;
	    outline: none;
	    background: transparent;
	 
	}
	.box .inputBox label{
	    position: absolute;
	    top:0;
	    left: 0;
	    padding: 10px 0;
	    font-size: 16px;
	    color: #fff;
	    pointer-events: none;
	    transition: .5s;
	}
	.box .inputBox input:focus ~ label,
	.box .inputBox input:valid ~label{
	    top:-18px;
	    left: 0;
	    color: #03a9f4;
	    font-size: 12px;
	}
	.box input[type='submit']{
	    background: transparent;
	    border: none;
	    outline: none;
	    color: #03a9f4;
	    padding: 10px 20px;
	    border-radius: 5px;
	    cursor: pointer;
	    top: 50%;
	    left: 50%;
	 
	}
	    
	   }
	   footer{width: 100%;height: 120px;line-height: 30px;text-align: center;font-size: 12px;background: wihte;padding:30px 0;padding-bottom: 10px;}
	   .baqi{
	   	font-size: 18px;
	   	font-family: "微软雅黑";
	   	color: blue
	   }
   </style>
</head>
<body>
  <div class="box">
     <h2>Login</h2>
 <form class="form-box">
    <div class="inputBox">
        <input type="text" name="" required="">
        <label>用户名</label>
    </div>
    <div class="inputBox">
        <input type="password" name="" required="">
        <label>密码</label>
    </div>
    <input type="submit" name="" value="提交">
 
 </form>
  </div>
  <footer >
  		<div class="baqi">   严禁盗版翻作</div>
  		<div class="baqi">ran.com 皖ICP证000000001号 皖ICP备000000001号  皖网文[2020]0000-0001号</div>
  		<div  class="baqi">违法和不良信息举报电话：</div>
  	</footer>
</body>
</html>

二.注册界面

<!doctype html>
<html>
<head>
<title>sign in</title>
<style>
	body{
		background: url(image1/background.jpg);
	}
div{
  
    font-size:24px;
    padding:5px;
    color:white;
}
form{
    background: #F8F8FF ;
    border:#357FC4 solid 1px;
    color:#575454;  
    width:400px;
    margin:20px auto;
    font-size:15px;
}
table{
    margin:10px auto;
}
a{
    text-decoration:none;
}
input[type="button"]{
    background:#228B22;
    color:white;
    font-size:15px;
    font-weight:bold;
    width:120px;
    height:40px;
}
td:first-child{
    text-align:right;
    padding:0 5px;
}
td:only-child{
    text-align:center;
    font-size:12px;
}
span:before{
    content:"* ";
    color:red;
}
input[type="text"]:read-only{
    border:#888484 solid 2px;
    background:#888484;
    font-weight:bold;   
}
input[type="text"]:hover{
    background:#EFD9AC;
}
footer{width: 100%;height: 120px;line-height: 30px;text-align: center;font-size: 12px;background: wihte;padding:30px 0;padding-bottom: 10px;}
.baqi{
	font-size: 18px;
	font-family: "微软雅黑";
	color: blue
}
</style>
</head>
<body>
<form>
<div>注册账号</div>
<table>
    <tr><td><span>用户名</span></td><td><input type="text" name="user_name" /></td></tr>
    <tr><td><span>email</span></td><td><input type="text" name="user_email" /></td></tr>
    <tr><td><span>密码</span></td><td><input type="password" name="user_password" /></td></tr>
    <tr><td><span>确认密码</span></td><td><input type="password" name="user_confirm_password" /></td></tr>   
    <tr><td>性别</td><td><input type="radio" id="male" name="user_sex" checked />男<input type="radio" id="female" name="user_sex" />女</td></tr>
    <tr><td>手机号码</td><td><input type="text" name="user_phone1" /></td></tr>
    <tr><td colspan="2"><input type="checkbox" checked/>我已看过并接受<a href="http://pages.ctrip.com/public/serve%20guideline.htm?1">《用户协议》</a></td></tr>
    <tr><td colspan="2"><input type="button" name="submit" value="立即注册" /></td></tr>
</table>
</form>
<footer >
		<div class="baqi">   严禁盗版翻作</div>
		<div class="baqi">ran.com 皖ICP证000000001号 皖ICP备000000001号  皖网文[2020]0000-0001号</div>
		<div  class="baqi">违法和不良信息举报电话：</div>
	</footer>
</body>
</html>