Question

上旧的HTML和CSS简介中的说明创建了我的第一个网站

代码在特殊构造函数页面中运行良好，但是现在当我尝试进入野外时，我的HTML和CSS似乎没有链接起来。我尝试在浏览器中查看，但没有快乐，我想我试图将文件上传到文件服务器，但仍然没有快乐，并尝试了几个教程。

有人可以告诉我哪里出错了吗？是否与HTML顶部的CSS样式表引用有关？

这是我的HTML和CSS代码：

    <!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="main.css">

  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class="pull-left">
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Services</a></li>
      <li><a href="#">Prices</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h1>Computer repairs and upgrades.</h1>
        <p>Fast and friendly services for all your computer needs. Call 07952270940 for a free consultation.</p>
        <p>- PC and Laptop repair to your door</p>
        <p>- Virus/Malware Removal</p>
        <p>- Tune up / Speed up</p>
        <p>- Computer Upgrades</p>
        <p>- Internet Security</p>
        <p>- No-fix / No-fee Policy</p>
        <p>- 7 days a week service</p>
        <p>- Guaranteed work & parts
</p>
        <a href="#">Learn More</a>
      </div>
    </div> 

<div class="neighborhood-guides">
<div class="container">
<h2>Neighborhood Guides</h2>
<p>We pride ourselves on openness and fairness with accurate quotes and no hidden costs.</p>
<div class="row">
      <div class="col-md-4">
      <div class="thumbnail">
      Laptops
      <img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_39726_20150729_zpsyypbc60q.jpg">
      </div>

<div class="thumbnail">
Website development
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40106_20150820_zpsxs617yvx.jpg">
</div>
</div>

      <div class="col-md-4">
      <div class="thumbnail">
      PC's
      <img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40371_20150828_zpsmabjmlys.jpg">
      </div>

<div class="thumbnail">
Upgrades
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_41306_20150916_zpsw0mykfns.jpg">
</div>
</div>

      <div class="col-md-4">

      <div class="thumbnail">
      Price promise
      <img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40001_20150814_zpsk1nnnytm.jpg">
      </div>
      </div>


      <div class="col-md-4">

      <div class="thumbnail">
      Security and virus removal
      <img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/c775776e-19e5-40f4-a651-7d73434ce9d0_zpsr59jga2j.jpg">
      </div>



</div>
</div>
</div>
</div>

    <div class="learn-more">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h3>Laptop screen repair</h3>
            <p>We are specialists in laptop screen repair. We provide screens for all laptops.</p>
            <p><a href="#">I dunno yet</a></p>
          </div>
          <div class="col-md-4">
            <h3>No-fix / No-fee Policy</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>
  </body>
</html>








.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://pcmedcenter.com/wp-content/uploads/2015/03/banner12-1920x600.jpg');
  height: 470px;
  background-repeat: no-repeat;
  background-size: cover;
}

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

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

.jumbotron p {
  font-size: 15px;
  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;
}

Answer 1

由于第三个样式表的路径是相对的，因此您必须确保路径正确，并且在与html文件相同的文件夹中有一个main.css文件。

Answer 2

哦，伙计，一些建议可以帮助你保持正轨！

首先复制CSS代码并将其存储在本地。创建一个Web项目文件夹，然后创建一个themes文件夹，以保存您的CSS。

C：\网络

C：\网络\ index.html的

C：\网络\主题\经典\ style.css中

还要像瘟疫一样避免BootStrap！这是由服务器人完成的CSS，它使用jQuery（CSS是客户端，而不是服务器和客户端/服务器是两种不同的心态）。您不需要过度复杂化您的理解。坚持使用HTML和CSS以及“vanilla”（普通）JavaScript作为添加依赖项会使您的代码变弱并锁定您尚未准备好的事情，无论它是否会使您受益（提示：那些不会）。大多数使用这些东西的人如果他们的生活依赖于它就不能编码香草，所以首先要学习真正的代码，然后然后考虑每个项目的第三方内容，并且只有当它适合给定的项目时。

还要了解浏览器，HTML和XML解析器中有两个解析器。你可以松散或严格地服务代码; HTML解析器是松散的，而XML解析器是严格的。 Firefox非常适合使用XML解析器（将文件保存为.xhtml），你仍然可以使用HTML5（它只是HTML5兼容的XML）但是当你出错（除了少数例外），整个页面都会破坏你的'我会收到一条错误消息，告诉你哪些是错的，这很好，因为现在你知道你可以快速解决它并继续前进。

最好的资源之一是Mozilla Developer Network。通常在查找时选择它。除了专注于你想要实现的目标之外，像http://caniuse.com/这样的网站将为您提供一些（尽管不是全部）对可以使用的技术存在的洞察力。祝你好运！

Answer 3

此

<link rel="stylesheet" href="main.css">

如果您的HTML文档没有正确设置样式，那么您需要确保href指向样式表的正确目标。如果您的样式表恰好与HTML文件位于同一目录中，您可以使用它在计算机上本地查看它，以确保它按预期工作：

<link rel="stylesheet" type="text/css" href="./main.css">

另外，您是否真的将CSS复制到名为main.css的单独文件中？确保你这样做。

Codecademy课程中的HTML + CSS集成

3 个答案: