垂直ナビゲーションバーと水平ナビゲーションバーを実装する CSS コード-CSSチュートリアル-php.cn

垂直ナビゲーションバーと水平ナビゲーションバーを実装する CSS コード

不言

リリース： 2018-08-24 11:51:27

オリジナル

3770 人が閲覧しました

この記事の内容は、垂直ナビゲーションバーと水平ナビゲーションバーを実装するための CSS コードです。必要な方は参考にしていただければ幸いです。

垂直ナビゲーションバーのスタイル

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

ログイン後にコピー

水平ナビゲーションバーのスタイル

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

ログイン後にコピー

関連推奨事項: 画像ギャラリーと同様の画像の並べ替えを実装するための

CSS (完全なコード)

実装方法CSSアニメーション効果での透かし拡散（純粋なコード）

以上が垂直ナビゲーションバーと水平ナビゲーションバーを実装する CSS コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。