怎么实现下拉？还有一些问题，老师帮忙看看
来源：2-7 作业题
慕仙0201785
2018-12-08 10:22:08
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/bootstrap-theme.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="js/bootstrap.bundle.js"> <link rel="stylesheet" href="js/bootstrap.js"> </head> <body> <header> <div class="container"> <div class="img"><img src="img/logo.png" alt=""></div> <ul class="row-1 nav navbar-nav"> <li id="active"><a href="">首页</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">生日<b class="caret"></b></a> <ul class="dropdown-menu"> <div class="row"> <div> <h4>关系</h4> <ul> <li><a class="list" href="">朋友</a></li> <li><a class="list" href="">爱人</a></li> <li><a class="list" href="">姐妹</a></li> </ul> </div> <div> <h4>风味</h4> <ul> <li><a class="list" href="">巧克力</a></li> <li><a class="list" href="">水果</a></li> </ul> </div> </div> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">婚礼<span class="caret"></span></a> <ul class="dropdown-menu"> <div class="row"> <div> <h4>关系</h4> <ul> <li><a class="list" href="">朋友</a></li> <li><a class="list" href="">爱人</a></li> <li><a class="list" href="">姐妹</a></li> </ul> </div> <div> <h4>风味</h4> <ul> <li><a class="list" href="">巧克力</a></li> <li><a class="list" href="">水果</a></li> </ul> </div> </div> </ul> </li> <li class="dropdown"><a href="#">专用<span class="caret"></span></a></li> <li class="dropdown"><a href="#">商铺<span class="caret"></span></a></li> </ul> <ul class="row-2"> <li class="glyphicon glyphicon-search"></li> <form class="search form" action=""> <div class="caret"></div> <input class="input" type="text"> <button class="btn">搜</button> </form> <li class="glyphicon glyphicon-user"></li> <form action="" class="user form"> Email<br> <input type="text" class="email input"> Password<br> <input type="text" class="password input"> <button class="btn">登录</button><br> <input type="checkbox" class="checkbox">记住 <p style="text-align: center;"><a href="#">新用户？</a><a href="#">注册 |</a> <a href="#">忘记密码</a></p> </form> <li class="glyphicon glyphicon-shopping-cart"></li> <form class="cart form" action=""> <p>$0.00(0)</p> <button class="btn">空</button> </form> </ul> </div> </header> <div class="banner"> <div class="container"> <div class="col-md-4 col-sm-4 col-xs-4"> <p><span>IMOOC</span> 蛋糕</p> <p>特别的日子，特别的你</p> <button>SHOP NOW</button> </div> <div class="img col-md-4 col-sm-4 col-xs-4 col-md-push-4 col-xs-push-4 col-sm-push-4"> <img src="img/2.png" alt=""> </div> </div> </div> <div class="gallery"> <div class="container"> <div class="row"> <div class="col-md-8 col-sm-8 col-xs-8"> <img src="img/g1.jpg" alt=""> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <img src="img/g2.jpg" alt=""> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-3 col-sm-4 col-xs-4"> <img src="img/g3.png" alt="" class="cake-image"> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-3 col-sm-4 col-xs-4"> <img src="img/g4.png" alt=""> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-3 col-sm-4 col-xs-4"> <img src="img/g5.png" alt=""> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-3 col-sm-4 col-xs-4"> <img src="img/g6.png" alt=""> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-3 col-sm-4 col-xs-4"> <img src="img/g7.png" alt=""> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-3 col-sm-4 col-xs-4"> <img src="img/g8.png" alt=""> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-3 col-sm-4 col-xs-4"> <img src="img/g9.png" alt=""> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> <div class="col-md-3 colo-sm-4 col-xs-4"> <img src="img/g10.png" alt=""> <p style="font-weight: bold;">Lorem Ipsum is simply</p> <p> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span> <span>$95.00</span> </p> <div class="layer"> <p class="glyphicon glyphicon-eye-open"> view</p> <button>SHOP NOW</button> </div> </div> </div> </div> </div> <div class="subscribe container"> <p>Newsletter</p> <div> <input type="text" placeholder="Email" class="email"> <button>Subscribe</button> </div> </div> <div class="footer-bottom container"> <div class="row row-first"> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2" style="font-size: 16px; color: #F07818;">COMPANY</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2" style="font-size: 16px; color: #F07818;">SERVICE</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2" style="font-size: 16px; color: #F07818;">ORDER & RETURNS</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2" style="font-size: 16px; color: #F07818;">LEGAL</div> </div> <div class="row"> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Products</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Support</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Order Status</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Privacy</div> </div> <div class="row"> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Work Here</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">FAQ</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Shopping Policy</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Privacy</div> </div> <div class="row"> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Team</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Warranty</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Return Policy</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2 ">Socail Responsbility</div> </div> <div class="row"> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Happenings</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Contact Us</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Degitial Gift Card</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2"></div> </div> <div class="row"> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2">Deeler Ocator</div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2"></div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2"></div> <div class="col-md-2 col-sm-3 col-xs-3 col-md-push-2"></div> </div> </div> <footer>Copyright ©2017 imooc.com All Rights Reserved|京ICP备 13046642号 2</footer> <script> </script> </body> </html>
*{
margin: 0;
padding: 0;
border: 0;
}
li{
list-style: none;
display: inline;
}
a{
text-decoration: none;
}
header{
background: #5D4B33;
width: 100%;
height: 50px;
}
header .container .img{
float: left;
margin-right: 30px;
line-height: 50px;
}
header .container .row-1{
float: left;
height: 50px;
}
header .container .row-1 li{
height: 50px;
}
header .container .row-1 li:hover{
background: #F07818;
}
header .container .row-1 li a{
color: #fff;
}
header .container .row-1 li a:hover{
background: #F07818;
}
header .container .row-1 li a:focus{
background: transparent;
}
header .container .row-2{
float: right;
}
header .container .row-2 li{
}
header .container .row-2 .search{
padding-top: 10px;
position: absolute;
top: 50px;
width: 300px;
height: 70px;
left: 585px;
text-align: center;
line-height: 70px;
display: none;
background: #fff;
z-index: 999;
}
header .container .row-2 .search .caret{
position: absolute;
top: -14px;
left: 275px;
color: #fff;
transform: rotate(180deg);
}
header .container .row-2 .search .input{
height: 30px;
width: 200px;
border: 1px solid #F07818;
}
header .container .row-2 .search .btn{
display: inline-block;
height: 30px;
width: 60px;
background: #F07818;
color: #fff;
}
header .container .row-2 .user{
position: relative;
width: 265px;
height: 260px;
background: #fff;
z-index: 999;
top: 0;
left: -140px;
padding: 10px;
display: none;
}
header .container .row-2 .user .input{
width: 230px;
margin: 10px auto;
border: 1px solid black;
height: 30px;
}
header .container .row-2 .user .btn{
width: 230px;
margin: 10px auto;
background: #F07818;
color: #fff;
height: 30px;
}
header .container .row-2 .user .btn:focus{
cursor: pointer;
color: black;
background: #F07818;
border: 1px solid #F07818;
}
header .container .row-2 .user .checkbox{
display: inline-block;
}
header .container .row-2 .user p a{
color: #2e2e2e;
}
header .container .row-2 .user p a:nth-child(2){
color: #F07818;
}
header .container .row-2 .cart{
position: relative;
padding: 10px;
width: 230px;
height: 110px;
background: #fff;
top: -5px;
left: -65px;
display: none;
}
header .container .row-2 .cart p{
text-align: center;
}
header .container .row-2 .cart .btn{
width: 200px;
color: #fff;
margin: 5px auto;
background: #F07818;
}
header .container .row-2 .cart .btn:hover{
color: #F07818;
border: 1px solid #F07818;
background: #ffffff;
}
header .container .row-2 .glyphicon{
border-left: 1px solid #fff;
color: #fff;
height: 58px;
padding: 20px 20px 0 20px;
cursor: pointer;
}
#active{
background: #F07818;
}
.banner{
width: 100%;
background: #f2f6f7;
padding-top: 200px;
cursor: pointer;
padding-bottom: 50px;
}
.banner .container div p span{
color: #5D4B33;
}
.banner .container div p{
color: #F07818;
}
.banner .container div button{
border: 4px solid #5D4B33;
width: 200px;
height: 32PX;
background: #fff;
color: #5D4B33;
font-size: 20px;
font-weight: bold;
margin-top: 20px;
}
.banner .container div button:hover{
border-color: #F07818;
color: #F07818;
}
.banner .container div p:nth-child(1){
font-size: 46px;
}
.banner .container div p:nth-child(2){
font-size: 20px;
}
.gallery {
padding-top: 100px;
}
.gallery .container .row div p{
padding-top: 5px;
}
.gallery .container .row div p span:last-child {
float: right;
padding-right: 10px;
color: grey;
}
.gallery .container .row div img{
width: 100%;
height: 400px;
border: 1px solid grey;
}
.gallery .layer{
position: relative;
top: -120px;
width: 100%;
height: 50px;
background: black;
opacity: 0.6;
}
.gallery .layer p{
margin-top: 10px;
height: 30px;
color: #fff;
margin-left: 5px;
}
.gallery .layer button{
width: 100px;
border: 2px solid #fff;
color: #fff;
background: transparent;
height: 30px;
float: right;
margin-top: 10px;
margin-right: 5px;
}
.gallery .layer button:hover{
border: 2px solid #5D4B33;
color: #5D4B33;
opacity: 1;
}
.subscribe{
background: #5D4B33;
padding: 100px 0;
margin: 80px auto;
text-align: center;
background: url(../img/slid.jpg) no-repeat fixed;
}
.subscribe p{
text-align: center;
font-size: 46px;
color: #fff;
}
.subscribe div{
width: 485px;
margin: 0 auto;
}
.subscribe div input{
float: left;
width: 360px;
height: 40px;
}
.subscribe div button{
float: left;
height: 40px;
width: 120px;
background: #F07818;
color: #fff;
}
.subscribe div button:hover{
background: transparent;
color: #F07818;
border: 1px solid #F07818;
}
.footer-bottom div{
font-size: 12px;
color: gray;
margin: 5px 0;
cursor: pointer;
}
.footer-bottom div:hover{
color: #F07818;
}
footer{
height: 80px;
width: 100%;
text-align: center;
line-height: 80px;
background: #5D4B33;
color: #fff;
margin-top: 80px;
}写回答
1回答
-
Miss路
2018-12-09
同学，你好，因为你的文件不全面，还有好几个bootstrap文件和css文件没有上传，课程中老师也没有用到这几个，不知道你这几个文件是什么样的，按照你的代码配合老师讲课的bootstrap文件进行了测试，样式出不来。建议同学直接提交作业吧，在作业中把问题说清楚，批作业的老师也会为你做详细的解答。
如果帮助到了你，欢迎采纳！
0
相似问题