ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでナビゲーションバーを作る方法

HTMLでナビゲーションバーを作る方法

迷茫オリジナル: 2017-03-25 15:26:466242ブラウズ

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

2 番目のステップは CSS スタイルを設定することです:

1. ナビゲーションの属性を設定します

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

表示効果は次のとおりです:

#nav ul{
	list-style: none;
}

3 .

タグの属性を設定します

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

最終的な効果:

完全な HTML コード部分:

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

CSS スタイルコード部分を完成させます :

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

以上がHTMLでナビゲーションバーを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML フォームに関する包括的な知識次の記事：HTML フォームに関する包括的な知識

続きを見る