순수 CSS를 사용하여 그림자 효과가 있는 메뉴 탐색 모음을 구현하는 구현 단계
- 王林원래의
- 2023-10-16 08:27:281273검색
순수한 CSS를 사용하여 그림자 효과가 있는 메뉴 탐색 모음을 구현하는 단계에는 특정 코드 예제가 필요합니다.
웹 디자인에서 메뉴 탐색 모음은 매우 일반적인 요소입니다. 메뉴 탐색 모음에 그림자 효과를 추가하면 미적 측면도 향상될 뿐만 아니라 사용자 경험도 향상됩니다. 이 기사에서는 순수 CSS를 사용하여 그림자 효과가 있는 메뉴 탐색 모음을 구현하고 참조할 수 있는 특정 코드 예제를 제공합니다.
구현 단계는 다음과 같습니다.
- HTML 구조 만들기
먼저 메뉴 탐색 모음을 수용할 기본 HTML 구조를 만들어야 합니다. 다음은 간단한 예입니다.
<!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>- CSS 스타일 추가
다음으로, 그림자 효과가 있는 메뉴 탐색 모음을 구현하기 위해 스타일 시트 파일(style.css)에 CSS 스타일을 추가해야 합니다. 전체 CSS 코드 예는 다음과 같습니다.
.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;
}
- 코드 분석
먼저 메뉴 탐색 모음 컨테이너에 .menu 클래스를 추가하고 몇 가지 기본 스타일을 설정했습니다. 목록 스타일 유형을 none으로 설정하여 기본 목록 항목 스타일을 제거했습니다. 다음으로 메뉴 탐색 모음 컨테이너에 그림자가 포함된 box-shadow 효과를 적용했습니다. 여기서 매개변수의 의미는 그림자가 수평 방향(0px)으로 오프셋되지 않도록 설정하고, 수직 방향으로 오프셋은 2픽셀(필요에 따라 조정 가능), 그림자의 흐림 반경은 5픽셀, 그림자의 색상은 RGBA 값입니다. .menu 类，并设置了一些基本样式。我们将列表样式类型设置为 none，去除了默认列表项的样式。接着，我们对菜单导航栏容器应用了一个带阴影的 box-shadow 效果，这里的参数意义分别为：设置阴影在水平方向上不偏移（0px）、在垂直方向上的偏移量为2像素（可根据需要进行调整）、阴影的模糊半径为5像素、阴影的颜色为RGBA值。
然后，我们对每个 li 列表项设置了样式。我们将 display 属性设置为 inline-block，使得列表项横向排列。同时，我们添加了一个 margin-right 属性，控制列表项之间的间距。这里我们设置为10像素，你可以根据需要进行调整。
接下来，我们为每个菜单项的链接设置了一些基本样式，如显示为块级元素、内边距、字体颜色和粗细等。当鼠标悬停在链接上时，我们设置了一个背景色，以提高可视化效果。
最后，我们使用 :first-child 伪类选择器为第一个列表项设置了一个 margin-left
li 목록 항목에 스타일을 설정합니다. 목록 항목이 가로로 정렬되도록 display 속성을 inline-block으로 설정했습니다. 동시에 목록 항목 사이의 간격을 제어하기 위해 margin-right 속성을 추가했습니다. 여기서는 10픽셀로 설정했으며 필요에 따라 조정할 수 있습니다. - 다음으로 블록 수준 요소로 표시, 패딩, 글꼴 색상 및 두께 등 각 메뉴 항목의 링크에 대한 몇 가지 기본 스타일을 설정합니다. 시각화를 개선하기 위해 링크 위에 마우스를 올렸을 때 배경색을 설정했습니다.
마지막으로 메뉴 탐색 모음 컨테이너와의 충돌을 피하기 위해
:first-child 의사 클래스 선택기를 사용하여 첫 번째 목록 항목에 대한 margin-left 속성을 설정합니다. . 간격이 너무 큽니다. 위 내용은 순수 CSS를 사용하여 그림자 효과가 있는 메뉴 탐색 모음을 구현하는 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!