master

分支 (2)

管理

管理

master

dev_test

web-test
/
用HTML ul、li标签创建横向导航菜单.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.menu {
				height: 30px;
				line-height: 30px;
				font-size: 18px;
				background-color: #34352c;
				border-radius: 5px;
				font-weight: bold;
			}

			div.menu ul {
				list-style: none;
				margin: 0px;
				padding: 0px;
			}

			div.menu ul li {
				float: left;
				width: 100px;
			}

			div.menu ul li a,
			div.menu ul li a:visited {
				color: #dde4ef;
				text-decoration: none;
				white-space: nowrap;
				margin-left: 20px;
				text-align: center;
			}

			div.menu ul li a:hover {
				color: #b22222;
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<ul>
				<li><a href="javascript:void(0);">菜单样式</a></li>
				<li><a href="javascript:void(0);">菜单样式</a></li>
				<li><a href="javascript:void(0);">菜单样式</a></li>
				<li><a href="javascript:void(0);">菜单样式</a></li>
				<li><a href="javascript:void(0);">菜单样式</a></li>
				<li><a href="javascript:void(0);">菜单样式</a></li>
				<li><a href="javascript:void(0);">菜单样式</a></li>
				<li><a href="javascript:void(0);">菜单样式</a></li>
			</ul>
		</div>
	</body>
</html>