额……首先呢说说这个标题吧，实在不知道叫什么好，因为这个demo呢其实一个艾文王今天中午给丢给我一个图。他说这个是一个面试题，给我看看。
这样的一个图，当时我拿到手的时候只是认为这个很简单啊，不过大家不要跟一样急，下面还有艾文王的一些补充要求。
1、<h1>iVane Hwang is a nice man~</h1> 这个一定要在显示内容的第一条。比如
<body>
<div class="box">
<div class="header">
<h1>iVane Hwang is a nice man~</h1>
..........
<div class="box">
<div class="header">
<h1>iVane Hwang is a nice man~</h1>
..........
不论你h1前面有多少个div或者其他标签，但<h1>iVane Hwang is a nice man~</h1>这个带内容的一定要显示在最前面。
2、左右两边的高度是等高的
从他的这个要求来看，主要考虑的问题还是在页面结构上，以及等高的问题。
源文件：
作者站点下载：
http://www.linxz.cn/blog2/attachments/month_0806/i2008624161511.png
（PNG格式，请用FW打开）
本站下载：i2008624161511.rar （583.12 KB）
看到这里如果大家自己有兴趣做的可以先暂时停止往下看了，因为我要放我的结构以及代码了，你再看下去恐怕会影响到你的思路。毕竟每个人的想法不一样，只要效果实现就OK了。
1、大概思路：h1通过定位实现，等高用背景模拟
结果：失败！
2、大概思路：h1放在内容中，不必理会，等高用负边距实现
结果：成功！
结构：
程序代码
<div id="wrapper">
<!-- header end -->
<div id="innerBox">
<div class="mainBox">
<h1>iVane Hwang is a nice man~</h1>
<p>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.</p>
<h2>ADVERTISEMENT</h2>
<p>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.</p>
<p>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.</p>
<div class="banner"><img src="images/banner.jpg" alt="banner" /></div>
</div>
<div class="sider">
<div class="logo">LOGO</div>
<div class="crumb"><a href="#" title="">Home</a> <span>|</span> <a href="#" title="">Contac Us</a></div>
<h3>menu</h3>
<ul>
<li><a href="#" title="menu1">menu1</a></li>
<li><a href="#" title="menu2">menu2</a></li>
<li><a href="#" title="menu3">menu3</a></li>
<li><a href="#" title="menu4">menu4</a></li>
<li><a href="#" title="menu5">menu5</a></li>
<li><a href="#" title="menu6">menu6</a></li>
</ul>
</div>
</div>
<!-- mainBox end -->
<div id="footer">
<p class="copyright">Copyright iVane Hwang © 2008 </p>
</div>
<!-- footer end -->
</div>
<!-- header end -->
<div id="innerBox">
<div class="mainBox">
<h1>iVane Hwang is a nice man~</h1>
<p>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.</p>
<h2>ADVERTISEMENT</h2>
<p>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.</p>
<p>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.</p>
<div class="banner"><img src="images/banner.jpg" alt="banner" /></div>
</div>
<div class="sider">
<div class="logo">LOGO</div>
<div class="crumb"><a href="#" title="">Home</a> <span>|</span> <a href="#" title="">Contac Us</a></div>
<h3>menu</h3>
<ul>
<li><a href="#" title="menu1">menu1</a></li>
<li><a href="#" title="menu2">menu2</a></li>
<li><a href="#" title="menu3">menu3</a></li>
<li><a href="#" title="menu4">menu4</a></li>
<li><a href="#" title="menu5">menu5</a></li>
<li><a href="#" title="menu6">menu6</a></li>
</ul>
</div>
</div>
<!-- mainBox end -->
<div id="footer">
<p class="copyright">Copyright iVane Hwang © 2008 </p>
</div>
<!-- footer end -->
</div>
样式：
程序代码
* {margin:0;padding:0;}
body {font:normal 12px/1.5em Verdana,Lucida, Arial, Helvetica, sans-serif;background:#670000 url(images/bg.gif) 0 0 repeat-x;}
#wrapper {position:absolute;top:40px;left:50%;width:780px;height:auto;min-height:200px !important;margin-left:-390px;z-index:2;}
.crumb {position:absolute;top:0;right:0;width:610px;height:28px;padding-right:8px;line-height:28px;text-align:right;color:#FFFFFF;border:1px solid #010000;background:url(images/crumb_bg.gif) 0 0 repeat-x;z-index:5;}
.crumb a {color:#FFFFFF;}
#innerBox {width:780px;height:auto;overflow:hidden;zoom:1;margin-top:36px;}
#innerBox h1 {width:618px;height:60px;line-height:60px;text-indent:20px;font-size:20px;font-weight:bold;font-family:Georgia;color:#9A0000;background:#FFF4E1;z-index:6;}
.mainBox {float:right;width:618px;height:auto;overflow:hidden;zoom:1;padding:155px 0 100px;border:1px solid #010000;border-bottom-color:#D1C8B8;background:#ECE2D0;}
.banner {position:absolute;top:29px;right:0;border:1px solid #010000;border-bottom:0;}
.mainBox p {width:auto;height:auto;overflow:hidden;zoom:1;padding:15px 15px 0;font-size:14px;color:#333333;line-height:1.5;}
.mainBox h2 {width:auto;height:30px;line-height:30px;text-indent:15px;margin-top:15px;}
.sider {float:left;width:160px;margin-bottom:-2000px;padding-bottom:2000px;margin-top:85px;background:#BEAF95;}
.logo {position:absolute;top:40px;left:0;width:160px;height:30px;line-height:30px;text-align:center;font-size:18px;font-weight:bold;}
.sider h3 {display:none;}
.sider ul {width:160px;height:auto;overflow:hidden;zoom:1;border-top:1px solid #D1C8B8}
.sider ul li {width:160px;height:30px;line-height:30px;text-indent:20px;background:url(images/menu_bg.gif) 0 0 no-repeat;}
.sider ul li a {font-size:14px;font-weight:bold;text-decoration:none;color:#690000;}
.sider ul li a:hover {color:#FFFFFF;}
#footer {width:780px;height:30px;line-height:30px;text-align:center;}
.copyright {color:#ECE2D0;}
body {font:normal 12px/1.5em Verdana,Lucida, Arial, Helvetica, sans-serif;background:#670000 url(images/bg.gif) 0 0 repeat-x;}
#wrapper {position:absolute;top:40px;left:50%;width:780px;height:auto;min-height:200px !important;margin-left:-390px;z-index:2;}
.crumb {position:absolute;top:0;right:0;width:610px;height:28px;padding-right:8px;line-height:28px;text-align:right;color:#FFFFFF;border:1px solid #010000;background:url(images/crumb_bg.gif) 0 0 repeat-x;z-index:5;}
.crumb a {color:#FFFFFF;}
#innerBox {width:780px;height:auto;overflow:hidden;zoom:1;margin-top:36px;}
#innerBox h1 {width:618px;height:60px;line-height:60px;text-indent:20px;font-size:20px;font-weight:bold;font-family:Georgia;color:#9A0000;background:#FFF4E1;z-index:6;}
.mainBox {float:right;width:618px;height:auto;overflow:hidden;zoom:1;padding:155px 0 100px;border:1px solid #010000;border-bottom-color:#D1C8B8;background:#ECE2D0;}
.banner {position:absolute;top:29px;right:0;border:1px solid #010000;border-bottom:0;}
.mainBox p {width:auto;height:auto;overflow:hidden;zoom:1;padding:15px 15px 0;font-size:14px;color:#333333;line-height:1.5;}
.mainBox h2 {width:auto;height:30px;line-height:30px;text-indent:15px;margin-top:15px;}
.sider {float:left;width:160px;margin-bottom:-2000px;padding-bottom:2000px;margin-top:85px;background:#BEAF95;}
.logo {position:absolute;top:40px;left:0;width:160px;height:30px;line-height:30px;text-align:center;font-size:18px;font-weight:bold;}
.sider h3 {display:none;}
.sider ul {width:160px;height:auto;overflow:hidden;zoom:1;border-top:1px solid #D1C8B8}
.sider ul li {width:160px;height:30px;line-height:30px;text-indent:20px;background:url(images/menu_bg.gif) 0 0 no-repeat;}
.sider ul li a {font-size:14px;font-weight:bold;text-decoration:none;color:#690000;}
.sider ul li a:hover {color:#FFFFFF;}
#footer {width:780px;height:30px;line-height:30px;text-align:center;}
.copyright {color:#ECE2D0;}
站长工具
相关文章
请稍等，评论加载中...