0
我正在創建佈局來測試我的技能。我遇到了一個有關佈局的問題：瞭解佈局
我創建了一個條形圖（請參見圖像），但是這個圖形與卡 divs（400x200圖像）重疊。表單中的幾個元素（位於小節 div內）放置在應該出現的頁面底部，但彩色條以錯誤的方式放置。 你可以看到你的眼睛的結果和代碼。 我附上了我想要達到的結果的照片。
事與願違的結果： 
$(function(){
var $buttonNav = $('.header__icon-bar');
var degree = 45;
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
$buttonNav.toggleClass('animate');
if($('.header__nav').hasClass('is-open')){
$('.header__icon-bar').css('transform','rotate(90deg)')
}else{
$('.header__icon-bar').css('transform','rotate(0deg)')
}
});//end of click event
});//end of $(document).ready()/*----------
GENERAL
-----------*/
html,body{ width: 100%; margin: 0; padding: 0; }
body{ background: #eee; }
.animate{
-webkit-trasform: rotate(90deg);
-ms-trasform: rotate(90deg);
trasform: rotate(90deg);
}
/*----------
HEADER
-----------*/
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px; position: relative; z-index: 100;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none; text-transform: uppercase; }
.header__nav__item a:hover { background: #ff3333; }
/*----------
cover
-----------*/
.cover{ background-color: #333; height: 80% ; width: 100%;position: relative; margin-top: 90px; padding: 30px;}
.cover__text { color: white; width: 95%; position: relative; left: 40px; }
.cover__text p{ color: #999999; font-size: 20px; }
.line-through{padding: 1px; width: 750px; height: 1px; background-color: #e6ccb3; display: table; margin: 0 auto; z-index: 30px;}
.cover__image{ margin: 0; padding: 0; float: left; z-index: 3; width: 600px; height: 400px; z-index: 20; background-image: url(http://www.dejana.com/wp-content/uploads/2014/08/550x370.png);
background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-position: center; }
.cover__button { margin: 0 auto; display: table; padding: 20px}
.cover__button a{ padding: 20px; background-color: #ff3333;border-radius: 5px; text-decoration: none; color: black; font-weight: bold;}
.cover__button a:hover{ background: #eee; color: #ff3333; }
/* HIDING OVERFLOW ELEMENTS
html,body{overflow-x: hidden;}
*/
/*---------
CARD
----------*/
.card{ position: relative; margin-top: 30px; max-width: 1440px;}
.card__img {float: right; margin: 20px 10px; width: 400px; height: 200px}
.card__img:hover{opacity: 0.5}
/*----------
ICON-BAR
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}
/*----------
ICON-BAR
-----------*/
.bar{ background-color: #333; height: 50px; border: 1px red solid; margin:0; padding: 0}
/*----------
SMARTPHONE
-----------*/
@media(max-width: 960px) {
/*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; }
.header__nav__item { display: block; padding: 20px; margin: 0; position: relative;}
.header__nav__item a{ width: 100%;padding-right: 100%;}
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}
/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left; position: absolute;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}
/*cover*/
.cover{ height: auto; padding: 10px; margin-top: 30px; width: 100%}
.cover__image{ padding: 0; margin: 0; width: 97%; height: 400px; display: block; }
.cover__text{ margin: 0; left: 0; top: 20px; padding: 10px; width: 100%; display: block; overflow-y: scroll;}
.cover__text p {font-size: 16px}
.line-through{ width: 90%}
.cover__button { margin-top: 15px; position: relative; margin-bottom: 10px;}
.cover__button a{ padding: 10px; font-size: 15px;}
/*cards*/
.card{ margin-top: 50px }
.card__img{ margin: 0 ; padding: 10px 20px; }
}/*END OF @font-face */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*----------
CLEARFIX
-----------*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
<div class="header__background">
<a class="header__icon-bar animate" href="">
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul class="header__nav">
<li class="header__nav__item"> <a href="#"> Home </a> </li>
<li class="header__nav__item"> <a href="#"> Contact </a> </li>
<li class="header__nav__item"> <a href="#"> Apply </a> </li>
<li class="header__nav__item"> <a href="#"> About </a> </li>
</ul>
</header>
<div class="cover">
<div class="cover__image"></div>
<div class="cover__text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<span class="line-through"></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="cover__button"><a href=""> Buy a New Course</a></div>
</div>
<section class="card">
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
</section>
<section class="card">
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
<img class="card__img" src="http://tempuss.it/wp-content/uploads/2015/11/x400X200.gif.pagespeed.ic.ImNMmRjNoW.png" />
</section>
<div class="bar ">
<form action="" method="get">
<label for="email">Email</label><input type="email" name="email" value="[email protected]">
<input type="submit" value="Iscriviti"/>
</form>
</div>