Div+CSS速成第十天:div+css网页标准布局实例二（第5页）-远方教程

八、底部和细节调整
底部比较简单，灰色背景部分可以用h类标签完成，也可以用dl、dt、dd来完成，再或者其它标签也可以，其它的就不再赘述。
底部完成后，最后的步骤是要做一些细节调整，比如该对齐的地方是否对齐，图片的alt属性是否都加上了，在各种浏览器下是否显示一样等等。至此整个前台页面算制作完成了下面的任务就是该用程序来读取数据库里的内容了，来完成整个站点的制作。
浏览器兼容问题一直是让新手朋友头疼的地方，其实只要掌握几个常用浏览器的特性后，不需要过多的css hack就可以解决问题的。本例中使用的css hack大致有：
zoom=1：用来解决自适应高度时IE6的兼容问题（这个属性通不过w3c认证）；
display:inline：解决IE6双倍边距bug问题；
*：在样式名和属性中间加*，这个常用在需要垂直居中时使用；
IE6 3像素bug：在布局时采用左右都浮动的办法避免了这个问题；
另外还有一些做法也是为了解决兼容问题而写的，比如固定高度，就是因为各浏览器之间解释差异，为了使显示效果尽可能一样而采用的折中办法。总之遵循一点，css hack能少用尽量少用，这样便于以后维护。
完成这样一个布局方法有多种，本例中所讲解的方法，只是本人的观点，不一定是最好的方法，希望大家通过本本例的学习能做到举一反三，掌握更多的方法。
本侧是左宽右窄型的布局，如果想把两个调换个位置，太简单不过了，只需把#main和#side的向左向右浮动调换一下就实现，这是表格布局所不及的。所以不管#main和#side在html代码中是谁先谁后，而让它们显示在哪里完全是css来完成的。这里建议#main的代码写在#side前边，因为这要在页面加载的过程中会先加载main部分，用户首先看到的是主要内容，搜索引擎收录时也会先找到main部分的内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页</title>
<link href="http://www.aa25.cn/upload/2010-09/21/css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
    <div id="logo"><img src="http://www.aa25.cn/upload/2010-09/21/images/logo.gif" alt="企业名称" width="181" height="45" /></div>
    <div id="search">
      <form id="form1" name="form1" method="post" action="">
        搜索产品
        <input class="inp_srh" type="text" name="textfield" id="textfield" />
        <input class="btn_srh" type="submit" name="button" id="button" value="查询" />
      </form>
    </div>
</div>
<div class="clearfloat"></div>
<div id="nav">
   <div id="nav_l"></div>
    <div id="nav_r"></div>
    <div class="nav_main">
      <ul>
        <li><a href="#"><span>首页</span></a></li>
        <li><a href="#" id="nav_current"><span>企业新闻</span></a></li>
        <li><a href="#"><span>企业简介</span></a></li>
        <li><a href="#"><span>产品展厅</span></a></li>
        <li><a href="#"><span>企业历史</span></a></li>
        <li><a href="#"><span>招商加盟</span></a></li>
        <li><a href="#"><span>网上下单</span></a></li>
        <li><a href="#"><span>联系我们</span></a></li>
      </ul>
    </div>
    <div class="nav_son">
     <ul>
        <li><a href="#">企业动态</a></li>
        <li><a href="#">领导活动</a></li>
        <li><a href="#">产品资讯</a></li>
        <li><a href="#">通知公告</a></li>
      </ul>
    </div>
