CSS 文件只是运行部分代码
[英]CSS file is only running part of the code
问题描述
Im building a website, but my HTML and CSS are bugging.
我正在建立一个网站，但我的 HTML 和 CSS 正在窃听。 When I load my website through Github Pages, or through local files, I can see my HTML and it all works perfectly fine.当我通过 Github 页面或本地文件加载我的网站时，我可以看到我的 HTML 并且一切正常。 The problem is, only part of my CSS is loading.问题是，我的 CSS 只有一部分正在加载。
In my website I made a sidebar, and when I tested it through local files it worked fine.在我的网站中，我制作了一个侧边栏，当我通过本地文件对其进行测试时，它运行良好。 Yesterday I opened Notepad++ (I cant install VSCode on this computer) and opened my website to test what size font was the best.昨天我打开 Notepad++（我无法在这台电脑上安装 VSCode）并打开我的网站来测试什么尺寸的字体是最好的。
When I opened it, some of the CSS didn't work.当我打开它时，有些 CSS 不起作用。 My background image is gone, and my sidebar was moved to under my text, and also it expanded the entire screen.我的背景图片不见了，我的侧边栏被移到了我的文本下方，它也扩大了整个屏幕。 Also all of my color was removed from my sidebar.我的所有颜色也从我的侧边栏中删除。 I tried this with github pages, but it was also bugged their.我用 github 页面尝试了这个，但它也被他们的窃听。
Some of my CSS is still working, but around half is not working.我的一些 CSS 仍在工作，但大约一半不工作。 I made a new CSS and HTML document and copied all of the code, changing the link and it was still bugged.我制作了一个新的 CSS 和 HTML 文档并复制了所有代码，更改了链接，但仍然存在问题。
<html>
<head>
<link rel="stylesheet" href="GithubTestCSS.css">
<h1 style="text-align:center; color: #fff; font-size: 40px; font-family: Comic Sans MS; margin-left: 425px; "> Text <h1>
<div class="main-text">
<p> text</p>
<p> text</p>
<p> text </p>
<p> text </p>
<p> text </p>
</div>
</head>
<body>
<header class="header" role="banner">
<div class="logo">
<a href="#">Home</a>
</div>
<div class="nav-wrap">
<nav class="main-nav" role="navigation">
<ul class="unstyled list-hover-slide">
<li><a href="#">Poems</a></li>
<li><a href="#">Collages</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">Infographics</a></li>
</ul>
</nav>
</div>
</head>
</body>
</html>
.bg-text {
position: center;
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.6); /* Black w/ slight opacity see-through */
color: white;
font-weight: bold;
font-size: 28px;
border: 5px solid #f1f1f1;
position: fixed;
margin-right: 50px;
margin-top: 50px;
margin-bottom: 20px;
padding: 5px;
}
.unstyled a {
text-decoration: none;
}
.list-inline {
overflow: hidden;
}
.list-inline li {
float: left;
}
.logo {
font: 100 1em "Source Sans Pro", Helvetica, Arial, sans-serif;
text-align: center;
padding: 0;
margin: 0;
}
/* The logo (top of sidebar*/
.logo a {
display: block;
padding: 1em 0;
color: #03A062;
text-decoration: none;
transition: .75s linear color;
}
/* The sidebar */
.main-nav ul {
border-top: solid 1px #3C3735;
}
.main-nav li {
border-bottom: solid 1px #3C3735;
}
.main-nav a {
padding: 1.1em 0;
color: #03A062;
font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
text-align: center;
}
.main-nav a:hover {
color: #03A062;
}
.list-hover-slide li {
position: relative;
overflow: hidden;
}
.list-hover-slide a {
display: block;
position: relative;
z-index: 1;
transition: .75s ease color;
}
.list-hover-slide a:before {
content: '';
display: block;
z-index: -1;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
border-right: solid 5px #03A062;
background: #3C3735;
transition: .75s ease left;
}
.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
left: 0;
}
.testing-text{
text-align: center;
color: #fff;
}
2 个解决方案
解决方案1
1 2022-01-21 18:37:39
- Well first you can't put HTML like that in the header.首先你不能像 header 那样把 HTML 放进去。 Put it all in the
<body>tag.把它全部放在<body>标记中。 - You did not close the
<h1>tag.您没有关闭<h1>标记。 - you did not close the
<header>tag.您没有关闭<header>标记。 - Then you have an error in the html in the bottom: "
</head></body></html>".. you already closed the head.然后你在底部的 html 中有错误：“ </head></body></html>”..你已经关闭了头部。
So it's going to be something like this:所以它会是这样的：
<html>
<head>
<link rel="stylesheet" href="GithubTestCSS.css">
</head>
<body>
<h1 style="text-align:center; color: #fff; font-size: 40px; font-family: Comic Sans MS; margin-left: 425px; "> Text </h1>
<div class="main-text">
<p> text</p>
<p> text</p>
<p> text </p>
<p> text </p>
<p> text </p>
</div>
<header class="header" role="banner">
<div class="logo">
<a href="#">Home</a>
</div>
<div class="nav-wrap">
<nav class="main-nav" role="navigation">
<ul class="unstyled list-hover-slide">
<li><a href="#">Poems</a></li>
<li><a href="#">Collages</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">Infographics</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
解决方案2
0 2022-01-31 23:38:40
There are a few other things, for example no quotes around Comic Sans Serif.还有一些其他的东西，例如Comic Sans Serif 周围没有引号。
<html> <head> <link rel="stylesheet" href="GithubTestCSS.css"> <title></title> </head> <body> <h1 style="text-align: center; color: #fff; font-size: 40px; font-family: 'Comic Sans MS'; margin-left: 425px;"> Text </h1> <div class="main-text"> <p> text </p> <p> text </p> <p> text </p> <p> text </p> <p> text </p> </div> <header class="header" role="banner"> <div class="logo"> <a href="#">Home</a> </div> <div class="nav-wrap"> <nav class="main-nav" role="navigation"> <ul class="unstyled list-hover-slide"> <li><a href="#">Poems</a></li> <li><a href="#">Collages</a></li> <li><a href="#">Art</a></li> <li><a href="#">Infographics</a></li> </ul> </nav> </div> </header> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.