为什么我的身体不适应网页中的内容

时间：2017-04-12 19:18:48

标签： html css document-body

在使用叠加网格尝试为页面内容时，我试图放置的内容超出了身体边界？我正在努力解决它，但我不知道怎么做？香港专业教育学院尝试在CSS中制作身体参考，以及调整高度，但没有进展。这是我的代码。

header {
  height: 900px;
  background-image: url('../img/large-banner-image.png');
  background-repeat: no-repeat;
  background-position: center top;
}

span {
  font: 60px Pacifico, sans-serif;
  font-weight: 400;
}

.Header-Type {
  vertical-align: -16px
}

img {
  display: inline-block;
  margin: 17px;
}

h1 {
  text-align: center;
  position: relative;
  top: 62px;
  right: 13px;
}

h2 {
  font: 22px Raleway, sans-serif;
  font-weight: 700;
}

p {
  font: 36px Raleway, sans-serif;
  font-weight: 300;
  text-align: center;
  position: relative;
  top: 90px;
}

.grey {
  text-align: center;
  position: relative;
  height: 427px;
  width: 1600px;
  background-color: #e3e3e3;
  bottom: -250px;
  z-index: -1
}

.Phone {
  float: right;
  position: relative;
  display: inline-block;
  top: -567px;
  right: 33.5%;
  border-style: solid;
}

.Down-Arrow {
  text-align: center;
  position: relative;
  top: -574px;
}

.white-button1 {
  float: right;
  display: inline-block;
  position: absolute;
  right: 53%;
  bottom: -260px;
  border-style: solid;
  z-index: 1;
}

.white-button2 {
  float: right;
  display: inline-block;
  position: absolute;
  right: 53%;
  bottom: -60px;
  border-style: solid;
  z-index: 1;
}

.white-button3 {
  float: right;
  display: inline-block;
  position: absolute;
  right: 44%;
  bottom: 19px;
  border-style: solid;
}

.black-button {
  float: right;
  display: inline-block;
  position: absolute;
  right: 43.4%;
  bottom: -170px;
  border-style: solid;
}

.cursor {
  float: right;
  display: inline-block;
  position: absolute;
  right: 43.4%;
  bottom: -172px;
  border-style: solid;
}

.angle {
  float: right;
  display: inline-block;
  position: absolute;
  right: 35.8%;
  bottom: -267px;
  border-style: solid;
}

.cursor {
  float: right;
  display: inline-block;
  position: absolute;
  right: 43.4%;
  bottom: -174px;
  border-style: solid;
  z-index: 1;
}

.content-alt {
  float: left;
  margin-left: 100px;
  margin-left: 5%;
  position: absolute;
  top: 750px;
  left: 170px;
  width: 20%;
}

.content-alt2 {
  float: left;
  margin-left: 100px;
  margin-left: 5%;
  position: absolute;
  top: 918px;
  left: 170px;
  width: 20%;
}

.content {
  float: right;
  margin-right: 100px;
  margin-right: 5%;
  position: absolute;
  top: 750px;
  right: 165px;
  width: 20%;
}

.content2 {
  float: right;
  margin-right: 100px;
  margin-right: 5%;
  position: absolute;
  top: 918px;
  right: 165px;
  width: 20%;
}

.alternate {
  float: left;
  margin-left: 100px;
  margin-left: 5%;
  position: absolute;
  left: 110px;
  width: 36%;
}

.other {
  display: none;
  text-align: center;
}

.near-bottom {
  display: none;
  text-align: center;
}

footer {
  word-spacing: 30px;
}

.text {
  font: 16px HelveticaNeue, sans-serif;
  line-height: 1.6;
  font-weight: 400;
}

.footer {
  display: none;
  font: 16px HelveticaNeue, sans-serif;
  font-weight: 400;
}

.Image {
  display: none;
  text-align: center;
}
<header>
  <h1> <img style="vertical-align:middle" src="img/focus.png" /><span class="Header-Type">Focus</span></h1>
  <p>A landing page for your app with focus</p>
</header>

<div class="Down-Arrow">
  <img src="img/down-arrow.png" />
</div>

<div id="white">

  <div class="Phone">
    <img src="img/iphone.png" />
  </div>

  <div class="white-button1">
    <img src="img/white-dot.png" />
  </div>

  <div class="white-button2">
    <img src="img/white-dot.png" />
  </div>

  <div class="white-button3">
    <img src="img/white-dot.png" />
  </div>
</div>

<div class="black-button">
  <img src="img/Black-dot.png" />
</div>

<div class="cursor">
  <img src="img/cursor.png" />
</div>

<div class="angle">
  <img src="img/angled-line.png" />
</div>

<div class="grey"></div>

<div id="text-content">

  <div class="content-alt">
    <h2>Great Feature</h2>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
  </div>

  <div class="content">
    <h2>Great Feature</h2>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
  </div>

  <div class="content-alt2">
    <h2>Another Great Feature</h2>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
  </div>

  <div class="content2">
    <h2>Another Great Feature</h2>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
  </div>
</div>

<div class="alternate">
  <h2>Get The App Today!</h2>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id sollicitudin
    ante lobortis at.</div>
</div>

<div class="other">
  <h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
  <div>Kyle Turner, Blogger</div>
</div>

<div class="Image">
  <img src="img/people.png" />
</div>

<div class="near-bottom">
  <h4>Say Hi & Get in Touch</h4>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>

