响应式导航问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>蛋糕商店</title> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="CSS/style.css"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="warp"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="logotext">IMOOC</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a class="dropdown-toggle actives" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 首页 </a> <ul class="dropdown-menu"> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 生日 <span class="caret"></span> </a> <ul class="dropdown-menu"> <div class="one"> <span>关系</span> <div class="divider"></div> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </div> <div class="one one-1"> <span>风味</span> <div class="divider"></div> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> <li><a href="#"> </a></li> </div> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 婚礼 <span class="caret"></span> </a> <ul class="dropdown-menu"> <div class="one"> <span>关系</span> <div class="divider"></div> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </div> <div class="one one-2"> <span>风味</span> <div class="divider"></div> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> <li><a href="#"> </a></li> </div> <div class="one one-3"> <span>主旋律</span> <div class="divider"></div> <li><a href="#">心形</a></li> <li><a href="#">卡通</a></li> <li><a href="#"> </a></li> </div> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 专用 <span class="caret"></span> </a> <ul class="dropdown-menu"> <div class="one"> <span>关系</span> <div class="divider"></div> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </div> <div class="one one-4"> <span>风味</span> <div class="divider"></div> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> <li><a href="#"> </a></li> </div> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 商铺 <span class="caret"></span> </a> <ul class="dropdown-menu"> <div class="one"> <span>关系</span> <div class="divider"></div> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </div> <div class="one one-5"> <span>风味</span> <div class="divider"></div> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> <li><a href="#"> </a></li> </div> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right-1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-shopping-cart"></span> </a> <div class="up-1 glyphicon glyphicon-triangle-top"> </div> <ul class="dropdown-menu dm1"> <p>$0.00(0)</p> <button type="button">空</button> </ul> </ul> <ul class="nav navbar-nav navbar-right-2"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-user"></span> </a> <div class="up-2 glyphicon glyphicon-triangle-top"> </div> <ul class="dropdown-menu dm2"> <form action="post" class="dm2-in"> Email<input type="email" class="int"> Password<input type="password" class="int"> <button type="button">登录</button> <input type="checkbox" class="box"><p class="boxs">记住</p> <p class="dm2-bottom">新用户?<a href="#" class="join">注册</a> 丨 忘记密码?</p> </form> </ul> </ul> <ul class="nav navbar-nav navbar-right-3"> <a href="#" id="dropdownMenu1" data-toggle="dropdown" class=" dropdown-toggle" aria-haspopup="true" aria-expanded="true"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </a> <div class="up-3 glyphicon glyphicon-triangle-top"> </div> <ul class="dropdown-menu dm3"> <input type="text"><button type="button">搜</button> </ul> </ul> <div class="clearfix"></div> </div><!-- /.navbar-collapse --> </div> <!-- /.warp --> </div><!-- /.container --> </nav> <section class="banner"> <div class="warp"> <div class="lefttext"> <p class="topimooc">IMOOC <span>蛋糕</span></p> <p class="special">特 别 的 日 子 ，特 别 的 你</p> <button type="button">SHOP NOW</button> </div> <img class="img-responsive" src="img/2.png" alt="abc"> </div> <div class="clearfix"></div> </section> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="JS/index.js"></script> </body> </html>
*{
margin: 0;
padding: 0;
}
.actives{
background-color: #F07818;
}
.clearfix{
content: '';
display: block;
height: 0;
line-height: 0;
clear: both;
}
.navbar{
border-radius: 0;
margin: 0;
}
.navbar-default{
background-color: #5D4B33;
border: none;
}
.navbar-default .navbar-nav > li > a{
color: #fff;
}
.container{
width: 1230px;
}
.navbar-collapse{
width: 1230px;
}
.warp{
width: 1200px;
margin: 0 auto;
}
.logotext{
height: 60px;
font-size: 60px;
color: #fff;
line-height: 60px;
display: inline-block;
font-weight: normal;
float: left;
margin-right: 0;
}
.logotext:hover{
color: #fff;
text-decoration: none;
}
.navbar .warp .nav .dropdown{
width: 100px;
height: 60px;
text-align: center;
}
.navbar .warp .nav .dropdown a{
width: 100px;
height: 60px;
line-height: 30px;
}
.navbar .warp .nav .dropdown:hover{
background-color: #F07818;
}
.navbar .warp .nav .dropdown a:hover{
color: #fff;
}
.navbar .warp .nav .open > a,
.navbar .warp .nav .open > a:hover,
.navbar .warp .nav .open > a:focus {
background-color: #F07818;
color: #fff;
}
.navbar .warp .nav .dropdown .dropdown-menu{
width: 600px;
height: 200px;
border-radius: 0;
}
.one{
width: 150px;
height: 150px;
display: inline-block;
margin-top: 20px;
margin-left: 25px;
}
.one li{
margin: 10px auto;
}
.one li a{
color: gray;
text-decoration: none;
}
.collapse .nav .dropdown-menu .one li a:hover{
color: #F07818;
}
.one span{
color: #F07818;
font-weight: bold;
font-size: 17px;
}
.container .navbar-right-1{
display: inline-block;
float: right;
width: 65px!important;
height: 60px!important;
line-height: 60px;
font-size: 18px;
text-align: center;
border-left: 1px gray solid;
cursor: pointer;
}
.container .navbar-right-1 a{
width: 65px!important;
height: 60px!important;
}
.container .navbar-right-1 a:hover{
background-color: #5D4B33!important;
}
.container .navbar-right-2{
display: inline-block;
float: right;
width: 65px;
height: 60px;
font-size: 18px;
line-height: 60px;
text-align: center;
border-left: 1px gray solid;
cursor: pointer;
}
.container .navbar-right-2 a{
width: 65px;
height: 60px;
}
.container .navbar-right-2 .drop-toggle:hover{
background-color: #5D4B33;
}
.container .navbar-right-3{
display: inline-block;
float: right;
width: 65px!important;
height: 60px!important;
font-size: 18px;
line-height: 60px;
text-align: center;
border-left: 1px gray solid;
cursor: pointer;
}
.container .navbar-right-3 .dropdown a{
width: 65px!important;
height: 60px!important;
}
.container .navbar-right-1 a{
color: #fff;
position: relative;
}
.container .navbar-right-2 a{
color: #fff;
position: relative;
}
.container .navbar-right-3 a{
color: #fff;
position: relative;
}
.container .navbar-right-1 .dm1{
width: 200px;
height: 110px;
position: absolute;
left: 1155px;
top: 58px;
border-top: none;
border-radius: 0;
text-align: center;
font-size: 18px;
cursor: default;
}
.container .navbar-right-2 .dm2{
width: 320px;
height: 300px;
position: absolute;
left: 985px;
top: 58px;
border-top: none;
border-radius: 0;
cursor: default;
}
.container .navbar-right-3 .dm3{
width: 290px;
height: 100px;
position: absolute;
left: 945px;
top: 58px;
border-top: none;
border-radius: 0;
text-align: center;
cursor: default;
}
.container .navbar-right-1 .up-1{
color: #fff;
position: absolute;
top: 47px;
left: 1310px;
display: none;
}
.container .navbar-right-2 .up-2{
color: #fff;
position: absolute;
top: 47px;
left: 1245px;
display: none;
}
.container .navbar-right-3 .up-3{
color: #fff;
position: absolute;
top: 47px;
left: 1180px;
display: none;
}
.container .navbar-right-1 .dm1 button{
position: absolute;
width: 85%;
height: 42px;
text-align: center;
line-height: 47px;
top: 55px;
left: 15px;
background-color: #F07818;
border: 1px #F07818 solid;
color: #fff;
}
.container .navbar-right-1 .dm1 button:hover{
color: #F07818;
background-color: #fff;
}
.container .navbar-right-2 .dm2 .dm2-in{
width: 90%;
height: 95%;
margin: -3px auto;
position: relative;
}
.container .navbar-right-2 .dm2 .dm2-in .int{
width: 100%;
height: 35px;
display: block;
margin-top: -12px;
margin-bottom: 5px;
}
.container .navbar-right-2 .dm2 .dm2-in button{
width: 100%;
height: 35px;
line-height: 35px;
background-color: #F07818;
border: 1px #F07818 solid;
color: #fff;
}
.container .navbar-right-2 .dm2 .dm2-in button:hover{
color: #F07818;
background-color: #fff;
}
.container .navbar-right-2 .dm2 .dm2-in .box{
position: absolute;
top: 226px;
width: 15px;
height: 15px;
cursor: pointer;
outline: none;
}
input[type=checkbox]{
-webkit-appearance:none;
background-color: #fff;
border: 2px lightgray solid;
border-radius: 3px;
}
input[type=checkbox]:checked:after{
content: '✔';
position: absolute;
top: -5px;
color: black;
-webkit-transform: rotate(10deg);
}
.container .navbar-right-2 .dm2 .dm2-in .boxs{
display: inline;
position: absolute;
top: 208.5px;
left: 17px;
}
.container .navbar-right-2 .dm2 .dm2-in .dm2-bottom{
width: 100%;
text-align: center;
}
.container .navbar-right-2 .dm2 .dm2-in .dm2-bottom .join{
color: #F07818;
text-decoration: none;
}
.container .navbar-right-3 .dm3 input{
position: absolute;
top: 30px;
left: 14px;
width: 200px;
height: 35px;
border: 1px #F07818 solid;
outline: none;
}
.container .navbar-right-3 .dm3 button{
position: absolute;
top: 30px;
left: 214px;
width: 60px;
height: 35px;
line-height: 35px;
border: 1px #F07818 solid;
border-left: none;
background-color: #F07818;
color: #fff;
}
.container .navbar-right-3 .dm3 button:hover{
color: #F07818;
background-color: #fff;
}
.banner{
width: 100%;
height: 450px;
position: relative;
background-color: #f3f6f8;
}
.banner .lefttext{
display: inline-block;
width: 400px;
height: 250px;
margin-top: 140px;
}
.banner .lefttext .topimooc{
font-size: 60px;
}
.banner .lefttext .topimooc span{
color: #F07818;
}
.banner .lefttext .special{
color: #F07818;
}
.banner .lefttext button{
width: 180px;
height: 42px;
border: 3px #5d4b33 solid;
background-color: transparent;
margin-top: 20px;
font-weight: bold;
color: #5d4b33;
}
.banner .lefttext button:hover{
color: #F07818;
border-color: #F07818;
}
.banner img{
width: 330px;
height: 270px;
position: absolute;
right: 230px;
top: 150px;
}老师，为什么我的导航栏没有响应式的效果呢
0
收起
正在回答 回答被采纳积分+1
2回答
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星