射雕的"双飞翼布局"

符合"渐进增强"标准+栅格理论，同时兼容性也不错，几乎没有到用hack

<!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>
<style type="text/css">
*{padding:0;margin:0}
div.page{background:#efefef;width:950px;margin:0 auto;}
div.main{width:100%;background:pink;float:left}
div.sub{width:230px;float:left;margin-left:-950px;background:lightblue;}
div.extra{width:190px;float:left;margin-left:-190px;background:lightgreen;}
div.main .main_container{margin:0 200px 0 240px;background:#f6c}
</style>
</head>
<body>
<div class="page">
    <div class="main">
        <div class="main_container" >main container<br/>asdfa</div>
    </div>
    <div class="sub">sub columne</div>
    <div class="extra">extra column</div>    
</div>
</body>
</html>

时间： 2024-09-08 12:19:39

射雕的"双飞翼布局"的相关文章

《射雕ZERO》首创虚拟现实端游体验游戏产业进入可穿戴设备时代

喜欢网游的玩家都知道,强大的游戏道具,会让游戏角色的力量值.法力值.敏捷值得到大幅提升.如果有一天,游戏中的道具变成了现实生活中的可穿戴设备,并可对游戏进行非线上的互联操作,那么,作为玩家的你,对这种极具未来感的设计,又会有着怎样的想象?如今,这种原本在网络小说中才能出现的科幻体验,即将变成现实.<射雕ZERO>首创虚拟现实端游体验 游戏产业进入可穿戴设备时代喜欢网游的玩家都知道,强大的游戏道具,会让游戏角色的力量值.法力值.敏捷值得到大幅提升.如果有一天,游戏中的道具变成了现实生活中的可穿戴

林志颖点赞“射雕ZERO鞋”粉丝呼吁再续武侠情缘

今日,"科技咖"林志颖率先晒出一款最新可穿戴设备--"射雕ZERO鞋",并在微博中自爆最爱玩网游,有了射雕ZERO鞋,可以健康玩游戏.对此, 网友纷纷留言,呼吁不老男神演绎<射雕英雄传>,再续武侠情缘.[射雕ZERO鞋改变游戏体验方式 林志颖倡导健康网游 ]据悉,林志颖微博中提到的"射雕ZERO鞋",正是近来备受游戏业关注的,国内首款与端游实时互动的可穿戴外设.玩家通过这款可穿戴设备,将第一次实现与传统游戏不同的体验方式.在微博中,林

射雕江湖菜公司：防止诈骗四大秘技

1.主动推荐人气商品 主动推荐人气商品是一个经营上的小技巧,主要是可缩短客人选择产品的时间,也可以帮助客人点到满意的食物,而且如果有主力推荐产品,相对会降低食物的料理时间,因为统一处理总是比个别处理方便及省时些,但却并能因为是统一处理就漫不经心,现在客人的嘴巴很刁,吃到令他不满意的瑕疵品,就不会再来第二次了.2.适当的装潢和设备投资同样的品牌.同样的食物,如果店面干净又清爽,客人自然会比较愿意上门,这几乎是人人知道的道理,但是在经营时大部分的经营者都会只看到收入而忘了回馈客人,其实如果生财设备的

林志颖抢先体验《射雕ZERO》可穿戴设备

站在玻璃窗前,一脚支地,一脚轻点,眼望远方--这个场景,对于熟悉林志颖的粉丝是陌生的.9月22日,林志颖在他的微博上晒出一张颇具行为艺术的照片,让众粉丝禁不住想问一句:男神,你看到了什么?[恶搞iphone6 林志颖或许对苹果热情减退]众所周知,从苹果iPhone4S开始,林志颖先后于苹果新一代iPhone正式发布之前晒过iPhone5.iPhone5c/5s的照片.不过今年的林志颖却一改往常,不但晒照时间输给了王思聪,而且还恶搞了iphone6一把,晒出六个小苹果之后,才漫不经心地晒出了iPh

关于自适应布局的处理(利用浮动和margin负边距实现)

自适应布局在实际应用中越来越普遍了,今天分享几个自适应布局的demo,主要是浮动圣杯布局(也叫双飞翼布局,主要是利用浮动和margin负边距实现的),没有介绍绝对定位布局,都是我想,你能明白我下面的几个例子,绝对定位布局也是非常的简单了. PS:圣杯布局有个好处,符合前端开发中渐进增强的理念,因为浏览器解析是从DOM的上至下,圣杯布局能够把页面中重要的内容section放到DOM前面先解析,而次要的aside内容则放在DOM后面后解析. 下面的例子能够解决实际应用中绝大多数的自适应布局问题了,有

等高分栏布局小结

阅读目录 1. 方法一:万能的flex 2. 方法二:使用table或者伪table 3. 方法三:使用绝对定位 4. 方法四:借助边框,背景实现假等高 5. 结束语 上一篇文章<圣杯布局小结>总结了几种常见的分栏布局方法,这几个方法都可以实现多栏页面下,所有栏的高度可动态变化,某一栏宽度自适应的布局效果,能满足工作中很多布局需求.后来我在搜集更多关于分栏布局的文章时,发现了一个新的问题,这个问题在前面那篇文章中也有朋友在评论里跟我提起,就是如何在实现分栏布局的同时保证每栏的高度相同.我发现这

CSS：谈谈栅格布局

检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box-sizing: border-box; } html, body{ width: 100%; height: 100%; margin: 0; } .container{ width:100%; } .container:after{ display: table; content:"."

css+div三栏布局 左右固定宽 中间自适应

三栏布局,这是一种相对比较常见的页面布局,这里提供2种实现方法: 方法1: 使用最新的css3伸缩盒布局属性,可轻松实现(三栏等高,默认就是三栏等高哟!)  代码如下 复制代码 <style>     .header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color:     #bbb;text-align: center;} .main{} .content{overflow: hidden;

CSS经典三栏布局方案

1. float布局 最简单的三栏布局就是利用float进行布局.首先来绘制左.右栏: <style> .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; height: 200px; background-color: yellow; } </style> <div class="contain