div+css实例布局（一）_div css布局实例

导航是前端开发中避免不了的一个区域，今天就来写写导航栏。

导航栏（一）

<div id='menu'>
	<a href="#">链接</a>|
	<a href="#">链接</a>|
	<a href="#">链接</a>|
	<a href="#">链接</a>|
	<a href="#">链接</a>
</div>

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

导航栏（二）

<ul id="menu"> 
	   <li><a href="#">首页</a></li> 
	   <li><a href="#">首页</a></li> 
	   <li><a href="#">首页</a></li> 
	   <li><a href="#">首页</a></li> 
	   <li><a href="#">首页</a></li> 
	   <li><a href="#">首页</a></li> 
</ul> 

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

移动端底部滑动导航栏（三）

测试时候需要调成移动端

<div id="nav">
        <footer id="footer">
            <div class="flex">
               <div class="top" ></div>
               <div class="bottom" >首页</div>
            </div><div class="flex">
               <div class="top" ></div>
               <div class="bottom" >首页</div>
            </div><div class="flex">
               <div class="top" ></div>
               <div class="bottom" >首页</div>
            </div><div class="flex">
               <div class="top" ></div>
               <div class="bottom" >首页</div>
            </div><div class="flex">
               <div class="top" ></div>
               <div class="bottom" >首页</div>
            </div><div class="flex">
               <div class="top" ></div>
               <div class="bottom" >首页</div>
            </div><div class="flex">
               <div class="top" ></div>
               <div class="bottom" >首页</div>
            </div>
        </footer>
    </div>

*{ 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;
        }

响应式导航栏

<header>
        <nav class="nav">
            <input type="checkbox" id="toggle" class="toggle"/>
            <label for="toggle">
                <span class="menu-icon">
                    <svg viewBox="0 0 18 15" width="18px" height="15px">
                        <path fill="white" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
                        <path fill="white" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
                        <path fill="white" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
                   </svg>
              </span>
            </label>
            <ul class="list">
                <li><a href="#">菜单一</a></li>
                <li><a href="#">菜单二</a></li>
                <li><a href="#">菜单三</a></li>
                <li><a href="#">菜单四</a></li>
                <li><a href="#">菜单五</a></li>
            </div>
        </nav>
    </header>

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