Maison > Article > interface Web > Étapes de mise en œuvre de la mise en œuvre d'une barre de navigation dans les menus avec effet d'ombre en utilisant du CSS pur
Les étapes pour implémenter une barre de navigation de menu avec effet d'ombre en utilisant du CSS pur nécessitent des exemples de code spécifiques
Dans la conception Web, la barre de navigation de menu est un élément très courant. En ajoutant un effet d'ombre à la barre de navigation du menu, vous pouvez non seulement augmenter son esthétique, mais également améliorer l'expérience utilisateur. Dans cet article, nous utiliserons du CSS pur pour implémenter une barre de navigation de menu avec un effet d'ombre et fournirons des exemples de code spécifiques pour référence.
Les étapes de mise en œuvre sont les suivantes :
<!DOCTYPE html> <html> <head> <title>带阴影效果的菜单导航栏</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul class="menu"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html>
.menu { list-style-type: none; margin: 0; padding: 0; background-color: #fff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); } .menu li { display: inline-block; margin-right: 10px; } .menu li a { display: block; padding: 10px; text-decoration: none; color: #333; font-weight: bold; } .menu li a:hover { background-color: #f5f5f5; } .menu li:first-child { margin-left: 10px; }
Tout d'abord, nous avons ajouté la classe .menu
pour le conteneur de la barre de navigation des menus et défini quelques styles de base. Nous définissons le type de style de liste sur aucun
, supprimant ainsi le style d'élément de liste par défaut. Ensuite, nous avons appliqué un effet box-shadow
avec une ombre au conteneur de la barre de navigation du menu. Les significations des paramètres ici sont : définir l'ombre pour qu'elle ne soit pas décalée dans la direction horizontale (0px), et dans la direction verticale, le décalage est de 2 pixels (peut être ajusté selon les besoins), le rayon de flou de l'ombre est de 5 pixels et la couleur de l'ombre est une valeur RVBA. .menu
类,并设置了一些基本样式。我们将列表样式类型设置为 none
,去除了默认列表项的样式。接着,我们对菜单导航栏容器应用了一个带阴影的 box-shadow
效果,这里的参数意义分别为:设置阴影在水平方向上不偏移(0px)、在垂直方向上的偏移量为2像素(可根据需要进行调整)、阴影的模糊半径为5像素、阴影的颜色为RGBA值。
然后,我们对每个 li
列表项设置了样式。我们将 display
属性设置为 inline-block
,使得列表项横向排列。同时,我们添加了一个 margin-right
属性,控制列表项之间的间距。这里我们设置为10像素,你可以根据需要进行调整。
接下来,我们为每个菜单项的链接设置了一些基本样式,如显示为块级元素、内边距、字体颜色和粗细等。当鼠标悬停在链接上时,我们设置了一个背景色,以提高可视化效果。
最后,我们使用 :first-child
伪类选择器为第一个列表项设置了一个 margin-left
li
. Nous définissons l'attribut display
sur inline-block
afin que les éléments de la liste soient disposés horizontalement. En même temps, nous avons ajouté un attribut margin-right
pour contrôler l'espacement entre les éléments de la liste. Ici, nous le définissons sur 10 pixels, vous pouvez l'ajuster selon vos besoins. :first-child
pour définir un attribut margin-left
pour le premier élément de la liste afin d'éviter tout conflit avec le conteneur de la barre de navigation du menu. . L'espacement est trop grand. Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!