為什么相同的html和css顯示不同？-有解無憂

我正在學習網路技術。我試圖通過關注 YouTube 視頻來建立一個投資組合網站。下面的代碼是索引頁的 html 和 css 代碼。

<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">
    <title>Nilavro Seal - Developer, Programmer, ML Enthasiast</title>
    <link rel="stylesheet" href="../Portfolio/style.css">
</head>

<body>
    <div class="container">
        <div class="sidebar">
            <!-- Nilavro -->
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="../Portfolio/intro.html">My Intro</a></li>
                    <li><a href="../Portfolio/services.html">Services</a></li>
                    <li><a href="../Portfolio/blog.html">Blog</a></li>
                    <li><a href="../Portfolio/contact.html">Contact Me</a></li>

                </ul>
            </nav>
        </div>

        <div class="main">
            <div class="infoContainer">
                <div class="devInfo">
                    <div class="hello">Hi I am </div>
                    <div class="name">Nilavro Seal</div>
                    <div class="about">Developer,Programmer, ML Enthasiast</div>
                    <div class="moreabout">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed esse officiis
                        molestiae ipsa quibusdam vero.</div>
                    <div class="buttons">
                        <button>Download CV</button>
                        <button>Contact Me</button>
                    </div>
                </div>
                <div class="devPic"><img src="dev.png" alt="Developer"></div>
            </div>
        </div>
    </div>

</body>

</html>

和 CSS

@import url('https://fonts.googleapis.com/css2?family=Fira Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent Marker&family=Source Code Pro:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
}

.sidebar {
    background-color: rgb(197, 197, 197);
    width: 434px;
    font-family: 'Fira Sans', sans-serif;
    height: 100vh;
}

.sidebar nav {
    padding: 45px;
}

.sidebar nav li {
    list-style: none;
    font-size: 30px;
    padding: 33px 0;
}

.sidebar nav li a{
    text-decoration: none;
    color: black;
}

.main {
    background-color: yellow;
    width: 90vw;
}

.container {
    display: flex;
}

.infoContainer {
    background-color: orange;
    height: 58vh;
    width: 80vw;
    margin: 150px auto;
    display: flex;
    justify-content: space-around;
}

.devPic img {
    height: 58vh;
}

.devInfo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: 'Source Code Pro', monospace;
}

.hello {
    font-size: 65px;
}

.name {
    font-size: 50px;
    font-weight: bold;
    font-family: 'Fira Sans', sans-serif;
}

.about {
    font-size: 40px;
}


.buttons {
    margin-top: 34px;
}

.buttons button {
    padding: 9px 14px;
    border-radius: 22px;
    color: white;
    background-color: cornflowerblue;
    font-weight: bold;
    font-size: 23px;
    margin: 0 p px;
    cursor: pointer;
}

.buttons button:hover{
    color: cornflowerblue;
    background-color: white;
}

.moreabout {
    font-size: 22px;
    font-family: 'Fira Sans', sans-serif;
    margin-top: 23px;
}

然后我復制該代碼并制作另一個名為 Contact.html 的 html 頁面。但該頁面顯示的幾乎沒有什么不同。

我還附上了這兩頁的差異。誰能告訴為什么會發生這種奇怪的事情？

為什么相同的 html 和 css 顯示不同？

uj5u.com熱心網友回復：

這是您作為 Web 開發人員經常會遇到的問題。

為什么會這樣？

瀏覽器提供默認的 CSS 檔案。因此，例如，如果您在不匯入任何 CSS 的情況下撰寫 HTML 檔案并在瀏覽器中打開它，您將看到您的<h1>文本比您的<h2>文本大。此外，如果您在不同的瀏覽器中打開此 HTML 檔案，您將看到默認 CSS 檔案的不同之處：字體可能不同，大小也可能不同。

如何解決？

為了確保您的網站在所有瀏覽器上看起來都一樣，您可以使用 CSS 規范化器，例如：https : //necolas.github.io/normalize.css/或本文中的那些：https : //medium.com /awesome-css/resetting-browsers-default-css-46ef8d71a42d或搜索 CSS normalizer。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/393861.html

標籤：html css 浏览器网络技术

上一篇：在HTML中呼叫PHP變數

下一篇：難以掌握flex