用html制作导航栏加下拉列表，制作图片样式，遮挡效果代码展示

好的，以下是制作导航栏和下拉列表、制作图片样式、制作遮挡效果的 HTML 和 CSS 代码示例：

1. 制作导航栏和下拉列表：

HTML 代码：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Services &#9662;</a>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS 代码：

nav {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 10px;
  position: relative;
}

nav ul li a {
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

nav ul li ul {
  background-color: #333;
  display: none;
  position: absolute;
  top: 40px;
  width: 150px;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  padding: 10px;
}

nav ul li ul li a {
  color: #fff;
  display: block;
  padding: 5px;
}

2. 制作图片样式：

HTML 代码：

<div class="image-container"></div>

CSS 代码：

.image-container {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  height: 300px;
  width: 300px;
}

3. 制作遮挡效果：

HTML 代码：

<div class="overlay"></div>

CSS 代码：

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

这些示例代码可以帮助您了解如何使用 HTML 和 CSS 制作导航栏和下拉列表、制作图片样式、制作遮挡效果。您可以将这些代码复制到您的网页中，并根据需要进行修改和调整。