负margin-双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        .sub{
            float: left;
            width: 190px;
            margin-left: -100%;
        }
        .main{
            float:left;
            width:100%;
        }
        .extra{
            float:left;
            width:230px;
            margin-left: -230px;
        }
        .main-wrap{
            margin:0 230px 0 190px;
        }
    </style>
</head>
<body>
    <div id="page">
        <div id="hd">Header</div>
        <div id="bd">
            <div class="main">
                <div class="main-wrap">
                    <p>Main</p>
                </div>
            </div>
            <div class="sub">
                <p>Sub</p>
            </div>
            <div class="extra">
                <p>Extra</p>
            </div>
        </div>
        <div id="fd">
            <p>footer</p>
        </div>
    </div>
</body>
</html>

优点，优先加载mian区域的内容，中间区域可根据屏幕尺寸变化自动伸缩，左右两栏则固定布局。

时间： 2024-10-12 20:15:01

负margin-双飞翼布局的相关文章

负margin在布局中的运用（*****************************************************************）

一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>左右栏宽度固定,中间栏宽度自适应</title> <style> body{ margin: 0; padding: 0; min-width:600px; color: #fff; font-weight:

现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负margin技术进行实现. 负margin理论: 在说明什么是负margin之前,你得清楚margin是个啥么玩意,如果还不清楚可以先阅读本人的前一篇文章<不要告诉我你懂margin>,预补下知识,回头再读这篇文章,相信俩篇文章都能给你带来不少的收获. 为了形象.易懂的解释负margin,我们将引入W3C

标签页-导航负margin

/* 标签页菜单 */div.bs-docs-example { position: relative; width: 600px; margin: 15px auto; padding: 39px 19px 14px; background-color: white; border: 1px solid #DDD; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} div.bs-docs-exam

我知道你不知道的负Margin

负边距、三栏布局（圣杯布局、双飞翼布局）

首先来了解下一.负边距在让元素产生偏移时和position: relative有什么区别? position:relative产生偏移时,他原来的位置不会脱离文档流的,即还占用原来的空间,但负边距产生偏移时它原来的位置并不占用空间: 例如下面的代码 Document *{ margin: 0px; padding: 0px; } .up,.down,.middle{ background-color: red; height: 100px; width: 100px; } .negative-

CSS之固定定位，绝对定位+负边距，双飞翼布局，属性选择器，伪类选择器补，状态伪类选择器，相邻全部兄弟选择器，取非选择器，em与rem，变形效果

固定定位: 绝对定位+负边距 !!!!!!!!!!!!!!!!!!!超重要负边距双飞翼布局属性选择器伪类选择器补状态伪类选择器相邻全部兄弟选择器取非选择器 em与rem 变形效果固定定位: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { height: 1200px; backgr

负margin在页面布局中的应用

负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这里说的负值主要指的是负margin. 关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 本文不讲原理,主要展示几个应用. 一.左右列固定,中间列自适应布局此例适用于左右栏宽度固定,中间栏宽度自适应的布局.由于网页的主体部分一般在中间,很多网页都

关于负margin在页面中布局的应用

本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况,本来不是要用负值,但突然发现负值也能达到我要的效果,随后百度了一下,才发现了大牛的好文章,转载至此,算是学习一个经验,进行记录,同样也给分享给没看到的同学. 以下是正文负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这里说的

双飞翼布局的改造 box-sizing和margin负值的应用

box-sizing + margin负值升级双飞翼布局一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100px; padding: 10px; border: 5px solid red; margin: 20px; } .content-size{ box-sizing: content-box; } .border-size{ box-sizing: border-box; } context-siz