1

所以我想我要么错过了一些非常明显的东西，让自己陷入严重的跌倒，要么这显然没问题，没有人真正谈论它。

我想为一个小型网站使用一个样式表，但我希望某些页面的布局略有不同。

示例：主页将有右侧边栏；另一页将是全宽；另一个可能有三列。

就是这样了。我正在创建的是div适合各种格式的具有不同尺寸的多个。

IE。#rightSide; #leftSide; #fullWidth; #middleContent.

这个想法是我会在每页使用特定的 div 组合，而其他组合会淡入背景，直到需要。

所以我创建了索引页面，它运行良好。它是 3/4 宽度 + 右侧。现在我正在创建一个完整的宽度......它看起来仍然很好。

然而，我对 css 上的多种布局所做的所有研究都坚持认为，即使对于像双列到全宽这样的小布局更改，我也会使用不同的样式表。我已经看到以这种方式使用 CSS 的零参考，但也许我使用了错误的关键词。为 6-8 页的网站创建 3 或 4 个样式表似乎有点过分。

那么我错过了什么？

4

3 回答 3

1

这很简单，您可以为多个页面使用多个类，例如，您可以为 blogpage 使用 css 类并在 body 标签中使用它，您的 css 将是这样的

.menu{color:red}
.blogpage .menu {color:green}

每页以此类推

于 2013-07-20T07:55:22.213 回答
1

只需在您想要具有特殊功能的页面顶部放置一个样式标签，然后将所有特殊样式功能放在那里

您可以使用 nth-child 选择器：

div.class:nth-child(1) { specific style for first}
于 2013-07-20T07:32:14.387 回答
0

您可以像往常一样在每个页面上包含样式表，然后覆盖样式“每页”以满足您的需求：

主页

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/* Custome style for home page */
#rightSide {
    text-align: right;
}
</style>
</head>

第二页

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/* Custome style for second page */
#leftSide {
    text-align: left;
}
</style>
</head>

已编辑

您可以将每个页面包装在具有页面名称 id 的容器中。然后在每页的 CSS stylsheyy 中定位它。例如

HTML

<div id="homePage">
    <div class="mainDiv">
    </div>
    <div id="rightSide">
    </div>
</div>

CSS

#homePage .mainDiv {
    // style this home page only
}

#secondPage .mainDiv {
    // style this for second page
}
#homePage #rightSide {
    // style this home page only
}

#secondPage #rightSide {
    // style this for second page
}
于 2013-07-20T08:24:32.887 回答