首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用脱机w3.css

如何使用脱机w3.css
EN

Stack Overflow用户
提问于 2021-06-25 02:36:11
回答 1查看 122关注 0票数 0

我从https://www.w3schools.com/w3css/4/w3.csshttps://www.w3schools.com/lib/w3-theme-blue.css下载了两个css文件。当在本地使用它们时,不知何故,它们不能工作(即不能反映期望的输出)。

(所需输出)使用在线css:online result

使用在线css的html代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<body class="w3-theme-l4">

<div style="min-width:400px">

<div class="w3-bar w3-large w3-theme-d2">
  <span class="w3-bar-item">UpLevel Admin</span>
</div>
<div class="w3-bar w3-medium w3-theme-d2">
  <a href="options.html" class="w3-bar-item w3-button">Categories</a>
  <a href="level.html" class="w3-bar-item w3-button">Level</a>
  <a href="progress.html" class="w3-bar-item w3-button">Progress</a>
</div>
<br>
<div class="grid-container">
  <div class="w3-bar-item w3-btn"><img src="images/admin_math.png"><span class="caption">Math</span></div>
  <div class="w3-bar-item w3-btn"><img src="images/languages.png"><span class="caption">Languages</span></div>
  <div class="w3-bar-item w3-btn"><img src="images/sat.png"><span class="caption">SAT</span></div>
  <div class="w3-bar-item w3-btn" onclick="location.href='progress.html';"><img src="images/coding.png"><span class="caption">Coding</span></div>
</div>

</div>
</body>
</html>

===================================================

使用脱机css:offline result

使用脱机css的html代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-blue.css">
<link rel="stylesheet" href="styles.css">
<body class="w3-theme-l4">

<div style="min-width:400px">

<div class="w3-bar w3-large w3-theme-d2">
  <span class="w3-bar-item">UpLevel Admin</span>
</div>
<div class="w3-bar w3-medium w3-theme-d2">
  <a href="category.html" class="w3-bar-item w3-button">Categories</a>
  <a href="level.html" class="w3-bar-item w3-button">Level</a>
  <a href="progress.html" class="w3-bar-item w3-button">Progress</a>
</div>
<br>
<div class="grid-container">
  <div class="w3-bar-item w3-btn"><img src="math.png"><span class="caption">Math</span></div>
  <div class="w3-bar-item w3-btn"><img src="languages.png"><span class="caption">Languages</span></div>
  <div class="w3-bar-item w3-btn"><img src="sat.png"><span class="caption">SAT</span></div>
  <div class="w3-bar-item w3-btn" onclick="location.href='progress.html';"><img src="coding.png"><span class="caption">Coding</span></div>
</div>

</div>
</body>
</html>
EN

回答 1

Stack Overflow用户

发布于 2021-06-25 02:49:03

问题可能是,保存CSS样式表的文件和文件夹的层次结构级别。

确保将CSS文件放在相同的层次结构中(在相同的项目文件夹中)

注意:这些文件不应该是任何文件夹,因为你的数学是绝对的,只能在相同的级别上工作。并确保您可能对文件名造成的任何拼写错误

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68121125

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档