使用CSS实现门户网站导航 在任务3的基础上，编写基本的CSS3样式表，综合运用CSS基础选择器、属性选择器、关系选择器、伪元素选择器、链接伪类选择器等，结合CSS的继承性、层叠性编写网站的基础样式表

使用CSS实现门户网站导航通常涉及以下几个步骤：

1. **HTML结构**:

<nav id="main-navigation">
  <ul class="menu">
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

2. **基础样式** (CSS部分):

/* 设置导航栏的基本样式 */
#main-navigation {
  background-color: #333;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

/* 链接样式 */
.menu a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease;
}

/* 激活状态下的链接 */
.menu a:hover, .menu a:focus {
  color: yellow;
}

/* 点击后的下划线效果 */
.menu a:active {
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 子菜单显示 */
.menu li ul {
  display: none;
  position: absolute;
  top: 100%;
}

/* 子菜单激活 */
.menu li:hover > ul {
  display: block;
}

3. **响应式设计**:
为了适应不同设备，可以添加媒体查询：

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}