我不明白你的设计。我看到以下问题。
你有一个div id="container"
但它唯一包含的是div id="fotter"
. 所有其余元素都在容器 div 的“外部”。
你有div id="logo"
一个风格为margin-top: 1%; margin-left: 25%;
. 这个中心怎么会呢?
你div id="slider"
有position: relative; left: 26%; top: 3em;
这意味着它被从左边推了 26%,从原始位置的顶部推了 3em,并在原来的位置留下了一个“间隙”。
你h1
有一个margin: left; 300px;
. 你到底想要它在哪里?
下面h1
你有a
包含div
元素的元素吗?这就像内联元素中的块级元素。完全错误。这些所有a
元素都应该在 a 内div
,并且div
应该定位。
你div#footer
在里面
div#container
。有
一种div#foooter
风格,position: absolute
而div#container
没有一种position: relative
。这会导致两件事。折叠因为div#container
它没有任何内容并且div#fotter
相对于浏览器窗口定位。
你有 3 div#recent
。ID 必须是唯一的。这是不允许的。使用类 instaed。
我将给出一个关于如何解决这个问题的框架。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<a href="http://rescuedthemovie.com"><img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" /> </a>
</div>
<div id="nav">
<ul>
<li><a href="http://rescuedthemovie.com/home.html">home</a></li>
<li><a href="http://rescuedthemovie.com/synopsis.html">synpsis</a></li>
<li><a href="http://rescuedthemovie.com/videos.html">videos</a></li>
<li><a href="http://rescuedthemovie.com/blog.html">blog</a></li>
<li><a href="http://rescuedthemovie.com/partner.html">partner</a></li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
<a href="http://rescuedthemovie.com/blog">My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...</a>
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
<a href="http://rescuedthemovie.com/blog">I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...</a>
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
<a href="http://rescuedthemovie.com/blog">When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...</a>
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html>
CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}
这个offcouse是一个固定宽度的布局。但是您可以轻松地将其更改为流体或 estalic。这是它的样子
