定位？浮动？自适应？
作者：林小志 来源：林小志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
投稿猜你喜欢
python循环定时中断执行某一段程序的实例
2023-10-09 22:11:20
Python多线程获取返回值代码实例
2023-03-25 17:42:27
MySQL切分查询用法分析
2024-01-28 01:11:35
Go 语言的 :=的具体使用
2024-05-10 13:58:56
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2022-06-14 07:43:33
numpy中实现ndarray数组返回符合特定条件的索引方法
2023-04-21 06:21:53
pytorch随机采样操作SubsetRandomSampler()
2021-05-22 18:00:46
数字人组件反写[asp组件开发实例3]
2009-06-09 13:16:00
asp如何验证字符串是否包含有效字符？
2009-11-08 19:02:00
Python自动发送邮件的方法实例总结
2023-05-21 02:53:42
Bootstrap基本样式学习笔记之表单(3)
2024-06-05 09:11:39
PHP substr()函数参数解释及用法讲解
2023-11-24 11:47:56
python实现csdn全部博文下载并转PDF
2023-08-13 05:26:41
python函数超时自动退出的实操方法
2021-09-11 07:07:45
13个最常用的Python深度学习库介绍
2023-08-04 03:08:09
Golang使用Gin框架实现http分块传输
2024-02-08 20:15:18
Python单元测试的9个技巧技巧
2023-03-22 09:58:57
SQLServer2008新实例远程数据库链接问题(sp_addlinkedserver)
2024-01-19 23:44:22
使用Python来开发微信功能
2023-09-25 00:05:28
python判断文件夹内是否存在指定后缀文件的实例
2021-12-27 23:05:19