这就是网站的样子: https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/index.html
然而,底部部分彼此相邻而不是下方。这是代码: (HTML) http://pastie.org/10325555
答案 0 :(得分:2)
只需几个调整!这是我的fiddle
.container {
max-width: 928px;
position: relative;
display: block;
!important
}
h1,
h2,
p,
a {
font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
}
h1 {
font-size: 64px;
font-weight: 100;
margin-bottom: 20px;
}
a {
font-size: 18px;
font-weight: 200;
}
.btn:link {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
a:active {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
a:hover {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
a:visited {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
#main {
background: url("https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg") no-repeat center center;
background-size: cover;
height: 550px;
}
.main p {
font-size: 26px;
font-weight: 200;
margin-bottom: 40px;
}
section .row {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #dbdbdb;
}
.section h2 {
font-size: 50px;
}
.store {
text-align: center;
border-bottom: 0px;
padding-bottom: 0px
}
footer {
position: relative;
display: block!important;
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
}
.footer ul {
list-style-type: none;
padding-left: 0;
}
.footer li {
color: #999;
font-weight: 600;
}
@media (max-width: 500px) {
.col-md-6 img {
padding: 50px;
width: 100%;
}
}
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<body>
<div id="main">
<div class="container">
<h2>Heading</h2>
<p>Paragraph Text</p> <a class="btn" href="#">Download Shutterbug</a>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Paragraph</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png">
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Text Text Text Text Text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png">
</div>
<div class="col-md-6">
<h2>Heading<h3>
<p>Text Text Text</p>
<div>
</div>
<div class="store">
<div class="container">
<h2>Available for iPhone, iPad, and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
<img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Company</h2>
<ul>
<li>Careers</li>
<li>Terms</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-4">
<h2>Products</h2>
<ul>
<li>Shutterbugg</li>
<li>Speakerboxx</li>
</ul>
</div>
<div class="col-md-4">
<h2>News</h2>
<ul>
<li>Blog</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Myspace</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
答案 1 :(得分:1)
您需要清理课程页脚的填充底部。
.footer {
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
padding-bottom: 0px;
}
我希望它可以帮助你。