科技行业平台系统登录表单页面效果代码

代码语言:html

所属分类:表单美化

代码描述:科技行业平台系统登录表单页面效果代码

代码标签: 科技 行业 平台 系统 登录 表单 页面

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <style>
        body{
                zoom:0.6;
            }
                * {
        	padding:0;
        	margin:0;
        	box-sizing:border-box;
        	user-select:none
        }
        li {
        	list-style-type:none
        }
        a {
        	text-decoration:none;
        	color:#fff
        }
        html {
        	background:#000;
        	height:100%
        }
        body {
        	background:#000;
        	max-width:1920px;
        	margin:0 auto;
        	height:100%;
        	position:relative;
        	font-family:"PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif
        }
        body::before {
        	position:absolute;
        	width:100%;
        	height:100%;
        	content:"";
        	left:0;
        	top:0;
        	z-index:100;
        	pointer-events:none
        }
        .loginbg {
        	background-image:linear-gradient(300deg,#004491,#1e88e5);
        	position:absolute;
        	width:100%;
        	height:50%;
        	left:0;
        	top:0;
        	z-index:0
        }
        .loginav {
        	max-width:1300px;
        	width:100%;
        	height:100%;
        	margin:0 auto;
        	z-index:10;
        	box-shadow:0 0 30px rgba(0,0,0,.1);
        	display:flex;
        	align-items:center;
        	justify-content:space-between
        }
        .video {
        	position:absolute;
        	width:1200px;
        	left:0;
        	padding-bottom:40px;
        	pointer-events:none
        }
        .video video {
        	width:100%
        }
        .video::before {
        	position:absolute;
        	content:"";
        	width:200px;
        	height:100%;
        	background:#000;
        	right:0;
        	top:0
        }
        .logotit {
        	text-align:center;
        	padding:40px 0;
        	font-size:30px
        }
        .loginbox {
        	padding:30px 0 50px 0;
        	width:600px;
        	padding:30px 50px;
        	flex-shrink:0;
        	position:relative;
        	z-index:100
        }
        .logininput .forminput {
        	border:2px solid rgba(32,163,245,.4);
        	font-family:"PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
        	display:block;
        	padding-left:50px;
        	font-size:18px;
        	color:#fff;
        	width:100%;
        	line-height:48px;
        	outline:0;
        	text-indent:1px;
        	background:rgba(32,163,245,.1)
        }
        input::input-placeholder {
        	color:#fff
        }
        ::-webkit-input-placeholder {
        	color:#fff
        }
        .flex1 {
        	display:flex;
        	justify-content:space-between;
        	align-items:center
        }
        .flex1 label {
        	color:#fff;
        	display:flex;
        	align-items:center
        }
        .logininput>li {
        	display:block;
        	padding:15px 0;
        	position:relative
        }
        .logininput li>i {
        	position:absolute;
        	height:100%;
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0