前端学习（简单导航栏案例）

183 阅读 0 评论 121 点赞

我是靠谱客的博主专注棒球，这篇文章主要介绍前端学习（简单导航栏案例），现在分享给大家，希望可以做个参考。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单导航栏案例</title>
  <style>
    /*1. 变化样式 有大小  一行显示  我们想到了 行内块元素*/
    a {
      /*一定要进行模式转换 行内块*/
      display: inline-block;
      background-color: pink;
      width: 100px;
      height: 30px;
      color: azure;
      /*可以让文字水平居中*/
      text-align: center;
      /*行高等于高度 可以让单行文本垂直居中*/
      line-height: 30px;
    }
    /*2. 鼠标经过 变化底色 和 文字的颜色*/
    a:hover {
      background-color: orange;
      color: #b3d4fc;
    }
  </style>
</head>
<body>
<a>新闻</a>
<a>体育</a>
<a>汽车</a>
<a>好用</a>
</body>
</html>