div 布局_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                }      }