So erstellen Sie eine Navigationsleiste über HTML-HTML-Tutorial-php.cn

So erstellen Sie eine Navigationsleiste über HTML

迷茫

Freigeben： 2017-03-25 15:26:46

Original

6255 Leute haben es durchsucht

Heute werde ich Ihnen zeigen, wie Sie eine einfache Navigationsleiste erstellen:

Schritt 1: Führen Sie das CSS-Stylesheet ein, erstellen Sie eine neue Ebene mit der ID „nav“ und verwenden Sie es

, -Tags, um den fertigen Effekt zu erstellen.

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

Nach dem Login kopieren

Der zweite Schritt besteht darin, den CSS-Stil festzulegen:

1. Legen Sie die Attribute von nav fest

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

Nach dem Login kopieren

Der Anzeigeeffekt ist wie folgt :

2. Löschen Sie den Punkt vor dem

#nav ul{
	list-style: none;
}

Nach dem Login kopieren

3. Tag enthalten unter

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

Nach dem Login kopieren

4. Stellen Sie den Mouseover-Effekt ein

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

Nach dem Login kopieren

Endgültiger Effekt:

Vollständiger HTML-Codeteil:

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

Nach dem Login kopieren

Vervollständigen Sie den Codeteil im CSS-Stil:

*{
	margin: 0;
	padding: 0;
}
#nav{
	width: 500px;
	height: 50px;
	border: 1px solid red;
	margin: 30px;
}

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

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Navigationsleiste über HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!