Home > Article > Web Front-end > How to make navigation bar through html

How to make navigation bar through html

迷茫Original: 2017-03-25 15:26:466175browse

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

The second step is to set the CSS style:

1. Set the nav attribute

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

The display effect is as follows:

2. Clear the dot in front of the ff6d136ddc5fdfeffaf53ff6ee95f185 tag

#nav ul{
	list-style: none;
}

3. Set the attributes of the 3499910bf9dac5ae3c52d5ede7383485 tag contained under ff6d136ddc5fdfeffaf53ff6ee95f185

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

4. Set the mouse over effect

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

Final effect:

Complete HTML code part:

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

Complete CSS style code part :

*{
	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;
}

The above is the detailed content of How to make navigation bar through html. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Comprehensive knowledge of html formsNext article：Comprehensive knowledge of html forms

See more

How to make navigation bar through html

Related articles