关于一个利用relative的简单布局，firefox上出现一点问题，暂且不明原因
firefox的
chrome的
代码记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>anime</title>
</head>
<style>
div#all
{
margin: 0 auto;
width: 1024px;
height: 700px;
}
div.header
{
width: 100%;
height: 80px;
background-color: beige;
}
div.sidebar
{
width: 15%;
height: 460px;
background-color: chocolate;
}
div#nav ul
{
width: 85%;
margin: 0 auto;
list-style-type: none;
position: relative;
top: -460px;
left: 57px;
}
div#nav ul li
{
float: left;
}
div#nav ul li a
{
width:145px;
height: 28px;
background:cornflowerblue;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
div#nav ul li a:hover
{
width: 145px;
height: 26px;
line-height: 28px;
color: cornflowerblue;
background: white;
}
div.content
{
width: 85%;
height: 432px;
background-color: darkseagreen;
position: relative;
top: -432px;
left: 154px;
}
div.footer
{
width: 100%;
height: 50px;
background-color: burlywood;
position: relative;
top: -432px;
</style>
<body>
<div id="all">
<div class="header"></div>
<div class="sidebar"></div>
<div id="nav">
<ul class="nav-content">
<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><a href="#">下载</a></li>
</ul></div>
<div class="content">
<div class="content-1"></div>
<div class="content-2"></div>
<div class="content-3"></div></div>
<div class="footer"></div>
</div>
</body>
</html>
时间： 2024-10-10 07:25:15