怎么让红色区域全在顶部下方?
<!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="bg">
<div class="container">
<div class="first_left">
<h1>IMOOC</h1><span>蛋糕</span>
<p>特别的日子特别的你</p>
<div class="show-now"><a href="#">SHOP NOW</a></div>
</div>
<div class="first_right"></div>
</div>
</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>
</body>
</html>
/*顶部*/
#page-head{background-color: #5D4B33;width: 100%;position: fixed;z-index: 99;opacity: 0.5}
.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;}
.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;}
.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;}
.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 .bg{background-color: red;height: 630px;width: 100%;}
@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);}
}
@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;}
}14
收起
正在回答
1回答
用填充。给 .page-first设置padding-top一个头部的高度就可以了。祝学习愉快！
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星