gpt4 book ai didi

html - 没有链接到 HTML 文档的外部文件

转载 作者:行者123 更新时间:2023-11-28 15:44:54 24 4
gpt4 key购买 nike

起初,问题似乎是只有链接到我的 HTML 文档中的 CSS 文件在打开时没有在浏览器中加载,但是当将图像集成到 HTML 文档中时,我发现它也没有加载打开文档时没有出现在浏览器中(我使用 Microsoft Edge、Chrome 和 Firefox 打开文档。所有文件都位于我计算机上的同一文件夹中,但使用相对路径定位文件似乎也什么都不做。代码看起来是这样的。(值得注意的是,我同时使用 CSS 中的背景图像属性和 HTML 中的标记来加载相同的文件,因为它们似乎都不起作用)

HTML 代码:

<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>

<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>

<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>

CSS 代码 (displaylayout.css):

body {
background-color: rgb(242, 242, 242);
color: red;
}

p {
color: red;
}

img {
align-self: center;
vertical-align: top;
}

.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}

.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}

在浏览器开发人员侧边栏中,它说网页没有样式属性,这不可能是真的。我总是可以将 CSS 写入 HTML 文档,但图像也是最终产品的组成部分,也不会加载。 (同样值得注意的是,CSS 中使用的 p 元素和主体的文本颜色仅用于测试目的)

编辑:这是我制作的测试文件的确切代码,但仍然无法正常工作。

HTML:

 <html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>

CSS:

h1 {
color: red;
font-size: 24pt;
}

p {
color: blue;
font-size: 12pt;
}

这些测试文件的新文件夹中的图像已重命名为 test.png

编辑 2:我刚刚发现我的链接到外部文件的旧文件仍然有效,所以问题出在我制作的新文件上。

最佳答案

在您的代码中,您尝试加载图像两次,一次作为 divfieldimg 的背景图像,一次在 ` 标签中:

<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>

.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}

1.) 背景图像需要像 background-image: url(field.png) 这样定义,而不是像你那样定义 ("image(field.png)")

2.) .fieldimgheight 设置 (30%) 将不起作用,因为它周围没有具有高度设置的容器30% 可能有关联。所以这变为 0px 高,因此将不可见。为避免这种情况,您可以将 height: 100% 应用于 body

如果同时修复这两个问题,则必须删除背景图片或图片标签,否则您将获得两次图片...

关于html - 没有链接到 HTML 文档的外部文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42939202/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com