0
這裏在我的html和css中。我的問題是，如果我不應用頂部邊距divs彼此重疊和div不填充瀏覽器窗口如果位置不absolute.Any幫助表示讚賞。 PS我是一個新手在HTML和CSS，並認爲stackoverflow會幫助我發展。 編輯： http://jsfiddle.net/reyaqmc7/ JS小提琴代碼，以幫助您評估。謝謝！我的div是重疊的
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- The world wide web project. Explaining the people the use of world wide web -->
<title>The world wide web</title>
</head>
<body>
<header>
<div id="maincontainer">
<div id="logo"><img src="logopng.png" class="logo" /></div>
<div ID="nav">
<nav>
<ul>
<li><a href="">What</a></li>
<li><a href="">How</a></li>
<li><a href="">When</a></li>
<li><a href="">Who</a></li>
<li><a href="awesome">Awesome!</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- The navigation -->
<div id="slider"></div>
<section id="page-section what">
<div class="containers"></div>
</section>
<section id="page-section what">
<div class="containers"></div>
</section>
<section id="page-section what">
<div class="containers"></div>
</section>
<section id="page-section what">
<div class="containers"></div>
</section>
<footer></footer>
</body>
</html>
CSS
@font-face{
font-family: klavika; src:url(klavika.woff);
}
div#nav{
height: 5em;
width: 70%;
top: 0;
right:0;
background-color: rgba(242, 242, 242, 1);
position: absolute;
}
/*ul{list-style: none; float: right;}
li{
display: inline-block;
height: 3em;
width: 5em;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-weight: 400px;
font-size: 25px;
color: white;
font-style: bold;
}
div#slider{
height: 20em;
width: 100%;
left: 0;
right: 0;
top: 5em;
background-color: rgba(220, 220, 220, 1);
position: absolute;
}
li a{
text-decoration: none;
color: rgba(150,150,150,1);
}
li:hover{
border-bottom: 3px solid;
border-bottom-color: rgba(0, 216, 255, 1);}*/
nav a{
background-color: rgba(242, 242, 242, 1);
border-bottom: 3px transparent;
font-family: klavika;
display: block;
padding: 2em 2em 1.65em 1.5em;
text-decoration: none;
color: rgba(150,150,150,50);
-webkit-transition:border-bottom 0.3s ease, background-color 0.4s ease;
transition: border-bottom 0.3s ease, background-color 0.4s ease;
}
nav a:hover{
border-bottom: 3px solid;
border-bottom-color: rgba(0, 148, 255, 1);
color: rgba(82, 212, 214, 1);
/*background-color: rgba(150,150,150,50);*/
}
nav ul{
list-style: none;
float: right;
margin: 0;
}
li{
display: inline-block;
height: 5em;
}
div#logo{
float: left;
height: 5em;
width: 8em;
margin-left: 5em;
opacity: .3;
-webkit-transition:opacity 1s ease;
}
div#logo:hover{opacity: 100}
img.logo{max-width: 100%; max-height: 100%; opacity: 10;}
div#maincontainer{
height: 5em;
width: 100%;
top: 0;
left: 0;
right: 0;
background-color: rgba(242, 242, 242, 1);
position: absolute;
}
div#slider{
background-color:red;
width: 100%;
position: absolute;
right: 0;
left: 0;
height: 15em;
margin-top: 7em;
}
完成！ http://jsfiddle.net/reyaqmc7/ – 2014-11-14 20:58:45