伪类元素创建一个导航的案例：::before :hover::before的用法为重点

最新推荐文章于 2024-08-09 16:06:18 发布

原创最新推荐文章于 2024-08-09 16:06:18 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#::before #:hover::before

前端学习笔记专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的美观且交互友好的网页导航栏设计方法。该导航栏具备良好的响应式布局特性，通过简单的代码实现了鼠标悬停时的动态效果，适用于各类网站的顶部导航栏设计。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<style>
body{
padding: 0;
margin: 0 auto;
font-size: 12px;
}/*对整体进行控制一下*/
.bj{
width: 100%;
height: 40px;
background-color: #ffd200;
}
.nav{
width: 560px;
height: 40px;
margin: 0 auto;/*上下左右居中*/
padding: 0;
}
.nav li{
list-style: none;/*去掉前面的装饰*/
width: 70px;
height: 40px;
float: left;
text-align: center;/*文体水平居中对齐*/
line-height: 40px;/*相当于上下对齐*/
position: relative;
z-index: 99;
}
.nav li::before {
content:"";
width: 68px;
height: 28px;
background-color: #edaf1a;
border-radius: 14px;/*28/2高度除以2*/
position: absolute;
top: 6px;
left: 1px;
z-index: -9;/*这里必须用负值因为有三层1、背景色，2、字体3、伪元素层*/
display: none;/*不显示*/
}
.nav li:hover::before{/*意思是我们鼠标移入时我们的before伪元素是一个什么状态*/
display: block;/*以块状元素显示*/
}
.nav li:hover{
color: #fff;
cursor: pointer; /*指针变成小手形势*/
}
</style>
</head>
<body>
<div class="bj">
<ul class="nav">
<li>软件入门</li>
<li>字体设计</li>
<li>海报设计</li>
<li>C4D教程</li>
<li>图像合成</li>
<li>综合设计</li>
<li>产品精修</li>
<li>系列课</li>
</ul>
</div>
</body>
</html>