1

http://foundation.zurb.com/docs/components/buttons.html

从文档中可以使用 Mixin 获得自定义颜色。我不太了解 SCSS 并试图在不使用它的情况下过关。

我想要黑色按钮而不是默认的蓝色。可以创建一些 CSS 类.black { ... }来使按钮变黑吗？

4

2 回答 2

2

是的。如果您不了解 SCSS，可以通过您自己的类覆盖 css，但建议更改 _variables.scss 中的 SCSS 变量值。

css覆盖的方式是：

例如，创建一个新的 css 文件。我的样式.css

然后在之后调用html头中的css

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />

  <link rel="stylesheet" href="css/mystyle.css">

  <script src="js/vendor/custom.modernizr.js"></script>

</head>

<a href="#" class="small button black">.small black colour button</a>
<body>

然后你的 css 将覆盖foundation.css 类。

将您的 css 类添加到 html 文件中的按钮元素中。

请看上面的代码。

于 2013-09-28T13:14:46.287 回答
1

我认为你的错误可能是它被覆盖了，即使它不受欢迎，唯一的方法之一是使用!important，所以你需要使用：

.black {
    background-color: #000 !important;
}

此外，当您使用 !important 时，您还需要将其添加到您的悬停方法中，如下所示：

.black:hover {
    background-color: #ccc !important;
}

编辑

刚刚发现你甚至不需要重要的东西，但如果它开始行为不端，那就是该怎么做

这是一个小提琴：

http://jsfiddle.net/Hive7/p868s/

于 2013-09-28T13:15:38.190 回答