2013-2-26 20:40:05
刚闲着没事又把header和nav写了一下,出了一点小问题:
.想把logo做成<h1>标签的形式方便搜索引擎搜索,但是header的背景却遮盖住了logo,用浮动也只能显示一半,不知道怎么解决!
2013-2-26 21:29:47(重新编辑)
晕...发上后看到heigth怎么没标亮?结果一看打错了 - -应该是height..现在就可以用<h1>了
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>