制作简易导航栏

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


导航栏简介

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

第一步先创建一个盒子

创建一个盒子取名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>

效果图

grafana制作一个导航页 制作一个导航栏_html