在HTML中包含外部JS和CSS文件

bwleehnv 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(105)

这是巴拉。我有问题添加外部CSS和JS文件在HTML中。
下面的代码不起作用：

$( window ).ready(function() {
    var wHeight = $(window).height();
    $('.slide')
      .height(wHeight)
      .scrollie({
        scrollOffset : -50,
        scrollingInView : function(elem) {

          var bgColor = elem.data('background');

          $('body').css('background-color', bgColor);
        }
      });

  });

* { box-sizing: border-box }

body {
  font-family: 'Coming Soon', cursive;
  transition: background 1s ease;
  background: #3498db;
  width: 100px;
  height: 100px;
}

p {
  color: #ecf0f1;
  font-size: 2em;
  text-align: center;

}

span {
  clear: both;
  font-size: .7em;
  color: #bdc3c7;
}

a {
  color: #c0392b;
  text-decoration: none;
}

.slide {

  .inside {
    display: table;
    height: 100%;
    width: 100%;
    padding: 0 3em;

    p {
      display: table-cell;
      width: 100%;
      clear: both;
      vertical-align: middle; 
      text-align: center; 
    }
  }
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="code.js"></script>
    <link rel="stylesheet" type="text/css" href="2.css" />
  </head>
  <body>
  </body>
</html>

css

来源：https://stackoverflow.com/questions/44841447/include-external-js-and-css-file-in-html

3条答案

按热度按时间

pdkcd3nj1#

用下面的代码试试。用下面的代码替换link标签：

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

字符串
但这也取决于你的css文件存储在哪里。我不知道为什么你张贴的JS部分。也许你可以解释？

赞(0）回复(0）举报 2024-01-09

hof1towb2#

使用scroll函数：

$( window ).ready(function() {
    var wHeight = $(window).height();
    $('.slide')
      .height(wHeight)
      .scroll({
        scrollOffset : -50,
        scrollingInView : function(elem) {

          var bgColor = elem.data('background');

          $('body').css('background-color', bgColor);
        }
      });

  });

* { box-sizing: border-box }

body {
  font-family: 'Coming Soon', cursive;
  transition: background 1s ease;
  background: #3498db;
  width: 100px;
  height: 100px;
}

p {
  color: #ecf0f1;
  font-size: 2em;
  text-align: center;

}

span {
  clear: both;
  font-size: .7em;
  color: #bdc3c7;
}

a {
  color: #c0392b;
  text-decoration: none;
}

.slide {

  .inside {
    display: table;
    height: 100%;
    width: 100%;
    padding: 0 3em;

    p {
      display: table-cell;
      width: 100%;
      clear: both;
      vertical-align: middle; 
      text-align: center; 
    }
  }
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="code.js"></script>
    <link rel="stylesheet" type="text/css" href="2.css" />
  </head>
  <body>
    <div class="slide"></div>
  </body>
</html>

赞(0）回复(0）举报 2024-01-09

ecbunoof3#

您向HTML文件添加两行
这一行添加在标记之间

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

字符串
这条线被添加在标记和关闭的正上方

<script src="index.js"></script>

型

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

型

赞(0）回复(0）举报 2024-01-09

我来回答

在HTML中包含外部JS和CSS文件

3条答案

相关问题

热门标签

最新问答