1、在电脑上打开软件,新建一个html文件,在head部分,编写css样式, list-style-type: none是除掉导航前面默认带的点,li a,li a.active ,li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容,可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。
3、在浏览器中打开页面,可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上,可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏,overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏,float: left使导航栏水平显示。
6、在浏览器中打开页面,可以看到制作出美观的水平导航栏,已经置顶了。
您好!您应该提问了2次吧,再给您回答一次:
<style>body,li,ul{margin:0padding:0} /* 浏览器重置 */
li{list-style:none} /* 浏览器重置 去掉li前面的点 */
.nav{background:#36Czoom:1width:500pxmargin:50px auto} /* 设置整个导航条的样式,以及IE的清浮动 */
.nav:after{clear:bothdisplay:blockcontent:""} /* 标准浏览器的清浮动,因为里面的li浮动了 */
.nav li {float:leftpadding:0 10pxcolor:#F00height:24pxline-height:24px} /* 每个导航项的样式,关键是设置浮动让每个li在同一行(float:left) */
</style>
<ul class="nav">
<li>导航项1</li>
<li>导航项2</li>
<li>导航项3</li>
<li>导航项4</li>
</ul>
希望我的回答能够帮到您!如果有什么不懂的可以追问我。如果有帮助请采纳,回答不易!