</div>
<div class="clearfloat"></div>
<div id="maincontent">
    <div id="main">
      <div id="index_top">
        <div id="pic">
     <script language='javascript' type="text/javascript">
            linkarr = new Array();
            picarr = new Array();
            textarr = new Array();
            var swf_width=269;
            var swf_height=210;
            var files = "http://www.aa25.cn/upload/2010-09/21/images/pic.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic1.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic2.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic3.jpg";
            var links = "#|#|#|#";
            var texts = "";
            for(i=1;i<picarr.length;i++){
              if(files=="") files = picarr[i];
              else files += "|"+picarr[i];
            }
            for(i=1;i<linkarr.length;i++){
              if(links=="") links = linkarr[i];
              else links += "|"+linkarr[i];
            }
            for(i=1;i<textarr.length;i++){
              if(texts=="") texts = textarr[i];
              else texts += "|"+textarr[i];
            }
            document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
            document.write('<param name="movie" value="http://www.aa25.cn/upload/2010-09/21/images/indexpic.swf"><param name="quality" value="high">');
            document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
            document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');
            document.write('<embed src="http://www.aa25.cn/upload/2010-09/21/images/indexpic.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
          </script>
          <div id="login"><span><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/btn_login1.gif" alt="个人用户登录" width="131" height="39" /></a></span><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/btn_login.gif" alt="经销商登录" width="131" height="39" /></a></div>
        </div>
        <div id="hot_news">
          <div id="news_top">
            <h1>苹果iphone 4手机将于9月25日在中国上市</h1>
            <p>日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4，并为iPhone4用户量身定制了合约计划。</p>
          </div>
          <div id="news_list">
            <ul>
              <li><span>9-22</span><a href="#">纯CSS实现三列DIV等高布局</a></li>
              <li><span>9-22</span><a href="#">HTML元素的ID和Name属性的区别</a></li>
              <li><span>9-22</span><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
              <li><span>9-22</span><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
              <li><span>9-22</span><a href="#">javascript为FF设置首页</a></li>
              <li><span>9-22</span><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="index_pic">
        <h2><span></span></h2>
        <ul>
         <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
          <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
          <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
          <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
          <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
          <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
          <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
          <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
          <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
          <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>
        </ul>
      </div>
      <div id="index_box">
        <div class="box">
          <h2><a class="more" href="#">更多..</a><span>企业历史</span></h2>
          <div class="box_con">
            <dl>
              <dt><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic5.gif" alt="多角度对比苹果iPod系列真机" width="91" height="70" /></a></dt>
              <dd><a href="#"><strong>多角度对比苹果iPod系列真机</strong></a>
              导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播…</dd>
            </dl>
            <ul>
             <li><a href="#">纯CSS实现三列DIV等高布局</a></li>
              <li><a href="#">HTML元素的ID和Name属性的区别</a></li>
              <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
              <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
              <li><a href="#">javascript为FF设置首页</a></li>
              <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
              <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
            </ul>
          </div>
        </div>
        <div class="box box1">
          <h2><a class="more" href="#">更多..</a><span>企业历史</span></h2>
          <div class="box_con">
            <dl>
              <dt><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic5.gif" alt="多角度对比苹果iPod系列真机" width="91" height="70" /></a></dt>
              <dd><a href="#"><strong>多角度对比苹果iPod系列真机</strong></a>
              导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播…</dd>
            </dl>
            <ul>
             <li><a href="#">纯CSS实现三列DIV等高布局</a></li>
              <li><a href="#">HTML元素的ID和Name属性的区别</a></li>
              <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
              <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
              <li><a href="#">javascript为FF设置首页</a></li>
              <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
              <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="side">
      <div class="side_box">
        <h2><strong>产品</strong>导购</h2>
        <div class="side_con product">
          <ul>
            <li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
            <li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
            <li class="product3"><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
          </ul>
        </div>
      </div>
      <div class="side_box">
        <h2><strong>使用</strong>问答</h2>
        <div class="side_con ask">
          <dl>
            <dt><a href="#">最新出的这个产品如何使用？</a></dt>
            <dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
          </dl>
          <dl>
            <dt><a href="#">最新出的这个产品如何使用？</a></dt>
            <dd>该产品采用全新的技术，较上一...</dd>
          </dl>
          <dl>
            <dt><a href="#">最新出的这个产品如何使用？</a></dt>
            <dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...</dd>
          </dl>
          <dl>
            <dt><a href="#">最新出的这个产品如何使用？</a></dt>
            <dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...</dd>
          </dl>
          <dl>
            <dt><a href="#">最新出的这个产品如何使用？</a></dt>
            <dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
          </dl>
        </div>
      </div>
    <div class="side_box">
        <h2><strong>联系</strong>我们</h2>
        <div class="side_con contact"><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/tel.gif" alt="联系我们" width="222" height="112" /></a></div>
      </div>
    </div>
</div>
<div class="clearfloat"></div>
<div id="footer">
    <dl>
    <dt><a href="#">关于我们</a>　||　<a href="#">产品目录</a>　||　<a href="#">联系我们</a>　||　<a href="#">友情链接</a>　||　<a href="#">反馈问题</a>　||　<a href="#">广告合作</a></dt>
      <dd>Copyright © 2007 - 2010 aa25.cn   All Rights Reserved<br />
          标准之路版权所有京ICP备10007159号</dd>
    </dl>
</div>
</div>
</body>
</html>

提示：可以先修改部分代码后再运行
点击此处下载实例源代码及psd源文件

第1页第2页第3页第4页 第5页 第6页