CSS导航栏及弹窗示例代码

针对“CSS导航栏及弹窗示例代码”的完整攻略，以下是详细的讲解。

CSS导航栏的制作

HTML代码结构

首先需要创建一个HTML文档，并在其中设置导航栏需要的HTML结构。一般来说，导航栏分为三大部分：左侧LOGO/品牌名称、中间菜单导航、右侧用户信息或其他附加项。此处我采用典型的bootstrap导航栏HTML结构，示例如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

CSS样式代码

接下来需要设置CSS样式，美化导航栏。经典的导航栏样式有透明/不透明背景、固定/滚动等多种形态，这里我们以透明背景、滚动为例演示。以下是CSS代码示例：

.navbar {
  background-color: transparent!important;
  transition: background-color 0.5s ease;
}

.navbar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: #f8f9fa!important;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)!important;
}

.nav-link {
  color: #fff!important;
}

.navbar-brand {
  font-size: 24px!important;
  color: #fff!important;
  padding: 12px 0;
}

关于CSS代码注释：

• 透明背景： .navbar { background-color: transparent!important; }；
• 滚动变色： .navbar.sticky { background-color: #f8f9fa!important; }；
• 导航字体颜色： .nav-link { color: #fff!important; }；
• LOGO字体颜色和大小： .navbar-brand { font-size: 24px!important; color: #fff!important; padding: 12px 0; }。

JS代码

最后需要添加一些JS代码，实现导航栏的滚动变色效果。代码如下：

$(window).scroll(function() {
  if ($(window).scrollTop() > 50) {
    $('.navbar').addClass('sticky');
  } else {
    $('.navbar').removeClass('sticky');
  }
});

此处使用了jQuery库，通过监听窗口scrollTop属性实现滚动变色。

CSS弹窗的制作

HTML代码结构

弹窗是Web开发中常用的交互元素，此处用于提示操作结果或展示一些详细信息。创建HTML文档后，需要在其中添加制作弹窗的HTML结构，以下是一个简单的HTML结构：

<div id="myModal" class="modal fade">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">This is a modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>This is some example content. Replace with your own content.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

CSS样式代码

接下来需要设置CSS样式，美化弹窗的外观和交互效果。我们以经典的Bootstrap样式为例子，以下是CSS代码示例：

.modal-header {
  border-bottom: none;
}
.modal-body {
  overflow-y: auto;
  max-height: calc(100vh - 210px);
}
.modal-footer {
  border-top: none;
}

.modal {
  z-index: 10050;
}

.modal-backdrop {
  z-index: 10049;
}

注释说明：

• 取消header上的border-bottom： .modal-header { border-bottom: none; }；
• 自动溢出滚动： .modal-body { overflow-y: auto; max-height: calc(100vh - 210px); }；
• 取消footer上的border-top： .modal-footer { border-top: none; }；
• 调整modal和遮罩层的层级关系： .modal { z-index: 10050; } .modal-backdrop { z-index: 10049; }。

JS代码

最后需要添加JS代码，触发弹窗效果。代码如下：

$('#myModal').modal('show');

此处使用了jQuery库，通过选择器取到HTML对象后调用Bootstrap提供的modal()方法显示弹窗。

至此，以上就是CSS导航栏及弹窗的制作攻略啦。希望可以帮到你。