Question

我是一个新手，正在制作一个可爱的网站。我现在已经想出如何使用一个漂亮的导航栏设置整个主页。现在我想开始链接到一些不错的子页面。我已经建立了链接并且一切正常但我对如何将CSS从主索引页面分离到子页面感到非常困惑。

例如，主页面有一个漂亮的棕榈树的jumbotron CSS。但是我希望子页面能够在背景中使用相同的CSS技巧和一堆热带水果。然后另一页有另一个背景。我觉得我在这里遗漏了一些非常基本的东西，但我现在确定如何将CSS与索引页面分开，从我想要拥有不同CSS的子页面中分离出来。我甚至不确定要问什么问题，因为我一直在谷歌搜索，我不会走得太远。

基本上我如何将主页上的设计与子页面分开？

html { 
  background: url(../images/mexicobeach.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  font-family: 'Sansita One', cursive;
  font-size: 82px;
  text-align: center;
  margin: 60px 0 0 0;
}

h2 {
   font-family: 'Sansita One', cursive;
   font-size: 120px;
   text-align: center;
   margin: 60px 0 0 0;
}

.nav {
  position:fixed;
  bottom:0px;
  left: 0;
  font-family: 'Sansita One', cursive;
  width:100%;
  height:50px;
  padding: 0px;
  text-align: center;
}

 ul {
      padding: 10px;
      background: rgba(8, 102, 112, 0.5);
    }
    li {
      display: inline;
      padding: 10px 20px 0px 30px;
    }
      a {
      color: white;
    }

    <!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="css/mexicostylesheet.css" />
  <link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
  <title>Smithies in Mexico</title>
  <style> 
  </style>
</head>

<body>
<div class="nav">
    <div class="container">
      <ul id="navigation">
        <li><a href="subpageabout.html">About</a></li>
        <li><a href="subpageschedule.html">Schedule</a></li>
        <li><a href="subpagestay.html">Stay</a></li>
        <li><a href="subpagedo.html">Do</a></li>
        <li><a href="subpageeat.html">Eat</a></li>
        <li><a href="subpagemexicanmadlibs.html">Mexican Mad Libs</a></li>
        <li><a href="subpagetacogame.html">Taco Game</a></li>
        <li><a href="subpagecountdown.html">Countdown</a></li>
        <li><a href="subpagequiz.html">Quiz</a></li>
    </ul>
  </div>
</div>

  <div class="jumbotron"
    <div class="container">
        <h1>Smith Ladies Go To</h1>
        <h2>Mexico</h2>
        </div>
      </div>
    </div> 


</body>

Answer 1

最简单的方法是从html选择器中取出背景并将其移动到正文选择器。然后你只需为正文创建多个类，并在每个页面上调用该类。

例如，在你的CSS中它看起来像这样：

body.home {background: url(../images/mexicobeach.jpg) no-repeat center center fixed; 
body.about {background: url(../images/floridabeach.jpg) no-repeat center center fixed;
body.schedule {background: url(../images/bahamabeach.jpg) no-repeat center center fixed;

然后，每个页面上的HTML将如下所示：

<body class="home"> for the home page
<body class="about"> for the about page
<body class="schedule"> for the schedule page, etc

我希望有所帮助！

如何区分主页和子页面上的CSS？

1 个答案: