*{margin:0;top:0}

@font-face {

    font-family: 'webfont';

    font-display: swap;

    src: url('../font/webfont.eot'); /* IE9*/

    src: url('../font/webfont.eot') format('embedded-opentype'), /* IE6-IE8 */

    url('../font/webfont.woff2') format('woff2'),

    url('../font/webfont.woff') format('woff'), /* chrome、firefox */

    url('../font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

    url('../font/webfont.svg') format('svg'); /* iOS 4.1- */

  }

  /* 头部 */

  @font-face {

    font-family: 'iconfont';

    src: url('../font/iconfont.ttf?t=1641215167455') format('truetype');

  }

  .iconfont {

    font-family: "iconfont" !important;

    font-size: 16px;

    font-style: normal;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    color: white;

  }

.site-head{height: 150px;}

.site-head .topbar{height: 32px;background: #2a2a2a;color: white;line-height: 32px;}

.site-head .topbar .center-warp{width:1152px;}

.site-head .topbar .center-warp .shortcut-links ul li a{color:white;font-family: "webfont";}

.site-head .topbar .center-warp .shortcut-links ul li{list-style: none;}

.site-head .topbar .center-warp .shortcut-links > ul > li{float: left; margin-right: 18px;font-size: 14px;}

.site-head .topbar .center-warp .shortcut-links > ul > li.have-menu{padding-right: 12px;position: relative;}

.site-head .topbar .center-warp .shortcut-links > ul > li.have-menu .arrow{width:12px;height: 12px;position: absolute;right:0;top:10px;transition: transform 0.2s linear 0s;}

.site-head .topbar .center-warp .shortcut-links > ul > li.have-menu .arrow b{width:8px;height:8px;position: absolute;background: white;left:2px;top:3px;transform: rotate(45deg);}

.site-head .topbar .center-warp .shortcut-links > ul > li.have-menu .arrow i{width:8px;height:8px;position: absolute;background: #2a2a2a;left:2px;top:1px;transform: rotate(45deg);}

.site-head .topbar .center-warp .shortcut-links > ul > li.have-menu:hover .arrow{transform: rotate(180deg);}

.site-head .topbar .center-warp .shortcut-right{float: right;}

.site-head .topbar .center-warp .shortcut-right > ul > li{list-style: none;float: left;margin-right:16px;position: relative;}

.site-head .topbar .center-warp .shortcut-right > ul > li:nth-child(6){margin-right:none;}  老师为什么这里的margin-right:none;是失败的

.site-head .topbar .center-warp .shortcut-right > ul > li .fonts{color:white;font-family: "webfont";font-size: 14px;}

.site-head .topbar .center-warp .shortcut-right > ul > li:nth-child(1){margin-right:32px;}

.site-head .topbar .center-warp .shortcut-right > ul > li:nth-child(1)::before{content:'';position: absolute;width:1px;height:18px;background-color: white;top:8px;left:30px;}

前端显示为