<footer>
  <p class="footer">Contact Download Press Email Support</p>
</footer>

1 个答案:

答案 0 :(得分：0)

将.grey宽度更改为100%。

＆＃13;
＆＃13; 
header {
  height: 900px;
  background-image: url('../img/large-banner-image.png');
  background-repeat: no-repeat;
  background-position: center top;
}

span {
  font: 60px Pacifico, sans-serif;
  font-weight: 400;
}

.Header-Type {
  vertical-align: -16px
}

img {
  display: inline-block;
  margin: 17px;
}

h1 {
  text-align: center;
  position: relative;
  top: 62px;
  right: 13px;
}

h2 {
  font: 22px Raleway, sans-serif;
  font-weight: 700;
}

p {
  font: 36px Raleway, sans-serif;
  font-weight: 300;
  text-align: center;
  position: relative;
  top: 90px;
}

.grey {
  text-align: center;
  position: relative;
  height: 427px;
  width: 100%;
  background-color: #e3e3e3;
  bottom: -250px;
  z-index: -1
}

.Phone {
  float: right;
  position: relative;
  display: inline-block;
  top: -567px;
  right: 33.5%;
  border-style: solid;
}

.Down-Arrow {
  text-align: center;
  position: relative;
  top: -574px;
}

.white-button1 {
  float: right;
  display: inline-block;
  position: absolute;
  right: 53%;
  bottom: -260px;
  border-style: solid;
  z-index: 1;
}

.white-button2 {
  float: right;
  display: inline-block;
  position: absolute;
  right: 53%;
  bottom: -60px;
  border-style: solid;
  z-index: 1;
}

.white-button3 {
  float: right;
  display: inline-block;
  position: absolute;
  right: 44%;
  bottom: 19px;
  border-style: solid;
}

.black-button {
  float: right;
  display: inline-block;
  position: absolute;
  right: 43.4%;
  bottom: -170px;
  border-style: solid;
}

.cursor {
  float: right;
  display: inline-block;
  position: absolute;
  right: 43.4%;
  bottom: -172px;
  border-style: solid;
}

.angle {
  float: right;
  display: inline-block;
  position: absolute;
  right: 35.8%;
  bottom: -267px;
  border-style: solid;
}

.cursor {
  float: right;
  display: inline-block;
  position: absolute;
  right: 43.4%;
  bottom: -174px;
  border-style: solid;
  z-index: 1;
}

.content-alt {
  float: left;
  margin-left: 100px;
  margin-left: 5%;
  position: absolute;
  top: 750px;
  left: 170px;
  width: 20%;
}

.content-alt2 {
  float: left;
  margin-left: 100px;
  margin-left: 5%;
  position: absolute;
  top: 918px;
  left: 170px;
  width: 20%;
}

.content {
  float: right;
  margin-right: 100px;
  margin-right: 5%;
  position: absolute;
  top: 750px;
  right: 165px;
  width: 20%;
}

.content2 {
  float: right;
  margin-right: 100px;
  margin-right: 5%;
  position: absolute;
  top: 918px;
  right: 165px;
  width: 20%;
}

.alternate {
  float: left;
  margin-left: 100px;
  margin-left: 5%;
  position: absolute;
  left: 110px;
  width: 36%;
}

.other {
  display: none;
  text-align: center;
}

.near-bottom {
  display: none;
  text-align: center;
}

footer {
  word-spacing: 30px;
}

.text {
  font: 16px HelveticaNeue, sans-serif;
  line-height: 1.6;
  font-weight: 400;
}

.footer {
  display: none;
  font: 16px HelveticaNeue, sans-serif;
  font-weight: 400;
}

.Image {
  display: none;
  text-align: center;
}
＆＃13; 
<header>
  <h1> <img style="vertical-align:middle" src="img/focus.png" /><span class="Header-Type">Focus</span></h1>
  <p>A landing page for your app with focus</p>
</header>

<div class="Down-Arrow">
  <img src="img/down-arrow.png" />
</div>

<div id="white">

  <div class="Phone">
    <img src="img/iphone.png" />
  </div>

  <div class="white-button1">
    <img src="img/white-dot.png" />
  </div>

  <div class="white-button2">
    <img src="img/white-dot.png" />
  </div>

  <div class="white-button3">
    <img src="img/white-dot.png" />
  </div>
</div>

<div class="black-button">
  <img src="img/Black-dot.png" />
</div>

<div class="cursor">
  <img src="img/cursor.png" />
</div>

<div class="angle">
  <img src="img/angled-line.png" />
</div>

<div class="grey"></div>

<div id="text-content">

  <div class="content-alt">
    <h2>Great Feature</h2>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
  </div>

  <div class="content">
    <h2>Great Feature</h2>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
  </div>

  <div class="content-alt2">
    <h2>Another Great Feature</h2>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
  </div>

  <div class="content2">
    <h2>Another Great Feature</h2>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
  </div>
</div>

<div class="alternate">
  <h2>Get The App Today!</h2>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id sollicitudin
    ante lobortis at.</div>
</div>

<div class="other">
  <h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
  <div>Kyle Turner, Blogger</div>
</div>

<div class="Image">
  <img src="img/people.png" />
</div>

<div class="near-bottom">
  <h4>Say Hi & Get in Touch</h4>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>

<footer>
  <p class="footer">Contact Download Press Email Support</p>
</footer>
＆＃13;
＆＃13;
＆＃13;

JSFiddle

相关问题
最新问题