制作简易导航栏，思路明细
12/100
发布文章
qq_53810245
未选择文件
new

思路：

1. 首先用HTMl定义一套列表机制，该列表机制均由a标签控制，如下：
   

   <div id="menu">
   <ul id="list">
       <li>
           <a href="#">首页</a>
       </li>
       <li>
           <a href="#">HTML</a>
       </li>
       <li>
           <a href="#">CSS</a>
       </li>
       <li>
           <a href="#">JavaScript</a>
       </li>
       <li>
           <a href="#">关于</a>
       </li>
       <li>
           <a href="#">帮助</a>
       </li>
   </ul>
   </div>
   

   1. 使用CSS样式放置在一行
      

   list-style-type: none;：去掉圆点
   width: 100px;：宽度
   height: 50px;：高度
   line-height: 50px;：行高
   background-color:beige;：背景色
   text-align: center;：文本居中
   float: left;：整一行上
   text-decoration: none;：去掉下划线

2. 让导航栏动起来
   

   <style>
       #list li {
         
         
           list-style-type: none;
           width: 100px;
           height: 50px;
           line-height: 50px;
           /*background-color: beige;*/
           text-align: center;
           float: left;
       }
       #list li:hover{
         
         
           background-color: red;
       }
       #list li a {
         
         
           text-decoration: none;
       }
       #menu{
         
         
           width: 700px;
           height: 50px;
           background-color: beige;
           margin: 0 auto;
       }
   </style>
   

 创作不易，大侠请留步… 动起可爱的双手，来个赞再走呗 (๑◕ܫ￩๑)
思路：
首先用HTMl定义一套列表机制，该列表机制均由a标签控制，如下：
在这里插入图片描述

让导航栏动起来
在这里插入图片描述