如何使用脱机w3.css
如何使用脱机w3.css
提问于 2021-06-25 02:36:11
我从https://www.w3schools.com/w3css/4/w3.css和https://www.w3schools.com/lib/w3-theme-blue.css下载了两个css文件。当在本地使用它们时，不知何故，它们不能工作(即不能反映期望的输出)。
(所需输出)使用在线css：online result
使用在线css的html代码：
<!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代码：
<!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>回答 1
Stack Overflow用户
发布于 2021-06-25 02:49:03
问题可能是，保存CSS样式表的文件和文件夹的层次结构级别。
确保将CSS文件放在相同的层次结构中(在相同的项目文件夹中)
注意:这些文件不应该是任何文件夹，因为你的数学是绝对的，只能在相同的级别上工作。并确保您可能对文件名造成的任何拼写错误
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68121125
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号