Question

我最近完成了Codecademy的'Build a Professional Website'教程。我的代码在Codeacademy上看起来很好并且通过了他们所有的测试。当我将代码保存在我的笔记本电脑上并在Firefox中打开它，从localhost服务时，“邻居指南”下的五个框中的三个是错误的。

这是HTML代码：

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">

    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/main.css">

  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class="pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
     </div>
    </div>

<div class="jumbotron">
  <div class="container">
    <h1>Find a place to stay.</h1>
    <p>Rent from people in over 34,000 cities and 192 countries.</p>
    <a href="#">Learn More</a>
  </div>
</div> 
<div class="neighborhood-guides">
    <div class="container">
        <h2>Neighborhood Guides</h2>
        <p>Not sure where to stay? 
            We've created neighborhood guides for cities 
            around the world.
        </p>
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="http://goo.gl/0sX3jq"
                </div>
                <div class="thumbnail">
                    <img src="http://goo.gl/an2HXY">
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="http://goo.gl/Av1pac" 
                </div>
                <div class="thumbnail">
                    <img src="http://goo.gl/vw43v1"
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="http://goo.gl/0Kd7UO"
                </div>
            </div>
        </div>
    </div>
</div>

<div class="learn-more">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Travel</h3>
        <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
        <p><a href="#">See how to travel on Airbnb</a></p>
      </div>
      <div class="col-md-4">
        <h3>Host</h3>
        <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
        <p><a href="#">Learn more about hosting</a></p>
      </div>
      <div class="col-md-4">
        <h3>Trust and Safety</h3>
        <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
        <p><a href="#">Learn about trust at Airbnb</a></p>
      </div>
    </div>
  </div>
</div>

这是CSS代码（依赖于twitter bootstrap）：

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.jumbotron {
  background-image:url('http://goo.gl/04j7Nn');
  height: 500px;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

.neighborhood-guides{
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2{
    color: #393c3d;
    font-size:24px;
}

.neighborhood-guides p{
    font-size: 15px;
    margin-bottom: 13px;
}

以下是如何使用Python启动localhost

$ python -m SimpleHTTPServer

请告诉我如何解决此格式问题。感谢您的时间。

编辑：我能够使用我的github.io here复制该问题。代码位于此repository中。唯一的区别是我在HTML中将/static/css/main.css更改为main.css。

Answer 1

您的HTML代码已损坏。您有四个缺少结束括号的图像标记。

例如：

<img src="http://goo.gl/0sX3jq"

应该是：

<img src="http://goo.gl/0sX3jq">

当浏览器解析代码时，它将继续运行，直到找到匹配的括号，该括号将位于以下</div>标记的末尾。这反过来意味着下一个结束标记将关闭该div标记而不是它之外的标记。它们不是在图像之后使用div标签，而是彼此嵌套。带有class="learn-more"的div最终嵌套在div内的四个级别class="neighborhood-guides"。

Answer 2

您的第3个CSS引用的位置与文件所在的位置相同。在与HTML文件相同的目录中是否有/static/css/main.css？

Answer 3

此外，浏览器存在差异，这是开发人员必须面对的“战斗”：浏览器兼容性。谷歌一点点

代码完全呈现在Codecademy上，但不是来自Firefox中的localhost，有什么不同？

3 个答案: