位置：首页>> 网络编程>> 网页设计>> 定位？浮动？自适应？

定位？浮动？自适应？

作者：林小志　来源：林小志blog　发布时间：2008-06-30 14:20:00　

标签：定位,浮动,css

额……首先呢说说这个标题吧，实在不知道叫什么好，因为这个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">
    
    <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>
    
    <div id="footer">
        <p class="copyright">Copyright iVane Hwang © 2008 </p>
    </div>
    
</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;}

投稿

定位？浮动？自适应？

猜你喜欢