您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> DIV+CSS专栏 >> 文章正文
div+css布局技术漫谈           ★★★
div+css布局技术漫谈
作者:龙犊整理  文章来源:天极网  点击数:  更新时间:2007-12-26 18:00:11 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:
 

三列

单行三列

绝对定位

以下是引用片段:
#left { position: absolute; top: 0px;  left: 0px; width: 120px;  }
#middle {margin: 0px 190px 0px 190px; }
#right {position: absolute;top: 0px; right: 0px;  width: 120px;}

float定位
xhtml:

以下是引用片段:
<div id="wrap">
    <div id="column">
    <div id="column1">这里是第一列</div>
    <div id="column2">这里是第二列</div>
    <div class="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/
    </div>
    <div id="column3">这里是第三列</div>
    <div class="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/
</div>

CSS:

以下是引用片段:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;} 

float定位二
xhtml

以下是引用片段:
    <div id="center" class="column">
        <h1>This is the main content.</h1>
    </div>
    <div id="left" class="column">
        <h2>This is the left sidebar.</h2>
    </div>
    <div id="right" class="column">
        <h2>This is the right sidebar.</h2>
    </div>

CSS
以下是引用片段:
body {
    margin: 0;
    padding-left: 200px;    /* LC fullwidth */
    padding-right: 190px;   /* RC fullwidth + CC padding */
    min-width: 200px;       /* LC fullwidth + CC padding */
    }

.column {
    position: relative;
    float: left;
    }

#center {
    width: 100%;
    }

#left {
    width: 200px;           /* LC width */
    right: 200px;           /* LC fullwidth */
    margin-left: -100%;
    }

#right {
    width: 190px;           /* RC width */
    margin-right: -100%;
    }


    /*** IE Fix ***/
* html #left {
    left: 190px;            /* RC fullwidth */
    }

上一页  [1] [2] [3] 下一页

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:Rainsion    责任编辑:Rainsion  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章: 没有了
  • 最新文章
    相关文章
    Dreamweaver 入门:创建基于表格的页面布局
    详解CSS布局设计块元素和内联元素
    CSS实现避免页面布局被大尺寸图片和长字符串
    如何用DIV+CSS来构建内嵌页面跟随按钮变化
    垂直三栏布局拥有相同高度的方法
    经验之谈!解读Div+CSS网页制作误区
    div+css实现圆角边框
    学习WEB标准制作网页之Page Layout 网页布局
    基于XHTML标准DIV+CSS布局对SEO的影响
    使用有趣的自定义标记布局页面
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门