/* 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; }