css code to implement vertical navigation bar and horizontal navigation bar-CSS Tutorial-php.cn

css code to implement vertical navigation bar and horizontal navigation bar

不言

Release： 2018-08-24 11:51:27

Original

3770 people have browsed it

The content of this article is about the CSS code to implement vertical navigation bar and horizontal navigation bar. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Style of vertical navigation bar

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			ul {
				list-style-type:none;
				margin:0;
				padding:0;
			}
			
			a:link, a:visited {
				display:block;
				font-weight:bold;
				color:#FFFFFF;
				background-color:#98bf21;
				width:120px;
				text-align:center;
				padding:4px;
				text-decoration:none;
				text-transform:uppercase;
			}
			
			a:hover, a:active {
				background-color:#7A991A;
			}
		</style>
	</head>
	<body>
		<ul>
		<li><a href="#home">主页</a></li>
		<li><a href="#news">新闻</a></li>
		<li><a href="#contact">联系</a></li>
		<li><a href="#about">关于</a></li>
		</ul>
	</body>
</html>

Copy after login

Style of horizontal navigation bar

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			ul {
				list-style-type:none;
				margin:0;
				padding:0;
				overflow:hidden;
			}
			
			li {
				float:left;
			}
			
			a:link, a:visited {
				display:block;
				font-weight:bold;
				color:#FFFFFF;
				background-color:#98bf21;
				width:120px;
				text-align:center;
				padding:4px;
				text-decoration:none;
				text-transform:uppercase;
			}
			
			a:hover, a:active {
				background-color:#7A991A;
			}
		</style>
	</head>
	<body>
		<ul>
		<li><a href="#home">主页</a></li>
		<li><a href="#news">新闻</a></li>
		<li><a href="#contact">联系</a></li>
		<li><a href="#about">关于</a></li>
		</ul>
	</body>
</html>

Copy after login

Related recommendations:

css implements image sorting similar to image gallery (complete code)

css how to achieve the animation effect of water ripple diffusion (pure code)

The above is the detailed content of css code to implement vertical navigation bar and horizontal navigation bar. For more information, please follow other related articles on the PHP Chinese website!