代码改变世界

导航菜单的收集（持续跟新）

2011-07-26 18:30  Rollen Holt  阅读(610)  评论(0)  编辑  收藏  举报

　　最近会收集一些网站页面的导航菜单。因为最近联系网页的布局，感觉css比jQuery难，哈哈。可能因人而异吧。之前把css的全部属性看了几遍，但是也仅限于看了几遍在自己刚开始写网站的页面的时候，居然不会用，呵呵。于是去互联网上下载了一写模板，前期先熟读人家的代码，然后自己改动着看一些，呵呵。最后自己实现他。感觉收获很大，对于css，本人建议，大家还是动手吧，因为这些属性，看了用处不大。

　　好了，不扯了。

1):效果如下

实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
	<head>
		<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
		<title>Home</title>
	</head>
	<body>
		<div id="layout">
			<div id="header">
				<h1 id="logo"><a href="#" title="Company">mint<span class="light">idea</span><span class="leaf"> </span></a></h1>
				<hr />
				<div id="nav">
					<ul>
						<li>
							<a href="#">Home
							<br />
							<span>Main page</span></a>
						</li>
						<li>
							<a href="#">Who
							<br />
							<span>Our team</span></a>
						</li>
						<li>
							<a href="#">What
							<br />
							<span>Our services</span></a>
						</li>
						<li>
							<a href="#">Portfolio
							<br />
							<span>Our woks</span></a>
						</li>
						<li>
							<a href="#">Prices
							<br />
							<span>How much it costs</span></a>
						</li>
						<li>
							<a href="#">Contact
							<br />
							<span>Write us!</span></a>
						</li>
					</ul>
					<hr />
				</div>
				<hr />
				<br />
				<hr />
			
			</div>
		</div>
	</body>
</html>

　　css代码：

body {
	background: #192d40 url(images/bg.jpg) repeat-x;  /*实现渐变效果*/
	line-height: 1.2em;
	width: 900px;
	height: 750px;
	color: #e8eaeb;
}
a {
	color: #e5e5e5;
}

#logo {
	width: 780px;
	height: 80px;
	text-align: left;
	color: #cccccc;
	position: relative;
	margin: 0;
	line-height: 100px;
}
#logo a {
	text-decoration: none;
}
.light {
	color: #2b4866;
}
.leaf {
	position: absolute;
	background: url(images/leaf.gif) 45px 5px no-repeat;
	width: 120px;
	height: 80px;
	left: 0;
	top: 10px;
}
h1 {
	margin: 15px 0 10px 0;
	font-weight: bold;
}
#nav {
	position: relative;
	z-index: 2;
	border: 1px solid #1a2735;
	border-right: none;
	border-left: none;
	padding: 7px 0;
}
#nav li {
	list-style-type: none;
	display: inline;
	padding: 0;
	margin: 0;
}
#nav ul li a {
	text-decoration: none;
	font-size: 19px;
	font-weight: bold;
	float: left;
	display: block;
	padding: 7px 25px 7px 7px;
	line-height: 18px;
}
#nav ul li span {
	font-size: 11px;
	font-weight: normal;
	color: #67707a;
}