/* css reset 重置样式 */ body{ margin: 0; } ul{ padding: 0; margin: 0; } li{ list-style: none; } /* 工具类 */ .clearfix::after{ content: ""; display: block; /* 清除所有方向的浮动 */ clear: both; } /* 最外层容器 */ .container{ height: 100vh; width: 100vw; overflow: hidden; } /* 左侧图片部分 */ .left-img{ height: 100vh; width:375px; float: left; /* ../ 表示返回上一级目录*/ background-image: url("../img/banner.jpg"); background-size: cover; background-position: center center; } /* 登录页面主要功能部分 */ .right-content{ height: 100vh; width: calc(100vw - 375px); background-color: #f5f5f5; float: left; } /* 顶部导航栏 */ .top-bar{ padding:20px; } .logo{ float: left; } .logo img{ width: 40px; height: 40px; display: block; float: left; } .logo span{ font-size: 26px; color:rgba(0,0,0,.8); font-weight: 500; display: block; float: left; margin-left: 10px; } .top-nav{ float: right; } .top-nav ul li{ float: left; color:#838383; font-size: 14px; margin:0 10px; } .top-nav ul li:hover{ color:#ff6900; cursor: pointer; } .top-nav ul li.line{ color:rgba(0,0,0,.1) } .top-nav ul li.line:hover{ cursor:auto; } .top-nav li i{ display: inline-block; margin-top: 5px; border-top: 5px solid gray; border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; } /* 登录框 */ .login-box{ width: 450px; background-color: #fff; box-shadow:0 0 10px #aaa; margin: 100px auto; padding: 40px 45px; box-sizing: border-box; } .login-box .login-tab div{ font-size: 24px; color: #bbb; font-weight: 400; float: left; margin-right: 20px; } .login-box .login-tab div.active{ color: #111; } .login-box .login-tab .active::after{ content: ""; display: block; height: 4px; width: 100%; background-color: #ff6900; margin-top:5px; border-radius: 2px; } .login-box .login-input{ margin-top: 20px; overflow: hidden; } .login-box .login-input div{ height: 60px; background-color: #f5f5f5; margin-top: 20px; padding-left: 20px; } .login-box .login-input input{ height: 100%; border:0; outline: none; background-color: transparent; font-size: 20px; }