code CSS pour implémenter la barre de navigation verticale et la barre de navigation horizontale-tutoriel CSS-php.cn

code CSS pour implémenter la barre de navigation verticale et la barre de navigation horizontale

不言

Libérer： 2018-08-24 11:51:27

original

3836 Les gens l'ont consulté

Le contenu de cet article concerne le code CSS pour implémenter la barre de navigation verticale et la barre de navigation horizontale. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Style de la barre de navigation verticale

<!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>

Copier après la connexion

Style de la barre de navigation horizontale

<!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>

Copier après la connexion

Recommandations associées :

Css pour réaliser un tri d'images similaire aux galeries d'images (code complet)

Comment obtenir l'effet d'animation de la diffusion d'ondulations d'eau en CSS (code pur)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!