实现一个简单的注册页面注册

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	
	<script src="https://unpkg.com/element-ui/lib/index.js">script>
    <title>用户注册页面title>
    <style type="text/css">
        /* 整个boby页面的样式 */
        body {
			background:url(./login.a6245adb.png) no-repeat;
			background-size: 100% 100%;
			height: 100vh;
        }
		/* 盒子外围的样式设置 */
		.box2  {
			width: 100%;
			height: 100vh;
			/* 弹性布局 */
			display: flex;
			/* 上下居中对齐 */
			align-items: center;
			/* 左右居中对齐 */
			justify-content: center;
		}
		/* 整个注册界面的样式设置 */
        .register_mark {
            width: 600px;
            height: 550px;
			/* 圆角边框 */
            border-radius: 30px;
			text-align: center;
            background: white;
        }
		/* 注册标识文字的样式设置 */
        .user_register {
            font-size: 40px;
            color:#145dff;
            font-weight: bold;
            font-family: "microsoft yahei";
            line-height: 100px;
        }
		/* 提示语文字的样式设置 */
		.mark_files{
			font-size: 16px;
			margin-top: 10px;
			text-align: left;
			padding-left: 86px;
		}
		/* 输入框的样式设置 */
        .input_mark input {
            width: 70%;
            height: 40px;
            margin-bottom: 30px; 	
        }
		/* 提交按钮的样式设置 */
        button {
            font-size:17px;
            color: white;
            background: #145dff;
            border: none;
            height: 50px;
			width: 71.5%;
        }
        /* 协议整体文字的样式设置 */
		.pact_mark{
			font-size: 16px;
			margin-top: 10px;
            text-align: left;
			padding-left: 86px;
		}
        /* 用户协议文字的样式设置 */
		.pact_mark a {
            color: #145dff;
            font-weight: bold;
		}
		/* 提示语文字的样式设置 */
		.mark{
			font-size: 16px;
			margin-top: 20px;
			line-height: 40px;
		}
		/* 立即登录的样式设置 */
		.mark a {
            color: #145dff;
		}
		/* 底部文字的样式设置 */
		.mark_mass{
			font-size: 20px;
			line-height: 30px;
			color: white;
			text-align: center;
			margin: 10px;
			/* 绝对定位 */
			position: absolute;
			bottom: 0;
			left: 49%;
			transform: translate(-49%, 0);
		}
        /* 图片的样式设置 */
        .login-form{
            height: auto;
            width: auto;
            text-align: top left;
            background-repeat: no-repeat;
        }
		/* 其他登录方式的样式设计 */
		.other_login p{
			font-size: 15px;
			line-height: 40px;
			text-align: center;
			
		}
		/* qq登录的样式设计 */
		.other_login .img_png img{
			width: 35px;
			height: 35px;
			background-repeat: no-repeat;
			margin-top: -100px;
			margin-left: -160px;
		}
		/* qq登录:当鼠标悬浮在元素上方时,给元素设定的样式 */
		.other_login .img_png img:hover{
			width: 35px;
			height: 35px;
			background-repeat: no-repeat;
			margin-top: -100px;
			margin-left: -160px;
			background: #1E90FF;
			cursor: pointer;
		}
		/* wx登录方式的样式设计 */
		.other_login .img_png1 img{
			width: 35px;
			height: 35px;
			background-repeat: no-repeat;
			margin-top: -100px;
			margin-right: -160px;
		}
		/* wx登录方式:当鼠标悬浮在元素上方时,给元素设定的样式 */
		.other_login .img_png1 img:hover{
			width: 35px;
			height: 35px;
			background-repeat: no-repeat;
			margin-top: -100px;
			margin-right: -160px;
			background: #1E90FF; 
			cursor: pointer;
		}
		.img_list {
			display: flex;
			justify-content: center;
		}
    style>
head>
<body>
    <form action="" method="get">
       <div class="box2">
		   <div class="register_mark">
		       <div class="user_register">注册Eolinkdiv>
		       <div class="mark_files">
		           <p>手机号或者邮箱注册p>
		       div>
		       <div class="input_mark">
		           <input type="text" placeholder="请输入手机号或邮箱">
		       div>    
		       <div class="input_mark">
		           <input type="password" placeholder="请输入密码">
		       div>
		       <button type="button" onclick="tank()">完 成 注 册button>
			   
		      <div class="pact_mark">
		           <input type="checkbox" value="1">同意
		           <a href="https://shimo.im/docs/W8xUHmqpUvcf7I75/">用户服务协议a>
		       div>
		       <div class="mark">
		           <p>已有账号?<a href="https://shimo.im/docs/i3XNF2FxolUvs9rH/">立即登录a>p>
		       div>
			   <div class="other_login">
				   <div class="form-others-title">
					   <div class="mlr10 fs14">—————————  其他登录方式  —————————div>
					   <div class="img_list">
						   <div class="img_png">
							   <p class="ut-01">
								   <a href="https://shimo.im/docs/W8xUHmqpUvcf7I75/">
									   <img src="./qq.png" alt="qq登录">
								   a>
							   p>
						   div>
						   <div class="img_png1">
							   <p class="ut-02">
								   <a href="https://shimo.im/docs/W8xUHmqpUvcf7I75/">
									   <img src="./wx.png" alt="wx登录">
								   a>
							   p>
						   div>
					   div>
				   div>
			   div>
		   div>
	   div>
    form>
	
<div class="mark_mass">
	<div class="name">
		<p>版权所有©2022 Eolink-有限公司p>
	div>
div>

	
<script type="text/javascript">
	function tank() {
		alert("欢迎登录!!!")
	}
script>
body>
html>

最终页面:
实现一个简单的注册页面注册_第1张图片

你可能感兴趣的:(前端基础学习,html,css,前端)