Question

我在几页内有一个导航栏。现在是重复的代码。我只想开始工作。在我的home页上，它以粗体显示并稍大。在我的about页上，它的粗体显示略小一些。我只是对为什么感到困惑，除了修改了href a 标记（URL不同）之外，它们具有完全相同的代码（粘贴了副本）。

这是html的一种摘要：

<body>
<Header>
    <img src="img/header.gif" alt="Dental Dynamics Logo Header" class="header_logo">
</Header>
<nav>
    <div class="toggle-nav">
        <i class="fa fa-bars menu" aria-hidden="true"></i>
    </div>

    <ul>
        <li>
            <a href="">Home</a>
        </li>
        <li>
            <a href="html/about.html">About Us</a>
        </li>
        <li>
            <a href="">Doctors</a>
        </li>
        <li>
            <a href="html/officeTour.html">Office Tour</a>
        </li>
        <li>
            <a href="">Sterilization Infection Control</a>
        </li>
        <li>
            <a href="">Technology</a>
        </li>
        <li>
            <a href="">Bleaching</a>
        </li>
        <li>
            <a href="">Photos</a>
        </li>
        <li>
            <a href="">Map</a>
        </li>
        <li>
            <a href="">Post Op</a>
        </li>
        <li>
            <a href="">Forms</a>
        </li>
        <li>
            <a href="">Insurance/Payment</a>
        </li>
        <li>
            <a href="">Just For Fun</a>
        </li>
    </ul>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(() => {
        $('.menu').click(() => {
            $('ul').toggleClass('active');
        })
    })
</script>

这是与之配套的CSS：

* {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url("./../img/dental_background.jpg");
    background-size: cover;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.header_logo {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
}
nav {
    width: 100%;
}

nav ul {
    margin: 0 auto;
    padding: 0;
}

nav ul li {
    display: inline-block;
    list-style: none;
}

nav ul li a {
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 62.5%;
    color: #0000e0;
    display: block;
    padding: 1.5em;
} 

nav ul li a:hover,
nav ul li a:focus {
    font-size: 70%;
    color: blueviolet;
    background: rgba(177, 173, 173, 0.3);
}

.toggle-nav {
    width: 100%;
    padding: 0.5% 1.1%;
    text-align: left;
    box-sizing: border-box;
    font-size: 150%;
    color: #0000e0;
    display: none;
}

@media (max-width: 768px) {
    .toggle-nav {
        display: block;
    }

    nav ul {
        width: 100%;
        display: block;
    }

    nav ul li {
        display: block;
        text-align: center;
    }

    .active {
        display: none;
    }
}

关于为什么发生这种情况的任何想法？我有一个带有图像标签的标头，但其大小保持不变。这只是一堆HTML和CSS。没有javascript（JQuery发生在HTML文件中，不是jquery的支持者，但：D）

----------------------------------编辑------------ ---------------------- 顶部图片是home页面的导航栏，底部是about页面的导航栏。

可能值得注意的是，toggle-nav部分与link相关 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">在头上？

实际上，这是head页中的about，与home页相同，除了Title标签之外。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>About Us!</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

导航栏在具有相同代码的不同页面上看起来更大

0 个答案: