Question

我正在练习创建一个多列网站，差不多完成了，但我有一个问题 - 页面底部的页脚文字和社交媒体图标没有显示。我尝试看一下没有链接的css文件，社交媒体图标显示为一个破碎的图像（几乎我正确引用它）

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Roboto:700' 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">
            <src="../images/testimonial_bg.jpg">
            <p class="herWords">“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 class="name">- Amanda, Intuit</p>
        </div>

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

        <div id="fifthColumn">
            <p>Relaxr</p>
        </div>
            <div id="footer">
                <img src="../images/twitter.png">
                <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 center;
     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: 28px;
  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-family: 'Roboto'; sans-serif;
  font-size: 14px;
  font-weight: 700;
  height: 30px;
  width: 135px;
}

/*SECOND COLUMN*/

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

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

#secondColumn p {
  font-size: 13px;
  padding-left: 70px;
  font-family: Open Sans;
  color: navy;
}

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

.benefitss li{
  padding-top: 3px;
  font-family: Open Sans;
  color: navy;
} 

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

#thirdColumn .herWords {
  color: #ffffff;
  font-style: italic;
  font-size: 16px;
  margin-top: 45px;
  text-align: center;
}

#thirdColumn .name {
  color: #ffffff;
  font-size: 22px;
  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-family: 'Roboto'; sans-serif;
  font-size: 12px;
  font-weight: 800;
  height: 30px;
  width: 150px;
  margin-left: 43.5%;
  margin-top: 25px;
}

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

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

/*FOOTER TEXT*/

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

这是需要出现的内容：

https://s31.postimg.org/be6k7pumz/Screen_Shot_2016_06_14_at_4_54_37_PM.png

然而，只有＆＃34; Relaxr＆＃34;显示在最后一列。谁知道问题可能是什么？感谢。

Answer 1

你错过了＆＃34;＆lt; img＆gt;＆＃34;对HTML的引用。没有其他＆＃34;＆lt; / div＆gt;＆＃34;，但您必须修复img标记。这是我能找到的：

<div id="thirdColumn">
    <src="../images/testimonial_bg.jpg">

您应该拥有以下内容：

<div id="thirdColumn">
    <img src="../images/testimonial_bg.jpg" />

Answer 2

#fifthColumn有position: absolute。这很可能导致它重叠/隐藏#footer，它紧跟在它下面（绝对定位元素不占用文档流中的任何空间，它们重叠在那里......）。将position设置为relative以检查此内容...

页脚文本和社交媒体图标未显示

2 个答案: