Erstellen Sie eine einfache und schöne Navigationsleiste mit reinem CSS

Ich habe mir selbst beigebracht, mithilfe einiger CSS3-Attribute eine kleine Navigationsleiste zu erstellen, die bewusst einfach und schön ist. Es ist eine sehr einfache und schöne Navigationsleiste. Freunde, denen sie gefällt, können einen Blick darauf werfen.

Geben Sie zuerst den Code ein. HTMLs :

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

CSSs:

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%;}

Wenn Sie beginnen, verwenden Sie Float, um die Listenelemente zu vervollständigen Der Effekt einer Zeile besteht darin, dass die Reihenfolge umgekehrt wird und sie weiterhin in Form von Blockelementen vorhanden ist, sodass andere Inhalte derselben Navigationsleiste nicht in einer Zeile angeordnet werden können. Anzeige: Inline-Block löst dieses Problem sehr gut.

Weitere kleine Highlights sind die Verwendung eines leeren Elements von li als Markierung für die Bewegung, die absolute Positionierung an der ersten Position und das anschließende Setzen jedes li durch ~ Die Bewegungsklasse bestimmt die Position des leeren Elements, wenn der Mauszeiger über das Element bewegt wird. (Die neuen Attribute von CSS3 sind wirklich nützlich, insbesondere das Übergangsattribut)

ps: Ich wollte das gleiche Prinzip verwenden, um beim Schweben eine Farbtransformation von unten nach oben zu erreichen. Aber es scheint, dass meine Denkweise falsch ist, ich habe ihre Höhe auf 0 gesetzt und sie absolut am Ende positioniert. Beim Schweben beträgt die Höhe immer noch 60 Pixel.

Vor zwei Tagen habe ich endlich das Buch „CSS3 Professional Development Guide“ gelesen. Obwohl einige Eigenschaften von CSS3 nicht standardisiert wurden, ist der Effekt wirklich großartig. Es verwischt auch die Grenzen zwischen CSS und JS. Sie müssen nicht mehr ihr eigenes Ding machen, aber es ist immer noch viel bequemer für Designer.

Studenten, die CSS lernen müssen, achten bitte auf die chinesische PHP-Website CSS-Video-Tutorial. Viele CSS-Online-Video-Tutorials können kostenlos angesehen werden!       

Das obige ist der detaillierte Inhalt vonErstellen Sie eine einfache und schöne Navigationsleiste mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!