制作简易导航栏

导航栏简介第一步先创建一个盒子创建一个无序列表调试盒子样式调试无序列表样式调试样式，添加伪类样式效果图

导航栏简介

导航栏是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。这次制作的是页面顶部的导航栏。

第一步先创建一个盒子

创建一个盒子取名navigation

<div class="navigation"> </div>

创建一个无序列表

在盒子中创建一个八行的无序列表，在里面创建，并填写内容

<div class="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">车票</a></li> <li><a href="#">团购</a></li> <li><a href="#">会员</a></li> <li><a href="#">车站</a></li> <li><a href="#">商旅</a></li> <li><a href="#">出行</a></li> <li><a href="#">查询</a></li> </ul> </div>

调试盒子样式

在HTML中创建一个内联样式，并且调试盒子的样式

<style> .navigation { /*设置最小宽度，防止页面缩小导航栏变形*/ min-width: 1000px; /*导航栏的宽高*/ height: 41px; width: 100%;/*设置屏幕最大宽度*/ /*导航栏的背景色*/ background: #3b99fc; } </style>

调试无序列表样式

接着再内联样式里面调试无序列表样式

<style> .navigation { /*设置最小宽度，防止页面缩小导航栏变形*/ min-width: 1000px; /*导航栏的宽高*/ height: 41px; width: 100%;/*设置屏幕最大宽度*/ /*导航栏的背景色*/ background: #3b99fc; } .navigation ul { /*调试整个无序列表的宽高*/ width: 1160px; height: 41px; /*无序列表左右水平居中*/ margin: 0px auto; } .navigation ul li { /*无序列表单个行的宽高*/ height: 41px; width: 145px; /*去除无序列表前面的点*/ list-style: none; /*无序列表单个行向左浮动成一排*/ float: left; /*无序列表中每行的字体水平居中*/ text-align: center; /*字体向下平移41px，使其水平居中*/ line-height: 41px; } </style>

调试样式，添加伪类样式

最后调试里的样式，再添加一个伪类样式

<style> .navigation { /*设置最小宽度，防止页面缩小导航栏变形*/ min-width: 1000px; /*导航栏的宽高*/ height: 41px; width: 100%;/*设置屏幕最大宽度*/ /*导航栏的背景色*/ background: #3b99fc; } .navigation ul { /*调试整个无序列表的宽高*/ width: 1160px; height: 41px; /*无序列表左右水平居中*/ margin: 0px auto; } .navigation ul li { /*无序列表单个行的宽高*/ height: 41px; width: 145px; /*去除无序列表前面的点*/ list-style: none; /*无序列表单个行向左浮动成一排*/ float: left; /*无序列表中每行的字体水平居中*/ text-align: center; /*字体向下平移41px，使其水平居中*/ line-height: 41px; } .navigation ul li a { /*设置字体大小*/ font-size: 15px; /*设置字体颜色*/ color: white; } .navigation ul li:hover { /*鼠标移动到li上会出现变色*/ background: #07f; } </style>

效果图