在過去的一個小時里，我一直在絞盡腦汁，試圖讓我的 HTML 檔案顯示我正在添加的內容。這是我的代碼示例：
@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Rubik:wght@300&display=swap');
html {
height: 100%;
}
body {
margin: 0;
}
/* Header that contains logo, horizontal navigation, and lists. */
.container {
width: 80%;
height: 200px;
margin: 0;
}
header {
font-family: 'Rubik', sans-serif;
font-weight: 300;
background-color: rgb(31,150,196);
background-image: linear-gradient(160deg, rgba(31,150,196,1) 0%, rgba(52,165,175,1) 50%, rgba(173,225,230,1) 100%);
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 50px 15px 30px 150px;
width: 550px;
height: 200px;
}
nav {
float: left;
}
nav ul {
margin: 0;
padding: 70px 15px 15px 15px;
list-style: none;
font-weight: 500;
font-size: 25px;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 30px;
position: relative;
}
nav a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
nav a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: #ffffff;
position: absolute;
top: 0;
width: 0;
transition: all ease-in-out 200ms;
}
nav a:hover::before {
width: 100%;
}
/* Header that contains logo, horizontal navigation, and lists. End. */
/* Sidebar. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Rubik', sans-serif;
}
.wrapper {
display: flex;
position: relative;
}
.wrapper .sidebar {
position: fixed;
width: 200px;
height: 100%;
background: #b9b9b9;
padding : 35px 0;
}
.wrapper .sidebar h2 {
color: #ffffff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
font-size: 35px;
}
.wrapper .sidebar ul li {
padding: 25px;
}
.wrapper .sidebar ul li a {
color: #1A5276;
display: block;
font-size: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&family=Rubik:wght@500&display=swap" rel="stylesheet">
<title>BigPay - Banking Made Easier</title>
<script src="https://kit.fontawesome.com/4b00a26c1e.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<img src="pics/bigpay-logo.png" alt="company-logo" class="logo" />
<nav class="navbar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ANALYTICS</a></li>
<li><a href="#">PAYMENTS</a></li>
<li><a href="#">CARD</a></li>
<li><a href="#">SETTINGS</a></li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div class="sidebar">
<h2>Menu</h2>
<ul>
<li><a href="#"><i class="fa-solid fa-magnifying-glass"></i> Search</a></li>
<li><a href="#"><i class="fa-solid fa-calendar"></i> Date</a></li>
<li><a href="#"><i class="fa-solid fa-book"></i> Category</a></li>
<li><a href="#"><i class="fa-solid fa-money-bill"></i> Amount</a></li>
<li><a href="#"><i class="fa-solid fa-globe"></i> Country</a></li>
<li><a href="#"><i class="fa-solid fa-filter"></i> Type</a></li>
</ul>
</div>
</div>
<h1>Hello</h1>
</body>
</html>The problem arises when I'm adding more content to the page in the HTML file, specifically the h1 tag that has Hello inside it. Even when I had Live Server turned on on my VSCode, it still will not update anything to the browser. I have tried closing and opening the browser twice, I even closed my VSCode and opened it again but it still will not update anything. I have restarted my computer, I tried to open the html on Internet Explorer and it's still not updating the h1 tag that I added. Before turning off my computer I have saved the code but it was fine, just a normal save. Plus, I even tried to make a new html with just the word hello wrapped in a h1 tag, that worked. But not my previous code.
Before you guys ask, I have looked through the questions of the same problem on here but nothing really applies to my problem. I have never had this happened before and I do not want to restart writing my code. The reason I added the CSS in here also is because I cannot, for the life of me, figure out what went wrong.
I went through this question :
Why is my HTML file not displaying to the browser?
and the answers have not helped.
Any replies will be greatly appreciated and I thank you very much for taking the time to help me out on this matter.
uj5u.com熱心網友回復：
您確定文字不只是與背景混合嗎？你能在開發工具中找到 h1 嗎？
如果你把它放在 div.container 中會發生什么？
您也可以嘗試 CTRL F5 在瀏覽器中硬重繪 頁面。
編輯：
找到了。您的 .wrapper.sidebar 是固定的，并且覆寫了 h1。您需要制作另一個 div 來解決此問題，或者提出不同的解決方案。這是一個例子：
HTML
<div class='foundIt'>
<h1>Hello</h1>
</div>
CSS
.foundIt {
margin-left: 200px;
}
.foundIt的 margin-left 占.wrapper.sidebar寬度大小。希望這可以幫助！
uj5u.com熱心網友回復：
您可以對 HTML 做的一個小技巧是：
<link rel="stylesheet" href="style.css?ver=1">
然后每次進行更改時遞增 ver 。
這樣你就在欺騙瀏覽器相信有一個新版本的檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/434313.html
上一篇：Exec沒有將結果輸出到函式