Question

所以我尝试创建一个与此类似的目标网页（仅供参考，为了处理我的HTML / CSS技能，我决定只是为了练习而完全模仿这个目标网页！）

http://oi67.tinypic.com/b8qp8i.jpg

然而，正如你所看到的那样，完整的背景图片（帆船+海洋）没有出现在第一栏：http://oi66.tinypic.com/o7ktgl.jpg

另一个问题是，在第三列的背景图像的左侧，我一直看到一个小的“破碎的页面”＃34;图标（我不知道它为什么会在那里，但它真的很烦人）...这是一个图像问题还是图像文件有问题？

非常感谢帮助，谢谢！

这是我的完整HTML和CSS代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <meta name="description" content="Your description goes here">
        <meta name="keywords" content="one, two, three">

        <title>Relaxr</title>

        <!-- external CSS link -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">

    </head>
    <body>
        <div id="mainColumn">
            <header>
                <h1>Relaxr</h1>
                <h2>Get piece of mind with a single tap</h2>
            </header>

        <span>
            <button id="getButton">Get it Now</button>
        </span>
        </div>

        <div id="secondColumn">
            <header>
                <h1>Benefits</h1>
                <p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
                <ul class="benefitss">
                    <li>Schedule meetings for you</li>
                    <li>Excel automation to complete your <br>work for you</li>
                    <li>Responds to e-mails on your behalf</li>
                    <li>Does all yor work for you with our<br>revolutionary technology</li>
                </ul>
            </header>
        </div>

        <div id="thirdColumn">
            <img src="../images/testimonial_bg.jpg">
            <p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
            <p>- Amanda, Intuit</p>
        </div>

        <div id="fourthColumn">
            <button id="signupButton">Sign Up Now!</button>
        </div>

        <div id="fifthColumn">
            <p>Relaxr</p>
            <div id="footer">
                <p>Copyright 2015. Relaxr.</p>
            </div>
        </div>
    </body>
</html>

CSS：

/******************************************
/* SETUP
/*******************************************/

/* Box Model Hack */
* {
     -moz-box-sizing: border-box; /* Firexfox */
     -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
     box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
  clear: both;
}

.alignright {
  float: right;
  padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
  float: left;
  padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
     color: #000;
     font-size: 12px;
     line-height: 1.4;
     font-family: Open Sans;
     background: url(../images/header_bg.jpg) no-repeat center top;
     background-size: cover;
}


/******************************************
/* LAYOUT
/*******************************************/

/*MAIN COLUMN*/

#mainColumn {
  width: 100%;
  height: 450px;
  text-align: center;
}

#mainColumn h1 {
  color: white;
  padding-right: 80%
}

#mainColumn h2 {
  color: white;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 50px;
  text-align: center;
}

header {
  height: 40%;
}

/*GET IT NOW BUTTON*/
#getButton {
  background-color: yellow;
  border-radius: 3px;
  border-style: none;
  font-size: 14px;
  font-weight: 700;
  height: 30px;
  width: 130px;
}

/*SECOND COLUMN*/

#secondColumn {
  width: 100%;
  margin: auto;
  height: 360px;
  background-color: white;
}

#secondColumn h1 {
  padding-left: 65px;
  padding-top: 60px;
  color: navy;
  font-size: 20px;
  font-weight: 700;
}

#secondColumn p {
  font-size: 13px;
  padding-left: 70px;
}

.benefitss {
  margin-left: 80px;
  padding-top: 20px;
  font-size: 13px;
}

.benefitss li{
  padding-top: 2px;
} 

/*THIRD COLUMN*/
#thirdColumn {
  width: 100%;
  height: 250px;
}

#thirdColumn p:nth-child(2) {
  color: #ffffff;
  font-style: italic;
  font-size: 15px;
  text-align: center;
}

#thirdColumn p:nth-child(3) {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

/*FOURTH COLUMN*/
#fourthColumn {
  background-color: yellow;
  width: 100%;
  height: 75px;
}

/*SIGN UP BUTTON*/
#signupButton {
  background-color: #000040;
  color: white;
  border-radius: 3px;
  border-style: none;
  font-size: 12px;
  font-weight: 800;
  height: 30px;
  width: 150px;
  margin-left: 42.9%;
  margin-top: 25px;
}

#fifthColumn {
  background-color: #000000;
  width: 100%;
  height: 225px;
  position: absolute;
}

#fifthColumn p {
  color: yellow;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
}


#footer p {
  font-size: 9px;
  color: #ffffff;
  text-align: center;
  padding-top: 11%;
}

div

0 个答案: