css简单导航布局

原创 2018-10-31 23:32:11 213
摘要:<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>导航</title> <style> *{ margin: 0; padding: 0;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title>导航</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				text-decoration: none;
				font-size:14px;
			}
			.clear{
				clear: both;
			}
			.box{
				width: 100%;
				background: #ccc;
			}
			.main{
				width: 1200px;
				height: 40px;
				margin: 0 auto;
				
			}
			.main_left li,.main_right li{
				list-style: none;
				float: left;
				width: 90px;
				line-height: 40px;
				text-align: center;
			}
			.main_left li:hover{
				background: chocolate;
			}
			.main_right{
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="main">
				<div class="main_left">
				<ul>
				<li><a href="#">导航1</a></li>
				<li><a href="#">导航2</a></li>
				<li><a href="#">导航3</a></li>
				<li><a href="#">导航4</a></li>
			</ul>
			</div>
			<div class="main_right">
				<ul>
				<li><a href="#">java</a></li>
				<li><a href="#">php</a></li>
				<li><a href="#">.net</a></li>
				<li><a href="#">JavaScript</a></li>
			</ul>
			</div>
			</div>
			<div class="clear"></div>
		</div>
	</body>
</html>


发布手记

热门词条