div+css实例布局（一）
导航是前端开发中避免不了的一个区域，今天就来写写导航栏。
导航栏（一）
*{margin:0;padding:0}
#menu{
min-width:400px;
height:2rem;
background:#06f;
text-align:center;
line-height:2rem;
font-size:1rem;
}
#menu a{
padding:0 1rem;
color:#000;
text-decoration:none;
font-weight:bold
}
#menu a:hover{color:#FFC0CB}导航栏（二）
*{margin:0;padding:0}
body{min-width:500px;}
li{list-style:none}
body{text-align:center}
a{text-decoration:none}
a:hover{color:#BA2636}
#menu{ width:100%; height:3.75rem; background:#00A2CA;}
#menu li{display:inline; height:3.75rem}
#menu li a{display:inline-block; padding:0 1.25rem; height:3.75rem; line-height:3.75rem;
color:#FFF;font-weight:bold;font-size:1rem}
#menu li a:hover{background:#0095BB} 移动端底部滑动导航栏（三）
测试时候需要调成移动端
*{ margin: 0;padding: 0;}
#nav{
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
margin: 0 0 0.625rem 0;
}
#footer
{
width: 100%;
white-space: nowrap;
overflow-x: auto;
cursor: pointer;
}
/*将容器分为上下2部分*/
#footer .flex
{
width: 5rem;
height: 4rem;
display: inline-block;
border: 1px solid #808080;
}
.top{
width: 100%;
height: 3rem;
background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4075723771,1234971875&fm=27&gp=0.jpg") center center no-repeat;
background-size: 100% 100%;
}
.bottom{
width: 100%;
height: 1rem;
line-height: 1rem;
text-align: center;
}响应式导航栏
*{margin:0;padding:0}
.nav{background:#abc;height:3rem;display:block}
.list{z-index:0;display:block;}
li{list-style:none;float:left;margin-left:2rem;}
a{text-decoration:none;color:#fff;line-height:3rem;}
a:hover{color:#FFC0CB}
input:checked~.list{
position:absolute;
padding:0 0.3rem 0.3rem 0.3rem;
display:block;
background: #abc;
z-index:0;
margin-top:3rem;
}
input:checked~.list li{clear:both;background: #abc;}
label{display:none}
.toggle{display:none}
@media screen and (max-width:500px) {
.toggle{display:none}
label{display:block;z-index:4}
.list{display:none;margin-left:0;}
li{margin-left:0;}
.meun-icon{display: block;float: left; }
.menu-icon>svg path{fill: white; }
label[for="toggle"] {
display: block;
float:left;
z-index:2;
cursor:ponter;
line-height:3rem;
margin-left:1rem
}
}