純粋な CSS でシンプルで美しいナビゲーション バーを作成する

私は、いくつかの css3 属性を使用して、意識的にシンプルで美しい小さなスタイルのナビゲーション バーを作成する方法を独学しました。 とてもシンプルで美しいナビゲーションバーです。気に入った方はぜひご覧ください。

最初のコード m HTML

:

<nav>
		<ul>
			<li>哈哈哈</li>
			<li>吼吼吼</li>
			<li>嘿嘿嘿</li>
			<li>嘎嘎嘎</li>
			<li class="move"></li>
			<!--<li class="fly fly1"></li>
			<li class="fly fly2"></li>
			<li class="fly fly3"></li>
			<li class="fly fly4"></li>
			-->
		</ul>
	</nav>

ecss:

nav,
ul,
li {
	padding: 0;
	margin: 0;}
nav {
	position: relative;
	left: 35%;
	top: 20px;
	
	width: 30%;
	height: 60px;
	background-color: #66CCFF;
	
	box-sizing: border-box;
	display: inline-block;
	}
ul {
	width: 100%;
	height: 60px;
	vertical-align: middle;
	}
li {
	display: inline-block;
	
	width: 20%;
	text-align: center;
	height: 60px;
	line-height: 60px;
	cursor: pointer;
	color: #000000;
	
	transition: color 0.4s ease-in-out;
	}
li:hover {
	color: #FFFFFF;}
.move {
	display: inline-block;
	border: 4px solid #FF3333;
	height: 0px;
	background-color: #FF3333;
	
	position: absolute;
	left: 0;
	top: 56px;
	
	transition: left 0.4s ease-in-out;}
li:nth-child(1):hover~.move {
	left: 0;}
li:nth-child(2):hover~.move {
	left: 20%;}
li:nth-child(3):hover~.move {
	left: 40%;}
li:nth-child(4):hover~.move {
	left: 60%;}

E

始めに、Float を使用してリスト項目の効果を 1 行で完了します。そのため、同じナビゲーション バー内の他のコンテンツを 1 行に配置することはできません。 line.display:inline-block はこの問題をうまく解決します。

li の空の要素を移動のマークとして使用し、それを最初の位置に絶対的に配置してから、移動クラスを設定します

~

をホバーしたときの各 li 要素の空の要素の位置。 (CSS3 の新しいプロパティ、特に遷移属性は非常に便利です) PS: 同じ原理を使用して、ホバー時に下から上への色の変換を実現したいと思いました。しかし、私の考えは間違っていたようです。空の要素を 4 つ設定し、高さを 0 に設定し、ホバリングすると高さが 60px になってしまいます。拖 最初の 2 日前、ようやく「CSS3 プロフェッショナル開発ガイド」という本を読みました。CSS3 の属性の一部は使用されていませんが、その効果は非常に優れています。また、CSS と JS の間の境界があいまいになります。CSS と JS は独自の作業を行う必要がなくなりましたが、それでもデザイナーにとってははるかに便利です。

CSS を学習する必要がある学生は、php 中国語 Web サイト

CSS ビデオ チュートリアル

に注目してください。多くの CSS オンライン ビデオ チュートリアルを無料で視聴できます。

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