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