html - 不同的 HTML 文件链接到一个具有完全相同样式标题的 CSS 文件，但在网页上显示不同的样式

问题描述

我将不同的 HTML 文件链接到一个 CSS 文件并将标题样式设置为完全相同，但是当我在导航中单击“团队”时，与单击“主页”或“历史记录”相比，标题部分缩小了。谢谢大家的帮助和解释。

在这张图片中，当您单击“团队”时，标题/导航背景会缩小，但是当您单击“主页”或“历史”时它可以正常工作（就像我预期的图片一样）

我在这里发布“主页”HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ultimate-Frisbee: Home</title>
<!--  <link rel="stylesheet" href="css/hw1.css">-->
  <link rel="stylesheet" href="css/hw2.css">
  <meta content="width=device-width, initial-scale=1" name="viewport" />
</head>

<body>
<header>
  <h1>Ultimate Frisbee</h1>
  <nav>
    <a href="cssassignment.html" class="active">home</a>
    <a href="team.html">team</a>
    <a href="history.html">history</a>
    <a href="http://www.usaultimate.org/index.html">USA ultimate</a>
  </nav>
</header>

<main>
  <aside class="half">
    <a href="https://www.w3schools.com/cssref/css3_pr_background-size.asp">
      <img src="images/a.jpg"
           alt="Creative Common Ultimate Photo"
           title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/>
      <!--      here we used title attribute, which specifies extra information about the img, but it can't replace alt, because when the
      img can't be displayed for some reason, then screen reader will read alt content rather than title attribute, also, title attribute
      can be used in any elements in html tags-->
    </a>
    <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg">
      <img alt="Ultimate Frisbee Colorado Cup 2005"
           src="images/b.jpg"/>
    </a>
    <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee">
      <img src="images/c.jpg"
           alt="Ultimate Frisbee">
    </a>
  </aside>
  <section class="half">
    <h2>Watch your Head </h2>
    <p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something
      hard to ignore in many Midwestern college towns.  Students (and people who wish they were
      still students) spend the few briefs months of good weather, sprinting down fields, hurling
      frisbees, and yelling "Stack!!".</p>
    <p>What I find much more entertaining is the large number of people who continue to play when
      the weather gets windy and the night sky darkens around oh....4:15pm.  The sight of frisbees
      boomeranging in the wind is topped only by the knowledge that even when you can't seem, those
      same plastic discs of death are probably hurtling through the dark night sky at 8 or 9 o'clock
      in the evening.</p>
    <p>Ultimate Frisbee requires a great deal of stamina and dexterity.  Not surprisingly,
      the <abbr title="international olympic committee "> IPO </abbr> officially recognized Ultimate
      as a sport in 2015.   It can go up against other sports for inclusion in  Olympic games.</p>
  <p>add a new repo for python in github</p>
  </section>
</main>
</body>
</html>

我在这里发布我的“团队”html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ultimate-Frisbee: Home</title>
  <!--  <link rel="stylesheet" href="css/hw1.css">-->
  <link rel="stylesheet" href="css/hw2.css">
<!--  <meta content="width=device-width, initial-scale=1" name="viewport" />-->
</head>

<body>
<header>
  <h1>Ultimate Frisbee</h1>
  <nav>
    <a href="cssassignment.html">home</a>
    <a href="team.html" class="active">team</a>
    <a href="history.html">history</a>
    <a href="http://www.usaultimate.org/index.html">USA ultimate</a>
  </nav>
</header>

