网页布局技术详解-优快云博客

网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”。

1. 表格布局

2. 框架布局

Frameset（框架级）和iframe：

（1）Frameset 框架级，Frameset 框架页里不能有body 。例：

<frameset rows="30%,70%" >    <!--把页面分成两行，第一行占30%，第二行占70%-->
        <frame src="top.htm" noresize/>    <!--第一行显示top.htm文件的内容。noresize是防止用户拖动边框线自己调整布局，下同-->
        <frameset cols="20%,80%">    <!--frameset嵌套，把第二行分成两列，第一列占20%，第二列占80%-->
            <frame src="left.htm" noresize/>    <!--第二行第一列显示left.htm文件的内容-->
            <frame src="main.htm" noresize/>    <!--第二行第二列显示main.htm文件的内容-->
        </frameset>
    </frameset>

（2）iframe ：在网页内再嵌入一个页面。例：

<iframe src="iframe.htm" name="0" width="0" height="0"></iframe>

3. DIV+CSS布局

不要使用<table>进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真实表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。

Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。

布局最重要的一个属性就是float，查看此文档的描述。

初学不用研究太深，能读懂、会用就可以。下面有很多案例。

可供参考的一些学习网站：

http://www.blueidea.com/tech/site/2006/3574.asp

Div+CSS布局：http://www.aa25.cn/layout/

Div+CSS布局： 960.gs （这是一个国外的网站）

========================================

案例，网页右下角的广告图片（假冒QQ消息）：

IE6不支持position: fixed;

使用资源 51xp.gif

    <style type="text/css">
        #jb51_yxj
        {
            position: fixed;
            background-color: #fff;
            width: 250px;
            bottom: 0px;
            overflow: hidden;
            right: 0px;
      }
    </style>

页面中插入多个回车，以出现滚动条：

    <div id="jb51_yxj">
        <img src="51xp.gif" />
    </div>

案例：顶部菜单：

    <style type="text/css">
        #nav ul
        {
        	list-style-type:none;
        }
        #nav ul li
        {
        	float:left;
        	margin:0 10px;
        }
        .menuSeparator {width:1px;height:18px;background:Red}
    </style>
<div id="nav">
    <ul>
        <li><a href="http://www.itcast.cn">传智播客</a></li>
        <li class="menuSeparator"></li>
        <li><a href="http://www.rupeng.com">如鹏网</a></li>
        <li class="menuSeparator"></li>
        <li><a href="http://www.google.com">谷歌</a></li>
    </ul>
</div>

li中的项横排显示是float:left;的作用，margin:0 10px;的作用是不让各个项之间紧挨着。项之间的分割竖线是用一个宽度为1，高度为18的红色背景的li做的。