基于HTML和CSS的导览栏

关于导览栏，大家应该都能想到HTML里的<nav>标签。于是我们可以开始写以下代码

<nav>
  <a href="index.html">首页</a>
  <a href="about.html">关于我们</a>
  <a href="services.html">服务项目</a>
  <a href="contact.html">联系我们</a>
</nav>

其中<a>标签是HTML 里用于创建超链接的标签，与本文联系不大，因此不在此过多赘述，以上代码的运行结果如下图

这显然远远无法满足工作需要，于是我们应该尝试美化，加入<ul>标签，<ul>用来创建无序列表的标签,代码如下

<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="services.html">服务项目</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</nav>

于是原本横着的导览栏变成了竖着的，效果如下

之后我们可以考虑引入样式表，进一步美化我们的导览栏

于是我们给导览行的class属性命名为sidebar

<nav class="sidebar">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="services.html">服务项目</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</nav>

并引入

.sidebar {
    width: 200px;/* 设置侧边栏的宽度为 200 像素 */
    height: 100vh;  /* 设置侧边栏的高度为视口高度的 100%，即铺满整个浏览器窗口的高度 */
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
/* 为侧边栏添加阴影效果，阴影向右偏移 2 像素，垂直方向无偏移，模糊半径为 4 像素，颜色为黑色且透明度为 10% */
    display: flex; /* 将侧边栏元素设置为弹性容器，使其子元素成为弹性项目，方便进行布局 */
}

效果如下

接下来为<ul>无序列表引入样式表

  .sidebar ul {
    list-style-type: none;/*将列前的符号去掉*/
    padding: 20px 0;/*设置上下元素间距*/
}

.sidebar ul li a {
    color: black;/*将颜色设置为黑色*/
    text-decoration: none;/*去掉下划线*/
    padding: 10px 20px;/*修改水平和垂直方向上的间距*/
    display: block;/* 将侧边栏元素设置为弹性容器，使其子元素成为弹性项目，方便进行布局 */
    transition: all 0.3s ease;/*变化时间，使得变化更平滑*/
}

效果如下

最后，我们加上鼠标事件

  .sidebar ul li a:hover {
    color: #ff9900; /* 鼠标悬停时文字变色 */
    transform: scale(1.1); /* 鼠标悬停时放大 */
    background-color: rgba(255, 255, 255, 0.1);
}

最终效果如下