0

我是一个新手程序员，一个对设计知之甚少的大学生。我正在开发一个像 twitter 这样的微博网站，我想使用像 twitter 这样的预加载样式（或主题），我看到一个网站的页面源具有相同的功能，他们似乎没有使用不同的 CSS 文件可能是我不明白。我的问题是，如何将其应用于我的网站？请从基本描述，因为我对这件事了解不多！提前致谢。！

4

2 回答 2

1

好吧，首先您需要让您的用户能够进行一些更改。假设您已经拥有了。

您需要的是一个基本 CSS 文件，它包含所有规则和样式，除了您允许用户指定的规则和样式（或为它们设置一些默认值）。

在用户指定规则后，生成一个 css 文件，将其存储在他们的用户文件夹（或数据库，但我不建议这样做）中，然后在有人登录时加载该 css 以及您拥有的基本 css 文件用户的个人资料。

于 2013-02-16T13:55:13.767 回答
1

您可能会有一个中央 CSS 文件定义一堆不变的东西，然后是一个提供“主题”的辅助 CSS 文件。您将拥有几个这样的辅助文件，每个主题一个。构建页面时，您只需包含link其中一个文件的元素。

如果您想允许即时更改主题，您可以通过更改该href元素link的 来实现。

例如，如果我们假设link这样：

<link id="themeStyle" href="green.css" rel="stylesheet">

然后这段代码改变了它：

document.getElementById("themeStyle").href = "blue.css":

完整示例：Live Copy | 资源

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <link id="themeStyle" href="/acofoy/1" rel="stylesheet">
</head>
<body>
  <div id="group">
  <div><label><input name="theme" type="radio" value="1" checked>Green</label></div>
  <div><label><input name="theme" type="radio" value="2">Blue</label></div>
  <div><label><input name="theme" type="radio" value="3">Red</label></div>
  </div>
</body>
</html>

JavaScript：

(function() {

  var buttons = document.getElementById("group").getElementsByTagName("input");
  var index;

  for (index = 0; index < buttons.length; ++index) {
    buttons[index].onclick = setStyle;
  }

  function setStyle() {
    document.getElementById("themeStyle").href = "/acofoy/" + this.value;
  }

})();

注意：我使用数字而不是名称作为值，因为我使用的是 JSBin。当然，在现实生活中，我会使用名称（green.css、blue.css、red.css等）。

于 2013-02-16T13:55:28.963 回答