你的位置:首页 > 网页设计

[网页设计]HTML一级导航制作

今天分享一下简单导航栏的制作方法:

第一步:引入css样式表,新建一个id为nav的层,使用<ul>、<li>、<a>标签来制作完成效果。

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="css/yiji.css"/>  </head>  <body>    <div id="nav">      <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>      </ul>    </div>  </body></html>

第二步设置CSS样式:

1.设置nav的属性

#nav{  width: 500px;  height: 50px;  border: 1px solid red;}

展示效果如下所示:

  

2.清除<ul>标签前面自带的点

#nav ul{	list-style: none;}

3.设置<ul>下包含的<a>标签的属性

#nav ul li a{	width: 98px;	height: 50px;	float: left;	border: 1px solid red;	text-align: center;	line-height: 50px;	text-decoration: none;}

  4.设置鼠标滑过效果

#nav ul li a:hover{	background-color: #ABCDEF;}

  最终效果:

完整HTML代码部分:

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<link rel="stylesheet" type="text/css" href="css/yiji.css"/>	</head>	<body>		<div id="nav">			<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>			</ul>		</div>	</body></html>

  完成CSS样式代码部分:

*{	margin: 0;	padding: 0;}#nav{	width: 500px;	height: 50px;	border: 1px solid red;	margin: 30px;}#nav ul{	list-style: none;}#nav ul li a{	width: 98px;	height: 50px;	float: left;	border: 1px solid red;	text-align: center;	line-height: 50px;	text-decoration: none;}#nav ul li a:hover{	background-color: #ABCDEF;}