<main>
  <aside class="half">
    <a href="https://www.w3schools.com/cssref/css3_pr_background-size.asp">
      <img src="images/a.jpg"
           alt="Creative Common Ultimate Photo"
           title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/>
      <!--      here we used title attribute, which specifies extra information about the img, but it can't replace alt, because when the
      img can't be displayed for some reason, then screen reader will read alt content rather than title attribute, also, title attribute
      can be used in any elements in html tags-->
    </a>
    <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg">
      <img alt="Ultimate Frisbee Colorado Cup 2005"
           src="images/b.jpg"/>
    </a>
    <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee">
      <img src="images/c.jpg"
           alt="Ultimate Frisbee">
    </a>
  </aside>

  <section class="half">
    <h2>College Teams</h2>
    <p>This is not meant to be a comprehensive list of all the teams, just a sampling from around
       the united states. I focused on the ones that I though bad cools names.</p>


  <section>
    <table class="cal">
      <thead>
      <tr><th class="head">Team Name</th><th>Location</th><th>League Type</th></tr>
      </thead>
      <tbody>
        <tr><td class="blank">Afterburn</td> <td class="body">Colorado</td> <td class="body">Men's</td></tr>
        <tr><td class="blank">Cold Front</td> <td class="body">Maine</td> <td class="body">Women's</td></tr>
        <tr><td class="blank">Disco Inferno</td> <td class="body">Rhode Island</td> <td class="body">Women's</td></tr>
        <tr><td class="blank">Bad Habit</td> <td class="body">Washington DC</td> <td class="body">Men's</td></tr>
        <tr><td class="blank">Jive Turkeys</td> <td class="body">Pennsylvania</td> <td class="body">Both</td></tr>
        <tr><td class="blank">Knights of the Round Disc</td> <td class="body">Virginia</td> <td class="body">Men's</td></tr>
        <tr><td class="blank">Ninjas</td> <td class="body">Minnesota</td> <td class="body">Women's</td></tr>
        <tr><td class="blank">Flying Squirrels</td> <td class="body">Arizona</td> <td class="body">Men's</td></tr>
        <tr><td class="blank">Superfly</td> <td class="body">Connecticut</td> <td class="body">Men's</td></tr>
        <tr><td class="blank">Flywheel</td> <td class="body">Michigan</td> <td class="body">Women's</td></tr>
      </tbody>
    </table>
  </section>

  </section>
</main>
</body>
</html>

我在这里发布了我的 CSS 文件的一部分：

body {
    margin: 2%;
    box-sizing: border-box;
}
header {
    background-image: url("../images/d.jpg");
    /*background-color: blanchedalmond;*/
    border: solid 1px black;
    margin: 20px;
    padding: 20px;
}
h1 {
    text-align: center;
    color: black;
    font-size: 250%;
}
nav>a {
    border: solid 1px black;
    padding: 10px 30px;
    font-family: "Arial Narrow", sans-serif;
    margin: 7%;
    text-decoration: none;
    background-color: aliceblue;
    text-transform: capitalize;
    text-align: center;
    font-size: 150%;
}
nav .active {
    background-color: #ce6153;
}
aside {
    width: 12%;
    line-height: 45px;
    background-color: burlywood;
    padding: 1%;
    float: left;
    margin-right: 4%;
}
aside img {
    width: 90%;
    height: 40%;
    display: block;
    margin: 4%;
    background-size: 300px 100px;
    border: solid 1px black;
}
table {
    line-height: 40px;
    width: 60%;
    font-family: "Arial Narrow", sans-serif;
    font-size: medium;
    border-collapse: separate !important;
    transform: translate(10%, 3%);
/*    the translate attribute of transform is used to locate the table which corner it should be at or toward*/
}
td, th {
    padding-left: 8px;
}
/*attention:  if you add border to the table, then table has border, not the head of table, so for the radius of the thead,
you need to add border to th rather than table or thead.but the head of thead. check the structure of table in html*/
th {
    border: 1px solid #e6b0b0;
    border-radius: 10px 10px 0 0;
    background-image: linear-gradient(to bottom, rgba(0, 255, 153,0), rgba(0,255,153,1));
}

.head {
    text-align: left;
}

tbody {
    background-color: #78a757;
}

.body {
    text-align: center;
}

tbody td{
    opacity: 0.7;
}

tbody:hover td {
    opacity: 1;
}

section .half{
    display: inline-block;
}

标签： htmlcss

html - 不同的 HTML 文件链接到一个具有完全相同样式标题的 CSS 文件，但在网页上显示不同的样式

问题描述

解决方案

推荐阅读