<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????}
????????html,body{
????????????height:?100%;
????????}
????????#menu{
????????????border:1px?solid?#FF00B4;
????????????overflow:?hidden;
????????}
????????#left{
????????????width:?80px;
????????????height:?50px;
????????????border:1px?solid?red;
????????????line-height:?50px;
????????????text-align:?center;
????????????font-size:?20px;
????????????float:?left;
????????}
????????#right{
????????????float:?right;
????????}
????????#right?ul{
????????????list-style:?none;
????????}
????????#right?ul?li{
????????????display:?inline-block;
????????????text-align:?center;
????????}
????????#right?ul?li?a{
????????????display:?inline-block;
????????????height:?50px;
????????????line-height:?50px;
????????????text-decoration:?none;
????????????margin-right:20px;?
????????}
????????.btn{
????????????width:?50px;
????????????height:?50px;
????????????background:?aqua;
????????????float:?right;
????????????display:?none;
????????}
????????@media?screen?and?(max-width:489px){
????????????#menu{
????????????????position:?relative;
????????????}
????????????#right?ul{
????????????????display:?none;
????????????}
????????????.btn{
????????????????display:?block;
????????????}
????????????#right{
????????????????width:?100%;
????????????}
????????????#right?ul?li{
????????????????text-align:?center;
????????????????display:?block;
????????????}
????????????#right?ul?li?a{
????????????????width:?100%;
????????????????border-top:1px?solid?#F4EFEF;
????????????}
????????????#right?ul?li?a:hover{
????????????????background:?#F5F5F5;
????????????}
????????????@media?screen?and?(min-width:489px){
????????????????#right?ul{
????????????????????display:?block;
????????????????}
????????????}
????}
????</style>
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
????<script>
????????$(function(){
????????????$(".btn").on("click",function(){
????????????????$('ul').toggle();
????????????})
????????})
????</script>
</head>
<body>
????<div?id="menu">
????????<div?id="left">Hello</div>
????????<button>
????????????
????????</button>
????????<div?id="right">
????????????<ul>
????????????????<li><a?href="">home</a></li>
????????????????<li><a?href="">nav</a></li>
????????????????<li><a?href="">head</a></li>
????????????????<li><a?href="">footer</a></li>
????????????????<li><a?href="">section</a></li>
????????????????<li><a?href="">about</a></li>
????????????</ul>
????????</div>
????</div>
????122222<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
????1<br/>
</body>
</html>第一個問題 ： 我縮小瀏覽器窗口，點擊按鈕出現ul之后，再次點擊隱藏ul。然后擴大瀏覽器，大屏幕下的導航條ul不見了。。。第二個問題 ： 在小窗口下，如何使點擊按鈕下拉的內容，懸浮在下面數字內容之上。我用了定位試了，感覺對于哪個層設置relative和absolute不是太清晰了。。。
做了一個簡單的響應式導航條，遇到了不懂的問題，求大神幫忙一下。
abc123456789def
2017-08-14 20:28:35