总效果：

html:

响应式CSS：

/* 网站头部 */ header {     width: 100%; } header .top {     line-height: 3rem;     padding: 0 1.5rem;     color: #fff;     background: #555;     border-bottom: 1px #ecc000 solid; } header .top .tel {     float: left; } header .top ul {     text-align: right; } header .top ul li {     display: inline-block; } header .top ul li + li {     border-left: 1px solid #999;     margin-left: -3px; } header .top ul li a {     display: inline-block;     padding: 0 1.5rem;     color: #fff; } @media only screen and (max-width: 50em) {     header .top ul li a {         padding: 0 1rem;     } } @media only screen and (min-width: 30.0625em) and (max-width: 50em) { } @media only screen and (max-width: 30em) {     header .top .tel,     header .top ul li:nth-child(3),     header .top ul li:nth-child(4) {         display: none;     } } header .main {     padding: 0; } header .main .brand {     float: left;     padding: 1rem 1.5rem 0; } header .main ul {     text-align: right; } header .main ul li {     display: inline-block;     border-left: 1px solid #f0ede9; } header .main ul li a {     display: inline-block;     padding: 0 2.5rem;     line-height: 5.5rem;     font-size: 1.6rem;     font-weight: bold;     color: #7c7a65;     text-decoration: none; } header .main ul li a:hover, header .main ul li a:active, header .main ul li a.active {     color: #ffb300;     background-color: #f8f6f1; } @media only screen and (max-width: 50em) {     header .main .brand {         float: none;         display: block;         padding: 0;         margin: 1.5rem auto 0.5rem;         text-align: center;     }     header .main ul {         text-align: center;     }     header .main ul li {         border: none;     }     header .main ul li a {         padding: 0 1.5rem;     } } @media only screen and (max-width: 30em) {     header .main ul li {         line-height: 3rem;     }     header .main ul li:first-child {         display: none;     }     header .main ul li a {         font-weight: normal;         padding: 0 0.5rem;     } }