这段时间小编比较懒，就写一些我写过的东西吧~教大家利用HTML、CSS、JavaScript来写一个综合案例吧~今天我们主要写的就是制作一个网页的导航！
首先拿出一个例子来，我们来看看这个导航要怎么做。
首先拿到这张照片，我们可以观察一下，把这个导航分为两个部分，分别是左边的标志以及右边的文字导航，左边的比较简单，这里不一一举例，只需要我们写一些基础的样式，当然在生活里，通常标志需要我们利用PS进行切片的操作，这里小编就不演示，不会切片的可以联系小编 ，我们直接右边的文字部分。
一、老三套的公共样式不能少（如果用不惯小编微软雅黑的字体的可以自行更改）
*{
margin: 0;
padding: 0;
}
body{
font-family: Arial, Verdana, "Microsoft yahei", "Pingfang SC", Simsun;
}
a{
text-decoration: none;
}
ul,li,ol{
list-style: none;
}
.clears{
clear: both;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
二、样式的书写，这里我先给出代码，再做出解释。
1.给定导航一个大盒子，也就是Nav，设置盒子的宽高和背景，让盒子左右居中。下方的Nav_nav是为了给上方的大盒子给出宽高。
2.利用ul和li标签给定盒子的样式，这里的li指的是每个文字，上方一共有六个文字，所以在HTML里面我们就需要6个成双成对的li标签，具体的样式不一定要参照我的，可以自行进行更改。
3.li 下的a，表示的是li标签下的a标签的文字样式，也就是我们6个文字的样式应该是什么样的，里面的transition表示的有几秒切换效果。
4.当鼠标指向文字上的时候，就有了Nav_ul li a:hover，当鼠标指到文字的时候，背景变为蓝色。
三、样式写完之后，我们要书写HTML，这里的话比较简单，我就直接给出代码。
四、要成功实现效果，可千万别忘记引用样式表了。
以上就是如何制作一个导航，如果有不懂的可以问小编~下一期大家继续跟着我制作综合案例其他部分吧。