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
          	    }
			}