用最粗暴的方式，完成最简单的head部分水平导航

红太狼 2022-01-26 00:13 192阅读 0赞

首页水平导航

作者：吱韩菌  
开发工具：Visual Studio 2015  
撰写时间：2019-5-23

下面我们要做的是利用插件(layui.css)制作head部分的水平导航。

在layui 文档的水平导航效果只是这样的（如图1），为了能够让它变成自己想要的那种效果，那就需要自己来给它改变样式。如何改变？一起来看看吧！  
图1：  
![在这里插入图片描述][20190527165235225.png]  
图1部分是layui文档中水平导航的原样式，在“解决方案”部分的效果是将鼠标移入然后显示下拉框内容，而我们接下来需要做的是图2、图3那样的效果。下拉框的内容是较多的，而且文字是横向整齐的排列，为了达到那种效果，我给了它class，然后根据自己想要的样式设置，这里我为了让下拉框能够放下跟多内容，给它加了宽度，但是加了width之后，样式样式会变乱，之后给了它一个position将它定位。至于内容区域，layui文档中用的是dl和dd标签，这里我用的是

<table> 
 <tbody> 
  <tr> 
   <td>标签（如图4），为了让它能够横向排列。<br> position: absolute; width: 920px; background: #e9e9e9; color: black;</td> 
  </tr> 
 </tbody> 
</table>

图2：

![在这里插入图片描述][20190527165534237.png]  
图3：  
![在这里插入图片描述][20190527165601656.png]  
图4：  
![在这里插入图片描述][20190527165711829.png]  
图3部分需要纵向排列，我用的是

*  标签，可以使其达到纵向排列的效果，文字部分开始是用a 标签包裹，为了让鼠标移入有效果，可用了a标签后出现BUG 点击内容会出现下划线，一时半会儿也找不出BUG，于是用了p标签代替，为了让它有移入效果，还给它添加了cursor: pointer; 作用是让鼠标移入指定区域，能出现手掌的效果。  
    ![在这里插入图片描述][20190527165739766.png]  
    总结：在搭建页面的时候使用插件确实能够方便不少，但也会出现一些意想不到的问题，这都需要程序员耐心的克服，只要对插件有够多的了解，对它的使用更熟练，一切问题都可以迎刃而解。

[20190527165235225.png]: /images/20220126/f08d926b80db4a1e8cf84c6ce8456806.png
[20190527165534237.png]: /images/20220126/b5fee7fc2ee64f21845927808429da33.png
[20190527165601656.png]: /images/20220126/56fcfa5e0d4b4c9bb92f612fccdfa55d.png
[20190527165711829.png]: /images/20220126/18594b1a2f4e4cc880b7797eccfa4eb0.png
[20190527165739766.png]: /images/20220126/6aff0d4c2b594195907730f97300a199.png