login.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /* css reset 重置样式 */
  2. body{
  3. margin: 0;
  4. }
  5. ul{
  6. padding: 0;
  7. margin: 0;
  8. }
  9. li{
  10. list-style: none;
  11. }
  12. /* 工具类 */
  13. .clearfix::after{
  14. content: "";
  15. display: block;
  16. /* 清除所有方向的浮动 */
  17. clear: both;
  18. }
  19. /* 最外层容器 */
  20. .container{
  21. height: 100vh;
  22. width: 100vw;
  23. overflow: hidden;
  24. }
  25. /* 左侧图片部分 */
  26. .left-img{
  27. height: 100vh;
  28. width:375px;
  29. float: left;
  30. /* ../ 表示返回上一级目录*/
  31. background-image: url("../img/banner.jpg");
  32. background-size: cover;
  33. background-position: center center;
  34. }
  35. /* 登录页面主要功能部分 */
  36. .right-content{
  37. height: 100vh;
  38. width: calc(100vw - 375px);
  39. background-color: #f5f5f5;
  40. float: left;
  41. }
  42. /* 顶部导航栏 */
  43. .top-bar{
  44. padding:20px;
  45. }
  46. .logo{
  47. float: left;
  48. }
  49. .logo img{
  50. width: 40px;
  51. height: 40px;
  52. display: block;
  53. float: left;
  54. }
  55. .logo span{
  56. font-size: 26px;
  57. color:rgba(0,0,0,.8);
  58. font-weight: 500;
  59. display: block;
  60. float: left;
  61. margin-left: 10px;
  62. }
  63. .top-nav{
  64. float: right;
  65. }
  66. .top-nav ul li{
  67. float: left;
  68. color:#838383;
  69. font-size: 14px;
  70. margin:0 10px;
  71. }
  72. .top-nav ul li:hover{
  73. color:#ff6900;
  74. cursor: pointer;
  75. }
  76. .top-nav ul li.line{
  77. color:rgba(0,0,0,.1)
  78. }
  79. .top-nav ul li.line:hover{
  80. cursor:auto;
  81. }
  82. .top-nav li i{
  83. display: inline-block;
  84. margin-top: 5px;
  85. border-top: 5px solid gray;
  86. border-bottom: 5px solid transparent;
  87. border-left: 5px solid transparent;
  88. border-right: 5px solid transparent;
  89. }