个人中心
gpt4 book ai didi

Codecademy 类(class)中的 HTML + CSS 集成

转载 作者：行者123 更新时间：2023-11-28 06:01:12 25 4
gpt4 key购买 nike

我使用 http://codecademy.com 上旧的 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;
}

最佳答案

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

关于Codecademy 类(class)中的 HTML + CSS 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36739203/

25 4 0
文章推荐： css - 即使选择了应用，媒体查询也不起作用
文章推荐： javascript - chrome 使用 execCommand 添加回车符 ('copy' )
文章推荐： javascript - 更改智能表中的页面会阻止 JQuery 函数工作？
文章推荐： javascript - Foundation 6 Canvas 外未关闭
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com