a{ text-decoration: none;/*去除a标签下划线*/ } /*顶部导航栏样式*/ .container{ position: fixed; top: 0; right: 0; left: 0; } .header{ display: flex; height: 64px; background-color: #2196f3; box-shadow: 0 4 5 #c4c0bd; box-shadow: 0px 4px 5px #c4c0bd;/*边框阴影*/ align-items: baseline; } .header i{ width: 24px; height: 24px; font-size: 24px; color: #fff; } .header_column{ display: flex; flex: 1; width: 275px; height: 22px; margin: auto 0; } .header_column i{ margin-left: 40px; cursor: pointer; } .img_left{ flex-direction: row; width: 25px; height: 25px; } .header_column a{ font-size: 24px; font-family: Roboto,Noto,Helvetica,Arial,sans-serif;/*字体样式*/ color: #fff; margin-left: 34px; } .header_icon{ display: flex; flex: 1; justify-content: flex-end; margin: auto; margin-right: 25px; } /*左侧导航栏样式*/ .body{ display: flex; } #sidebar{ width: 225px; height: 500px; flex: 1; flex-direction: column; position: relative; top: 0px; left: -225px; } .row{ height: 49px; display: flex; width: 225px; margin: 0 auto; justify-content: flex-start; align-items: center; } .row i{ width: 24px; height: 24px; font-size: 24px; color: #757474; margin-left: 18px; } .row p{ color: #333; margin-left: 35px; } /*页面导航样式*/ .main{ width: 100%; height: auto!important; color: black; display: flex; flex: 5; } .main_row{ width: 1125px; height: 140px; padding: 10px; position: relative; top: 47px; } .icon{ float: left; } .col_user{ float: left; width: 330px; height: 74px; padding: 10px; } .col_database{ float: left; width: 330px; height: 74px; padding: 10px; } .col_service{ float: left; width: 330px; height: 74px; padding: 10px; } .main_row i{ width: 74px; height: 74px; font-size: 74px; color: #757474; } /*文本和数字样式*/ .col_text{ float: left; } .user_text{ padding: 10px 5px; font-size: 18px; color: #333; } .database_text{ padding: 10px 5px; font-size: 18px; color: #333; } .service_text{ padding: 10px 5px; font-size: 18px; color: #333; } .user_number{ padding: 0px 5px; font-size: 24px; color: #333; line-height: 0.7; } .database_number{ padding: 0px 5px; font-size: 24px; color: #333; line-height: 0.7; } .service_number{ padding: 0px 5px; font-size: 24px; color: #333; line-height: 0.7; } /*font-icon替换矢量图*/ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(MaterialIcons-Regular.woff2) format('woff2'), url(MaterialIcons-Regular.woff) format('woff'); } .material-icons { font-style: normal; font-family: 'Material Icons'; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; }