div+cssシミュレーション京東ナビゲーション

1199 ワード

<html>
	<head>
		<title>
			 
		</title>
		<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		#menu{
		}
		#menu li{
			float: left;
			list-style: none;
		}
		#menu li a{
			text-decoration: none;
			font-size: 15px;
			font-weight: 700;
			color: white;
			display: block;
			height: 40px;
			line-height: 40px;
			background: #E43c3e;
			padding-left:15px;
			padding-right:15px;
			text-align: center;
		}
		#menu li a:hover{
			background-color:A40000;
		}
		</style>
	</head>
	<body>
		<ul id="menu">
			<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>
			<li><a href=""> </a></li>

		</ul>

	</body>

</html>

次の点に注意してください.
1.liでfloat、liフローティングなので
2.liのaラベルをブロック状にして高さを設定し、中文字の高さはaラベルの高さに等しい
3.aはliで設定した属性を継承するが、一部の属性は継承できないため、aの属性を完全にカスタマイズするのが望ましい