CSS学习笔记（十一）透明悬停效果，CSS 导航栏

最新推荐文章于 2024-06-01 19:28:30 发布

〔晴【天】º〕

最新推荐文章于 2024-06-01 19:28:30 发布

阅读量1.6k

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_43625134/article/details/117134744

版权

前端学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

透明悬停效果

opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：

实例

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

例子解释
第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。

当鼠标指针离开图像时，图像将再次透明。

反向悬停效果的例子：
实例

img:hover {
  opacity: 0.5;
}

透明盒中的文本

实例

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>这是一些位于透明框中的文本。</p>
  </div>
</div>

</body>
</html>

例子解释
首先，我们创建一个带有背景图像和边框的 <div> 元素（class="background"）。

然后，我们在第一个 <div> 中创建另一个 <div>（class="transbox"）。

<div class="transbox"> 有背景色和边框 - 这个 div 是透明的。

在透明的 <div> 内，我们在 <p> 元素内添加了一些文本。

CSS 导航栏

导航栏

易用的导航对于任何网站都很重要。

通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏 = 链接列表

导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义：

<!DOCTYPE html>
<html>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>注释：我们将 href="#" 用于测试链接。在实际的网站中，用的是 URL。</p>

</body>
</html>

结果：
在这里插入图片描述
现在，从列表中删除项目符号以及外边距和内边距（填充）：
实例
（在上面代码加入此段）

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

例子解释：

list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。

CSS 垂直导航栏

垂直导航栏

如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：

实例

li a {
  display: block;
  width: 60px;
}

例子解释：
display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。
您还可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
}

垂直导航栏实例

创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：
实例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h1>垂直导航栏</h1>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

活动/当前导航链接

向当前链接添加 “active” 类，以使用户知道他/她在哪个页面上：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h1>垂直导航栏</h1>
<p>在此例中，我们创建一个具有绿色背景色和白色文本的 "active" 类。该类将添加到 "Home" 链接。</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

居中链接以及添加边框

把 text-align:center 添加到 <li> 或 <a>，使链接居中。

将 border 属性添加到 <ul>，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有 <li> 元素添加 border-bottom，最后一个元素除外：
实例

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

全高固定垂直导航栏

创建全高的“粘性”侧面导航：
实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* 全高 */
  position: fixed; /* 使它产生粘性，即使在滚动时 */
  overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
}

注意：本例在移动设备上可能无法正常工作。

完整的代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h1>全高的固定侧导航栏</h1>
  <h2>请尝试滚动此区域，并查看 sidenav 如何粘在页面上。</h2>
  <p>请注意，此 div 元素的左外边距为 25％。这是因为侧导航栏被设置为 25％ 宽。如果删除这个外边距，则 sidenav 将叠加到该 div 上。</p>
  <p>还要注意，我们已为 sidenav 设置 overflow：auto。如果 sidenav 太长时（例如，如果其中有超过 50 个链接），会添加滚动条。</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>
</html>

〔晴【天】º〕

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（十一）透明悬停效果，CSS 导航栏

透明悬停效果opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：实例img { opacity: 0.5;}img:hover { opacity: 1.0;}例子解释第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。当鼠标指针离开图像时，图像将再次透明。反向悬停效果的例子：实例
复制链接

扫一扫

专栏目录