代码之家 › 专栏 › 技术社区 › Clément

我不能把盒子放进盒子里,而且颜色不变

box css

Clément · 技术社区 · 7 年前

在我的网站主页上有4个超链接,我想以同样的方式出现在每个页面上。除了我希望我所在页面的链接与我将鼠标放在上面时的颜色相同。

我想我可以用这个代码得到:

.navigation {
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
  font-size: 30px;
}

.navigation a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  display: inline-block;
  margin: 100px 35px;
  padding: 14px;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
}

.navigation a:hover {
  background: white;
  border: 1px solid black;
  color: black;
}

#contact {
  background: white !important;
  color: black !important;
}

<div class="navigation">
  <a href="./productions.html">Mes productions</a>
  <a href="./DJ.html">DJ</a>
  <a target="_blank" href="./CV.pdf">Mon CV</a>
  <div id="contact">
    <a href="./contact.html">Me contacter</a>
  </div>
</div>

1 回复 | 直到 7 年前

Nuchimik 7 年前

但我认为在这种情况下,将链接放在“div”中是一种不好的做法。您可以简单地为链接注册一个类,并为此类编写样式。

.navigation {
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
  font-size: 30px;
}

.navigation a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  display: inline-block;
  margin: 100px 35px;
  padding: 14px;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
}

.navigation a:hover {
  background: white;
  border: 1px solid black;
  color: black;
}

#contact a {
  background: white !important;
  color: black !important;
}

<div class="navigation">
  <a href="./productions.html">Mes productions</a>
  <a href="./DJ.html">DJ</a>
  <a target="_blank" href="./CV.pdf">Mon CV</a>
  <div id="contact">
    <a href="./contact.html">Me contacter</a>
  </div>
</div>

推荐文章

Clément · 我不能把盒子放进盒子里,而且颜色不变

7 年前

t33n · Box API节点。js如何删除文件夹并显示所有文件(包括文件夹)

7 年前

AK94 · 将滚动条添加到shiny中的框中

7 年前

t33n · Box API将文件上载到管理员帐户而不是应用程序

7 年前

anna carolina · Messagebox在调试模式下工作,但未正常运行

8 年前

Mike G · Box API.NET SDK:实例化BoxJWTAuth时出现“填充块损坏”异常

9 年前

Sandy · 如何在Box API中获得授权并获取访问令牌

9 年前

Hiren Kagrana · Box.com支持的最短日期

9 年前

Dimitrije Mitic · 选择仅在未选择任何内容时可见的默认文本[HTML5]

10 年前

Christophe L · 使用Java SDK将现有用户添加到Box企业帐户时出错

10 年前