1. 那三个图标怎么才能一直在上方 2. subscribe区域的placeholder的颜色怎么改
<!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"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/css.css"> <link rel="stylesheet" type="text/css" href="css/reset.css"> </head> <body> <!-- 顶部 --> <section id="page-head"> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">IMOOC</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">生日 <span class="caret"></span></a> <ul class="dropdown-menu"> <ul>关系 <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </ul> <ul>风味 <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> </ul> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">婚礼 <span class="caret"></span></a> <ul class="dropdown-menu"> <ul>关系 <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </ul> <ul>风味 <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> </ul> <ul>主旋律 <li><a href="#">心形</a></li> <li><a href="#">卡通</a></li> </ul> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">专用 <span class="caret"></span></a> <ul class="dropdown-menu"> <ul>关系 <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </ul> <ul>风味 <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> </ul> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">商铺 <span class="caret"></span></a> <ul class="dropdown-menu"> <ul>关系 <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </ul> <ul>风味 <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> </ul> </ul> </li> </ul> <ul class="navbar-right"> <!-- 顶部的第一个图标内容 --> <a href="#"><span class="glyphicon glyphicon-search"> <div class="triangle"></div> <div class="search_wrap"> <div class="search_content"> <div class="orange_square">搜</div> </div> </div> </span></a> <!-- 顶部的第二个图标内容 --> <a href="#"><span class="glyphicon glyphicon-user"> <div class="triangle"></div> <div class="wrap_glyphicon-user"> <div class="a"> <div class="email">Email</div> <input type="text"> <div class="password">Password</div> <input type="password"> <input type="submit" value="登录" id="login"> <div class="checkbox"><input type="checkbox" class="b"><div class="remember">记住</div></div> <span class="bo">新用户?<div class="registered">注册</div> | 忘记密码?</span> </div> </div> </span></a> <!-- 顶部的第三个图标内容 --> <a href="#"><span class="glyphicon glyphicon-shopping-cart"> <div class="triangle"></div> <div class="search_wrap"> <div class="glyphicon-shopping-cart-content">$0.00(0)</div> <div class="search_content">空</div> </div> </span></a> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> </section> <!-- banner区域 --> <section class="page-first"> <div class="container"> <div class="first_left"> <div class="wrap_imooc">IMOOC<span>蛋糕</span></div> <p>特别的日子.特别的你</p> <div class="show-now"><a href="#">SHOP NOW</a></div> </div> <img src="image/2.png"> </div> </section> <!-- gallery --> <section class="page-second"> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> <div class="border_picture picture_1"> <div class="wrap_image"><img src="image/g1.jpg"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"> <div class="border_picture picture_2"> <div class="wrap_image"><img src="image/g2.jpg"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <div class="border_picture picture_3"> <div class="wrap_image"><img src="image/g3.png" class="p"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <div class="border_picture"> <div class="wrap_image"><img src="image/g4.png"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <div class="border_picture"> <div class="wrap_image"><img src="image/g5.png"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <div class="border_picture"> <div class="wrap_image"><img src="image/g6.png"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <div class="border_picture"> <div class="wrap_image"><img src="image/g7.png"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <div class="border_picture"> <div class="wrap_image"><img src="image/g8.png"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <div class="border_picture"> <div class="wrap_image"><img src="image/g9.png"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6"> <div class="border_picture"> <div class="wrap_image"><img src="image/g10.png"> <div class="wrap_image_border"> <div class="l"><img src="image/aa.png"> <div class="v">View</div></div><span class="show-now"><a href="#">SHOP NOW</a></span> </div> </div> <p>Lorem lpsum issimply</p> <div class="textleft">⭐⭐⭐⭐⭐</div> <div class="textright">$95.00</div> </div> </div> </div> </div> </section> <!-- subscribe区域 --> <section class="page-third"> <img src="image/slid.jpg"> <div class="container third-wrap"> <div class="third-container"> <h1>Newsletter</h1> <input type="email" placeholder="Email" class="email"> <input type="submit" value="button" class="submit"> </div> </div> </section> <!-- footer-bottom区域 --> <section class="fourth"> <div class="container"> <div class="fourth_content row"> <div class="col-lg-3 col-sm-4"> <ul>COMPANY <li>Products</li> <li>Work Here</li> <li>Team</li> <li>Happeninge</li> <li>deeler Locator</li> </ul> </div> <div class="col-lg-3 col-sm-4"> <ul>COMPANY <li>Products</li> <li>Work Here</li> <li>Team</li> <li>Happeninge</li> <li>deeler Locator</li> </ul> </div> <div class="col-lg-3 col-sm-4"> <ul>COMPANY <li>Products</li> <li>Work Here</li> <li>Team</li> <li>Happeninge</li> <li>deeler Locator</li> </ul> </div> <div class="col-lg-3 col-sm-4"> <ul>COMPANY <li>Products</li> <li>Work Here</li> <li>Team</li> <li>Happeninge</li> <li>deeler Locator</li> </ul> </div> </div> </div> </section> <!-- footer区域 --> <footer> <div class="bottom">Copyright @ 2017 imooc.com All Right Reeerwed | 京ICP备 13046642号 2</div> </footer> <!-- 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> </body> </html>
/*顶部*/
#page-head{background-color: #5D4B33;width: 100%;z-index: 99;}
.navbar-default{border:none;margin-bottom: 0;background-color: #5D4B33;}
/*顶部左边样式*/
.navbar-default .navbar-brand{color: white;font-size: 30px;line-height: 40px;}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover{color: white;background-color: #F07818;
padding-left: 20px;padding-right: 20px;font-size: 16px;}
/*首页字样右边的样式*/
.navbar-default .navbar-nav>li>a{color: #ffffff;padding-top: 25px;padding-bottom: 25px;font-size: 16px;border-left: 1px solid rgba(255,255,255,0.2);text-align: center;}
.navbar-default .navbar-nav>li>a:hover{background-color: #F07818;color: #fff;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{color: #fff;background-color: #F07818;}
.dropdown .dropdown-menu {width:40vw;}
.dropdown .dropdown-menu ul{float: left;margin: 20px 30px 20px 50px;color: #F07818;font-size: 16px;}
.dropdown .dropdown-menu ul li{margin:20px 60px 20px 0;font-size: 15px;}.dropdown .dropdown-menu ul li a:hover{color:#F07818; text-decoration: none;}
/*顶部右边第一个图标*/
.glyphicon{font-size: 20px;line-height: 70px;border-left: 1px solid rgba(255,255,255,0.2);width: 4rem;top: 0;text-align: center;
color: #fff;position: relative;}
.glyphicon-search .search_wrap{position: absolute;bottom: -150px;width: 320px;height: 150px;background-color:#fff;left: -260px;display: none;z-index: 1;}
.search_content{width: 250px;height: 42px;border:1px solid #F07818;position: absolute;left: 50%;top: 50%;margin-top: -21px;margin-left: -125px;}
.orange_square{width: 60px;height: 100%;background-color: #F07818;text-align: center;line-height: 35px;float: right;}
.triangle{width: 0;height: 0;border-width: 12px;border-style: solid;border-color: transparent
transparent #fff transparent;position: absolute;right: 19px;bottom: 0;display: none;}
.glyphicon-search:hover .search_wrap{display: block;}
.glyphicon-search:hover .triangle{display: block;}
.glyphicon-user:hover .triangle{display: block;}
.glyphicon-shopping-cart:hover .triangle{display: block;}
.glyphicon-user:hover .wrap_glyphicon-user{display: block;display: flex;justify-content: center;align-items: center;}
#login:hover{background-color: transparent;border:1px solid #F07818;color: #F07818;}
.glyphicon-shopping-cart:hover .search_wrap{display: block;}
.glyphicon-shopping-cart .search_wrap .search_content:hover {border:1px solid #F07818;background-color: transparent;color: #F07818;}
/*顶部右边第二个图标*/
.wrap_glyphicon-user{position: absolute;height: 300px;width: 320px;background-color: #fff;bottom: -300px;left: -260px;display: flex;
justify-content: center;align-items: center;color: gray;border:1px solid rgb(200,200,200);display: none;border-top: none;z-index: 1;}
.wrap_glyphicon-user .a{width: 90%;height: 260px;position: relative;}
.wrap_glyphicon-user .a input{width: 100%;margin-bottom: 35px;height: 35px;border:none;border-radius: 2px;}
.wrap_glyphicon-user .a input:nth-child(2),.wrap_glyphicon-user .a input:nth-child(4){box-shadow: 0 0 1px gray;text-indent: 10px;}
.wrap_glyphicon-user .a input:nth-child(5){position: absolute;top: 160px;background-color:#F07818;font-size: 16px; left: 0;color: #eee;}
.a .password{position: absolute;top: 70px;}
.a .password,.email{height: 30px;text-align: left;line-height: 30px;}
.checkbox input.b{height: 15px;position: absolute;top: 5px;width: 15px;left: 19px;}
.checkbox{height: 30px;line-height: 30px;font-size: 12px;position: relative;}
.remember{position: absolute;left: 20px;}
span .bo{font-size: 12px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;height: 40px;}
.registered{color: #F07818;margin-left: 5px}
/*顶部右边第三个图标*/
.glyphicon-shopping-cart .search_wrap{position: absolute;bottom: -150px;width: 280px;height: 150px;background-color:#fff;left: -200px;display: none;z-index: 1;}
.glyphicon-shopping-cart .search_content{width: 200px;height: 42px;position: absolute;left: 50%;top: 70%;margin-left: -100px;line-height: 42px;background-color: #F07818}
.glyphicon-shopping-cart-content{color:gray;}
/*banner区域*/
.page-first{background-color: #f2f6f7;width: 100%;margin-bottom: 40px;position: relative;}
.page-first .first_left{height: 400px;width: 350px;text-align: left;}
.wrap_imooc{margin-top: 250px;margin-bottom: 25px;font-size: 45px;color: #5D4B33;}
.wrap_imooc span{color: #F07818;margin-left: 10px;}
.first_left .show-now{border:3px solid #5D4B33;width: 140px;height:35px;text-align: center;margin-top: 20px;line-height: 30px;font-weight: bolder;}
.show-now a{color: #5D4B33;}
.show-now:hover {border-color: #F07818;}
.show-now:hover a{color: #F07818;text-decoration: none;}
.first_left p{color: #5D4B33;}
.page-first img{width: 300px;height: 270px;position: absolute;right: 20vw;top: 200px;}
/*gallery区域*/
.border_picture{position: relative;}
.border_picture p{color: black;font-weight: bolder;font-size: 16px;}
.border_picture .textleft{margin-top: 7px;}
.border_picture .textright{position: absolute;right: 20px;bottom: 0;font-size: 20px;}
.border_picture img{width: 100%;position: relative;}
.wrap_image{position: relative;color: #fff;display: flex;justify-content: center;align-items: center;}
.wrap_image_border{width: 100%;height: 50px;background-color: rgba(0,0,0,0.7);position: absolute;bottom: 0;padding: 0 15px 0 15px;
display: flex;justify-content: space-between;align-items: center;display: none;}
.wrap_image_border .show-now a{color: #fff;transition: 0.5s;font-size: 10px;}
.wrap_image_border .show-now{width: 100px;height:25px;border:1px solid #fff;text-align: center;transition: 0.3s;}
.wrap_image_border img{height: 25px;width: 25px;}
.wrap_image_border .show-now:hover {border-color: #F07818;}
.wrap_image_border .show-now:hover a{color: #F07818;text-decoration: none;}
.v{float: right;margin-left: 10px;}
.wrap_image:hover .wrap_image_border{display: block;display: flex;justify-content: space-between;align-items: center;}
.l{display: flex;justify-content:center;align-items: center;}
/*subscribe区域*/
.page-third{width: 100%;height: 500px;margin-top: 100px;margin-bottom: 30px;position: relative;overflow:hidden;}
.third-container{height: 150px;width: 40vw;text-align: center;}
.third-container .email{width: 80%;height: 50px;float: left;text-indent: 10px;border:none;background:rgba(255,255,255,0.2);}
.third-container .submit{width: 20%;height: 50px;float: right;color: #fff;background-color: #F07818;border:none;transition: 0.5s;}
.third-container h1{font-size: 4vw;color: #fff;margin-bottom:5vw}
.third-wrap{display: flex;justify-content: center;height: 100%;width: 100%;position: absolute;top: 0;align-items: center;}
.page-third img{transform-origin: bottom left;transform: scale(4);}
.submit:hover{color: #F07818;background-color: transparent;border:1px solid #F07818;}
/*footer-bottom区域*/
.fourth_content{margin-bottom: 100px;}
.fourth_content ul{color: #F07818;font-size: 25px;margin-top: 50px;}
.fourth_content ul li{font-size: 18px;margin-top: 20px;color: gray;opacity: 0.8;}
/*footer区域*/
.bottom{height: 80px;width: 100%;background-color: #5D4B33;text-align: center;line-height: 80px;}
@media screen and (max-width:1200px) and (min-width: 992px){
.picture_2 img{height: 353px;}
.border_picture .textright{right: 0px;}
.page-first img{margin-right: -80px;}
.l img{height: 25px;}
}
@media screen and (max-width: 992px) and (min-width: 768px){
.navbar-default .navbar-nav>li>a{padding-top: 20px;padding-bottom: 20px;font-size: 10px;}
.glyphicon{line-height: 60px;}
.navbar-default .navbar-nav>.active>a{font-size: 12px;}
.navbar-default .navbar-brand{line-height: 33px;}
.glyphicon{font-size: 15px;width: 3rem;}
.checkbox input.b{top: 20px;}
.remember{top: 15px;}
.glyphicon-user .wrap_glyphicon-user,.glyphicon-search .search_wrap
,.glyphicon-shopping-cart .search_wrap{transform-origin: top right;transform: scale(0.7);}
.first_left,.page-first img{transform: scale(0.9);right: 10vw;}
.page-first{height: 580px;}
.picture_2 img{height: 269px;}
.page-first{margin-bottom: 40px;}
.third-container .email,.third-container .submit{height: 40px;}
.l img{height: 25px;}
}
@media screen and (max-width: 768px){
.navbar-default .navbar-brand{line-height: 24px;}
.navbar-default .navbar-toggle,.navbar-default .navbar-toggle:focus{border:none;background-color: #F07818;margin-right: 45%;}
.navbar-default .navbar-toggle .icon-bar{background-color: #fff;}
.glyphicon{line-height: 50px;}
.navbar-default .navbar-nav>li>a{padding-top: 15px;padding-bottom: 15px;border:none;}
.first_left,.page-first img{transform: scale(0.7);top: 120px;right: 5vw;}
.page-first{height: 500px;}
.border_picture{margin-top: 20px;}
.picture_3{margin-top: 45px;}.picture_3 .wrap_image:first-child{margin-bottom: 30px;}
.page-first{margin-bottom: 30px;}
.picture_1 img{transform: scale(1);}
.wrap_imooc{margin-top: 150px;}
.third-container .email,.third-container .submit{height: 30px;}
.third-container .submit{font-size: 12px;}
.page-third{height: 400px;}
}
@media screen and (max-width: 560px){
.page-first{height: 350px;}
.page-first{margin-bottom: 10px;}
.page-first img{transform: scale(0.4);margin-right: -50px;top: 50px;}
.wrap_imooc{margin-top: 70px;}
.page-first .first_left{transform: scale(0.6);margin-left: -50px;}
.border_picture .textright{font-size: 10px;}
.border_picture .textleft{font-size: 12px;}
.border_picture p{font-size: 10px;}
.third-container .submit{font-size: 10px;}
.page-third{height: 320px;}
}
正在回答
不要把右部分跟左边的存放在一个div里，放到div外边，然后设置左边部分的div左浮。
placeholder这个要设置背景图片，你设置背景图片，然后设置背景图片的定位为固定
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星