javascript - 使用外部嵌入方式在我的简单 HTML 导航条码中嵌入 CSS 时出现问题-6ren

javascript - 使用外部嵌入方式在我的简单 HTML 导航条码中嵌入 CSS 时出现问题

转载作者：行者123 更新时间：2023-11-28 14:36:16

28

4

我是编码的新手，我想知道是否可以将 css 嵌入到 HTML 中。我查了一下，他们说使用外部方式。他们说要用这个

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

但是当我尝试时它什么也没做。我尝试查找它，但对所有不同的方式等感到困惑。这是我的代码。

<header>
    <div class="container">
      <h1 class="logo"></h1>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>
   @import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
	margin: 0;
	background: #222;
	font-family: 'Work Sans', sans-serif;
	font-weight: 800;
}

.container {
	width: 80%;
	margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

我知道这似乎是一个愚蠢的问题，也许确实如此，但我真的可以使用一些我喜欢编码的大麻，我真的希望能够在 HTML 代码中同时使用 Javascript 和 CSS。任何帮助将不胜感激。 (我很确定哪一部分是错的，但我不知道如何格式化)

最佳答案

是的，它被称为内联样式，但您不想这样做，因为这不仅会花费更长的时间来为您的网站编写代码，而且会使您更难对您的网站进行更改 - 这就是为什么不这样做的原因工作是因为你的 css 和 html 需要是两个单独的文件。

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

^ 这不起作用的原因是因为你的 css 与 html 在同一个文件中 html 和 css 需要像这样在两个文件中分开

(上面的 href 路径需要引用你的 css 文件所在的路径，所以如果它与你的 html 在同一目录中，它将是 href="mystyle.css"如果不是并且位于文件夹将是 href:"/folder name/mystyle.css"):

<header>
    <div class="container">
      <h1 class="logo"></h1>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>

@import url('https://fonts.googleapis.com/css? family=Work+Sans:400,600');
body {
	margin: 0;
	background: #222;
	font-family: 'Work Sans', sans-serif;
	font-weight: 800;
}

.container {
	width: 80%;
	margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

其次，我不确定您是否注意到，您的代码只有一个 head 标签，通常网站需要 head、body 和 footer 才能正常运行。

看起来这个很容易修复。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Website Name</title> 
</head>
<header>
    <div class="container">
      <h1 class="logo">Logo</h1>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
 </header>

您的链接引用需要位于页面顶部，您没有包含标题，您需要包含您在页面中使用的字符，然后您就拥有了我认为应该正常运行的代码。

关于javascript - 使用外部嵌入方式在我的简单 HTML 导航条码中嵌入 CSS 时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53464509/

28

4

0

文章推荐： javascript - 在显示器 :none block 内显示特定元素

文章推荐： html - bootstrap 4 flex 问题没有填充父高度的 100%

文章推荐： javascript - 动态改变条形颜色

文章推荐： css - 循环浏览字母页面 (rvest)

带有通配符的 webpack 外部
如何指示 webpack 排除所有 d3 模块？ // does not work externals: { "d3-*": "d3" } 所以如果应用导入了d3-submod
Scala 外部 => 语法
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: What does “outer =>” really mean? 我在哪里可以找到有关信息 trait After
javascript - 外部 for 循环时的非线性性能
这是一个简单的循环，我正在尝试对性能进行基准测试。 var extremeLoop=function(n){ var time=new Date() var t=0; for(
jquery - 外部+内联样式与仅外部样式
问题+概述下面是两个片段，其中包含最初隐藏的 div，然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样
javascript - 外部.js文件获取不到页面元素？
我有一个 HTML 页面和一个单独的 .js 文件，该文件包含在带有的页面中标签。这是我的 .js 文件: element = document.getElementById("test");
类的第二个实现文件中静态字段的 C++ 外部？
我在 linux 静态库项目中有 3 个文件，我想在两个类方法实现文件中使用的静态字段存在链接问题。我有 class1.h、class1main.cpp 和 class1utils.cpp。 clas
javascript - 外部单击以重置颜色？
我正在尝试将颜色背景更改为默认背景颜色，当我点击输入框外我尝试使用“null”或“none”但没有用？ window.addEventListener('click', outsideClick);
Android 文件选择器将音频文件重定向到/外部
我正在编写一个应用程序，要求用户在手机上选择各种类型的文件。我使用此代码启动文件选择器 Intent : Intent intent = new Intent(Intent.ACTION_GET_C
android - 外部-内部存储
在 android 中，不可移动(内部)的外部存储和内部存储有什么区别？我不确定在哪里保存我的数据。我只需要保存一个人可以随时提取的游戏统计数据谢谢最佳答案在许多较新的设备中，将不再有物理区别，
c++ - 外部、链接和全局变量
在 C++ 中，假设我们有这个头文件: myglobals.h #ifndef my_globals_h #define my_globals_h int monthsInYear = 12; #en
C++ 外部/多重定义
我正在尝试使用 externs 在 C++ 中连接到 Ada。这两种实现有什么区别？实现A namespace Ada { extern "C" { int getN
jQuery: 外部 html()
这个问题在这里已经有了答案: Get selected element's outer HTML (30 个答案) 关闭 2 年前。想象一下我们有这样的东西: Hello World 如果我们这样
vb6 - 外部 DLL 应该放在哪里？
假设我在模块的顶部有这个: Public Declare Function getCustomerDetails Lib "CustomerFunctions" () As Long 如果我从 VB6
javascript - 外部 Javascript 文件获取？
我目前正在使用这段代码: var wordRandomizer = { run: function (targetElem) { var markup = this.creat
svn - 如何部署 Subversion 外部？
我们正在使用 SVN 试水，并以 Beanstalk 作为主机。我们的设置如下所示: 存储库:模块模块一模块二模块 3 存储库:网站1 自定义网站代码 svn:对模块 1 的外部引用 svn:对
Kubernetes 外部 ip 负载均衡器裸机
有没有办法在负载均衡器中设置自动外部 IP 分配给像谷歌这样的服务？我在裸机上运行 Kubernetes。谢谢最佳答案使用 nodePort 类型的服务，它会将您的服务绑定(bind)到所有节
symfony - generateUrl 外部 Controller
是否有可能在 Controller 之外使用 generateUrl() 方法？我尝试在带有 $this->get('router') 的自定义存储库类中使用它，但它没有用。更新我在这里找到了一
Angular 作为 Webpack 外部
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小库实现了这一目标。如果我只是移动 '@angular/compil
gradle - 创建一个依赖于另一个(外部)插件的Gradle插件
我想创建一个自动应用其他插件的插件(外部插件)。这要求在我称为“应用插件”之前为插件设置构建脚本依赖项。但是似乎我无法在插件中添加buildscript依赖项，或者得到了: 您不能更改处于未解析状态的
r - 创建自定义几何图形来计算汇总统计数据并在绘图区域*外部*显示它们
我是R包的创建者EnvStats . 有一个我经常使用的函数，叫做 stripChart .我刚开始学习ggplot2 ，并在过去几天里仔细研究了 Hadley 的书、Winston 的书、Stack

首页

博学

6Ren·AI

商城

javascript - 使用外部嵌入方式在我的简单 HTML 导航条码中嵌入 CSS 时出现问题