一道有意思的CSS布局题目

前几天在某人的博客上看见了一个关于CSS布局的问题觉得挺有意思的.拿来分享一下.

先看图:

H1标签在搜索引擎里面是非常重要的所以他要求要使h1标题显示在html代码的最前端.

有兴趣的可以去试试.点击图片下载原文件自己切图试试.

查看我做出来的最终效果

下面是我具体实现的方法:

1.首先,xhtml结构上为了实现要求我把content放在了container的最前面

<div id="wrapper">
<div id="container">
<h1>&lt;h1&gt;iVane Hwang is a nice man~&lt;/h1&gt;</h1>
<div class="post">
COLORADO SPRINGS, Colo. - As Barack Obama broadens his outreach to evangelical
voters, one of the movement’s biggest names, James Dobson, accuses the likely
Democratic presidential nominee of distorting the Bible and pushing a “fruitcake
interpretation” of the Constitution.
<h2>ADVERTISEMENT</h2>
The criticism, to be aired Tuesday on Dobson’s Focus on the Family radio program,
comes shortly after an Obama aide suggested a meeting at the organization’s
headquarters here, said Tom Minnery, senior vice president for government and public
policy at Focus on the Family.
The conservative Christian group provided The Associated Press with an advance copy
of the pre-taped radio segment, which runs 18 minutes and highlights excerpts of a
speech Obama gave in June 2006 to the liberal Christian group Call to Renewal. Obama
mentions Dobson in the speech.</div>
<div id="nav"><a href="#">Home</a> | <a href="#">Contact Us</a></div>
</div>
<div id="sidebar">
<ul id="menu">
<li><a href="#">Homepage</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
</ul>
</div>
</div>
2.其次,在CSS布局方面.我用到了定位属性,将原本放在containter最下面的menu定位到了它的最上面.这样即实现了他的要求又不影响页面的设计要求.
另外还用到了负margin,目的是为了使content高于container而不影响其中的sidebar和背景的平铺.
CSS代码:
*{ margin:0; padding:0;}
body{ font:12px Verdana, Geneva, sans-serif; text-align:center; background:#530000 url(wrapper-bg.jpg) repeat-x;}
#wrapper{ width:778px; margin:0 auto; text-align:left; margin-top:160px; background:#beaf95; }
#container{ width:616px; float:right; padding-top:191px; margin-top:-120px; border:1px solid #030302; border-bottom:0; background:#ece2d0 url(headerimg.jpg) no-repeat; position:relative; }
#container h1{ height:60px; line-height:60px; background:#fff4e1; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; padding-left:15px; color:#9a0000;}
#container p{ text-indent:2em; line-height:200%;}
#container h1,#container h2,#container p{ padding-left:15px;}
#container h2{ font-size:13px;}
#container p{ padding:15px;}
#sidebar{ width:159px; background:#beaf95; float:right; border-top:1px solid #ac957f;}
#menu{ list-style:none;}
#menu li{ height:29px; line-height:29px;background:url(lia.gif) repeat-x; border-bottom:1px solid #ac957f; overflow:hidden;}
#menu li a{ font-weight:bold; font-size:14px; background:url(list-bg.gif) left center no-repeat; padding-left:15px; margin-left:5px; text-decoration:none; font:"Microsoft Sans Serif", "New York", serif; color:#690000;}
#menu li a:hover,#nav a:hover{ text-decoration:underline;}
#footer{ font-weight:bold; width:778px; clear:both; text-align:center; height:40px; margin:0 auto; line-height:40px; color:#fff;}
#nav{ height:28px; line-height:28px; width:616px; color:#fff; text-align:right; border-bottom:1px solid #030302; background:url(nav-bg.gif) repeat-x; position:absolute; left:0; top:0;}
#nav a{ color:#fff; text-decoration:none; margin-right:10px;}
.clear{ clear:both;}