海运系统主页面导航布局

这一次完成的功能是海运系统的主页面导航部分的布局，一开始要引用Bootstrap4的插件。关于导航的这一部分功能实现的效果是，海运系统导航的布局要求是水平方向的布局，当鼠标移入到相关功能的按钮上时，会显示一列垂直方向的导航选项。这个功能可以在引用Bootstrap4的插件后用HTNML的代码完成这一个功能，只是在写CSS样式的时候代码会比较多。

在导航设计完成后，自己对导航的效果不是很满意，想要修改一下。在查资料的时候发现layui框架里面也有实现导航功能的代码，引用后改一改代码就能运行了，HTML的代码不是很多，CSS样式的代码设计起来也很简单，代码看上去还是很简洁的。

下面是HTML的代码，首先要引用Bootstrap4框架的CSS插件和layui框架的CSS插件，具体的设计内容在下面的图片上面。

Bootstrap的HTML代码是带有内外边距的，海运系统的导航外部不需要内外边距，在class的样式中用Bootstrap的代码去掉内外边距，设计为0就可以了，具体在什么地方设计如上图。a标签是用来跳转页面的，在布局其他页面完成后将需要跳转的地址放入a标签里面就能实现页面跳转了。

海运系统导航部分还有一个需求是，当鼠标移入到垂直方向的导航时，如果这个导航按钮里面还有数据，在移入上去的时候会显示，鼠标移出后会消失。下面的图片上有相关的HTML代码。鼠标移入显示，移出消失的功能要自己去写JS代码，我自己是用JQuery的代码完成这一个功能的 JQuery实现这个功能的代码是移入事件mouseenter，移除事件mouseleave，将这两个代码运用到导航里面实现需要的功能。

总结：可以实现导航功能的代码还有很多，多去尝试，就能熟练的运用代码实现自己需要的功能。