html文件
<header>
<nav>
<div id="title"><a href="#">Bootstrap 中文文档</a></div>
<ul class="left">
<li><a href="#">入门</a></li>
<li><a href="#">全局 CSS 样式</a></li>
<li><a href="#">组件</a></li>
<li><a href="#">JavaScript 插件</a></li>
<li><a href="#">定制</a></li>
<li><a href="#">网站实例</a></li>
<li><a href="#">免费模板</a></li>
</ul>
<ul class="right">
<li><a href="#">返回 Bootstrap 中文网</a></li>
<li><a href="#">官方博客</a></li>
<li><a href="#">优站精选</a></li>
<li><a href="#">v3 <span class="iconfont icon-zhcc_xiangxiajiantou"></span></a></li>
</ul>
<div class="iconfont icon-gengduo"></div>
</nav>
</header>
css文件
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
/* box-sizing: border-box; */
}
span.icon-zhcc_xiangxiajiantou{
font-size: 12px;
}
div.icon-gengduo{
font-size: 14px;
float: right;
color: #463265;
margin: 15px 10px;
line-height: 20px;
}
@media screen and (min-width:1200px) {
header {
width: 100%;
height: 50px;
background-color: #f9f9f9;
}
nav {
width: 1200px;
height: 50px;
margin: 0 auto;
}
#title {
font-weight: 500;
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
#title>a{
color: #563d7c;
}
.left{
float: left;
margin-top: 15px;
}
.left>li {
float: left;
font-size: 14px;
}
.left>li>a {
color: #463265;
padding-right: 10px;
padding-left: 10px;
font-weight: 500;
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
.right{
float: right;
margin-top: 15px;
}
.right>li {
float: right;
font-size: 14px;
}
.right>li>a {
color: #463265;
padding-right: 10px;
padding-left: 10px;
font-weight: 500;
margin-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
div.icon-gengduo{
display: none;
}
}
/* 1200~990 */
@media screen and (max-width:1200px) and (min-width:990px) {
header {
width: 100%;
height: 100px;
background-color: #f9f9f9;
}
nav {
width: 990px;
height: 100px;
margin: 0 auto;
}
#title {
font-weight: 500;
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
#title>a{
color: #563d7c;
}
.left{
float: left;
margin-top: 15px;
margin-bottom: 15px;
}
.left>li {
float: left;
font-size: 14px;
}
.left>li>a {
color: #463265;
padding-right: 10px;
padding-left: 10px;
font-weight: 500;
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
.right{
float: right;
margin-top: 15px;
}
.right>li {
float: right;
font-size: 14px;
}
.right>li>a {
color: #463265;
padding-right: 10px;
padding-left: 10px;
font-weight: 500;
margin-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
div.icon-gengduo{
display: none;
}
}
/* 990~768 */
@media screen and (max-width:990px) and (min-width:768px) {
header {
width: 100%;
height: 50px;
background-color: #f9f9f9;
}
nav {
width: 768px;
height: 50px;
margin: 0 auto;
}
#title {
font-weight: 500;
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
#title>a{
color: #563d7c;
}
.left{
float: left;
margin-top: 15px;
margin-bottom: 15px;
}
.left>li {
float: left;
font-size: 14px;
}
.left>li>a {
color: #463265;
padding-right: 10px;
padding-left: 10px;
font-weight: 500;
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
.right{
float: right;
margin-top: 15px;
display: none;
}
/* .right>li {
float: right;
font-size: 14px;
}
.right>li>a {
color: #463265;
padding-right: 10px;
padding-left: 10px;
font-weight: 500;
margin-top: 15px;
padding-bottom: 15px;
line-height: 20px;
} */
div.icon-gengduo{
display: none;
}
}
/* 768以下 */
@media screen and (max-width:767px) {
header {
width: 100%;
height: 50px;
background-color: #f9f9f9;
}
nav {
width: 100%;
height: 50px;
margin: 0 auto;
}
#title {
font-weight: 500;
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
#title>a{
color: #563d7c;
}
.left{
float: left;
margin-top: 15px;
margin-bottom: 15px;
display: none;
}
/* .left>li {
float: left;
font-size: 14px;
}
.left>li>a {
color: #463265;
padding-right: 10px;
padding-left: 10px;
font-weight: 500;
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
} */
.right{
float: right;
margin-top: 15px;
display: none;
}
/* .right>li {
float: right;
font-size: 14px;
}
.right>li>a {
color: #463265;
padding-right: 10px;
padding-left: 10px;
font-weight: 500;
margin-top: 15px;
padding-bottom: 15px;
line-height: 20px;
} */
div.icon-gengduo{
display: block;
}
}
效果展示: