跟我一起重写JAVA WEB网络硬盘( 2 )

 

 

2013-2-26 20:40:05

 

刚闲着没事又把header和nav写了一下,出了一点小问题:

.想把logo做成<h1>标签的形式方便搜索引擎搜索,但是header的背景却遮盖住了logo,用浮动也只能显示一半,不知道怎么解决!

 

2013-2-26 21:29:47(重新编辑)

 

晕...发上后看到heigth怎么没标亮?结果一看打错了 - -应该是height..现在就可以用<h1>了

跟我一起重写JAVA WEB网络硬盘( 2 )_第1张图片

 

basic.css

* {
	margin:0;
	padding:0;
}
a {
	text-decoration:none;
}
ul {
	list-style-type:none;
}
body {
	width:860px;
	margin:0 auto;
	font-size:12px;
	background:#ccc;
}
#header {
	height:80px;
	margin:0 auto;
	background:#4380DB url(../images/logo.jpg) no-repeat;
}

#header h1{
	background:;
	width:199px;
	heigth:100px;
	font-size:100%;

}

#header ul li {
	width:60px;
	float:right;
}
#header ul li a{
	color:#fff;
}
#header ul li a:hover{
	font-weight:bold;
}
#nav {
	height:35px;
	background:#eee;
}
#nav ul{
	background:#eee;
}
#nav ul li {
	float:left;
		width:144px;
	height:35px;
}
#nav ul li a{
	text-align:center;
	font-size:150%;
	font-weight:bolder;
	font-family:Microsoft YaHei;
	line-height:35px; 
	width:140px;
	height:35px;
	display:inline-block;
	color:#4380DB;
}
#nav ul li.lastnav{
	width:140px;
}
#nav ul li a:hover{
	background:#4380DB;
	color:#eee;
}
#adv {
	width:550px;
	height:420px;
	background:pink;
	float:left;
}
#login {
	width:300px;
	height:420px;
	background:blue;
	float:right;
}
#share {
	width:550px;
	height:420px;
	background:green;
	float:left;
}
#rank {
	width:300px;
	height:420px;
	background:orange;
	float:right;
}
#footer {
	height:80px;
	background:black;
	clear:both;
}
	


 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CQUT网络硬盘</title>
	<link rel="stylesheet" type="text/css" href="styles/basic.css" />
	<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
</head>

<body>
	<div id="header">
		<ul>
			<li><a href="#">关于本站</a></li>
			<li><a href="#">帮助文档</a></li>
			<li><a href="#">网站首页</a></li>		
		</ul>
	</div>
	<div 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>		
			<li class="lastnav"><a href="#">####</a></li>		
		</ul>
	</div>
 	<div id="adv">adv</div>
	<div id="login">login</div>
 	<div id="share">share</div>
 	<div id="rank">rank</div>
	<div id="footer">footer</div>
</body>
</html>


 

 

你可能感兴趣的:(跟我一起重写JAVA WEB网络硬盘( 2 ))