定位？浮动？自适应？
作者：林小志 来源：林小志blog 时间：2008-06-30 14:20:00
额……首先呢说说这个标题吧，实在不知道叫什么好，因为这个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>
..........
不论你h1前面有多少个div或者其他标签，但<h1>iVane Hwang is a nice man~</h1>这个带内容的一定要显示在最前面。
2、左右两边的高度是等高的
从他的这个要求来看，主要考虑的问题还是在页面结构上，以及等高的问题。
源文件：
作者站点下载：
http://www.linxz.cn/blog2/attachments/month_0806/i2008624161511.png
（PNG格式，请用FW打开）
本站下载：<a href="https://img.aspxhome.com/file/UploadPic/20086/30/2008630142538623.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>
样式：
程序代码
* {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;}
标签：定位,浮动,css
0
投稿猜你喜欢
新兴XML处理方法VTD-XML介绍
2008-09-04 14:42:00
如何做一个优秀的设计？
2009-02-04 15:38:00
asp利用dictionary创建二维数组
2009-02-02 09:54:00
SQLServer 游标简介与使用说明
2009-07-02 13:53:00
Favicon图标小常识
2010-04-01 12:01:00
CSS实现HTML元素透明的那些事
2010-02-01 12:34:00
区别Javascript中的Null与Undefined
2007-12-13 20:24:00
SQLSERVER查询所有数据库名，表名，和字段名的语句
2012-01-29 18:07:44
MYSQL教程:数据列类型与查询效率
2009-02-27 15:37:00
MYSQL主从库不同步故障一例解决方法
2010-06-09 19:12:00
ORACLE数据库事务隔离级别介绍
2012-10-07 10:43:36
Oracle数据库的备份及恢复策略研究
2010-07-16 12:54:00
CSS控制字体效果的思考
2011-06-14 09:44:02
ASP将Excel数据导入到SQLServer的实现代码
2011-03-10 10:38:00
详解css定位与定位应用
2007-05-11 16:52:00
如何把数据库记录显示到列表框里去？
2009-11-06 13:48:00
Access与Flash的结合应用
2008-11-20 16:44:00
怎样修改 MySQL数据库中的密码
2008-11-27 15:35:00
MySQL 语言参考
2007-11-21 20:37:00
页面链接方式的统一性
2008-03-24 17:02:00