Fatal编程技术网
  • css/
  • Css 导航栏在具有相同代码的不同页面上看起来更大

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

css html

Css 导航栏在具有相同代码的不同页面上看起来更大,css,html,frontend,Css,Html,Frontend,我在几页内有一个导航栏。现在是重复代码。 我只想让它起来工作。 在我的主页页面上，它以粗体显示，略大一些。 在我的关于页面上，它显示的粗体字略少，尺寸略小。 我只是不明白为什么，他们有完全相同的代码（复制粘贴），除了href a标签被修改（URL不同） 以下是html类型的摘要： <body> <Header> <img src="img/header.gif" alt="Dental Dynamics Logo Header" class="header_

我在几页内有一个导航栏。现在是重复代码。 我只想让它起来工作。 在我的
主页
页面上，它以粗体显示，略大一些。 在我的
关于
页面上，它显示的粗体字略少，尺寸略小。 我只是不明白为什么，他们有完全相同的代码（复制粘贴），除了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>
你知道为什么会这样吗？ 我有一个带有图像标签的标题，但其大小保持不变。 这只是一堆HTML和CSS。 没有javascript（除了HTML文件中发生的JQuery之外，我不喜欢JQuery，但很好：D）

----------------------------------编辑---------------------------------- 顶部图片是
主页
页面导航栏，底部是
关于
页面导航栏

可能值得注意的是，
切换导航
部分与
链接
在脑袋里

事实上，这里是
关于
页面的
标题
，除了
标题
标签外，它与
主页
页面相同


<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">




关于我们！



你有一些截图吗？是的，正如Arkellys所说，添加截图和两页的代码（可能你错过了一些内容，请参阅复制粘贴），顺便问一下，为什么要使用“导航”标签？只需使用“div”即可。他使用“nav”标记是正确的。在这种情况下，标记提供了含义，因此是语义的。@vicgoyso完全正确。它提供了意义，所以我想为什么不使用它！

<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">