"双飞翼布局"

最新推荐文章于 2016-12-21 16:52:21 发布
最新推荐文章于 2016-12-21 16:52:21 发布
阅读量213 收藏
点赞数
分类专栏： Html CSS 文章标签： 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhenhanhong_tony/article/details/52698500
版权
Html 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
CSS
12 篇文章 0 订阅
订阅专栏

双飞翼布局主要解决俩问题：1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{


}
.header{
background: orange;
/*height: 150px;*/
}
.article{
background: green;
/*height: 300px;*/
overflow: hidden;
/* padding-left: 150px;*/
/* padding-right: 100px;*/
}
.footer{
background: yellow;
/*height: 300px;*/
}
.article .left{
background: blue;
float: left;
/* opacity: 0.2;*/
width: 150px;
/*height: 16px;*/
margin-left: -100%;
margin-bottom: -9999px;
padding-bottom: 9999px;
/* position: relative;
left: -150px;*/


}
.article .right{
background: #0cc;
/* margin-right: */
float: right;
width: 100px;
/* height: 16px;*/
margin-bottom: -9999px;
padding-bottom: 9999px;
/* opacity: 0.2;*/
margin-left:-100px; 
/* position: relative;
right: -100px;*/
}
.article .middle{
background: red;
/* height: 16px;*/
width: 100%;
float: left;
margin-bottom: -9999px;
padding-bottom: 9999px;


}
.inner{
margin-left: 150px;
margin-right: 100px;


}


</style>
</head>
<body>
<div class="header">头</div>
<div class="article">
<div class="middle">

<div class="inner">

<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
<p>我是中间 </p>
</div>
</div>
<div class="left">
<p>左</p>
<p>左 </p>
<p>左 </p>
<p>左 </p>
<p>左 </p>
<p>左 </p>
<p>左 </p>
<p>左 </p>
<p>左 </p>

</div>

<div class="right">
右
</div>
</div>
<div class="footer">脚</div>


</body>
</html>

zhh_tony
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css多种方式实现双飞翼布局
09-22
主要介绍了css多种方式实现双飞翼布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
双飞翼布局和圣杯布局
01-08
双飞翼布局和圣杯布局  网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。  首先三...
如何做出双飞翼布局与圣杯布局
01-08
说起网站布局，之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样，把各种需要的组件一摆，然后设个宽高给个定位不就...而今天我们的主题，“双飞翼布局”与“圣杯布局”就是一个两边固定，中间宽度自适应，并
圣杯双飞翼布局.zip
05-04
圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
解决.m3u8格式视频文件在chrome等浏览器中不能播放的问题
热门推荐
zhh_Tony
11-13 7万+
从图中可以看出hls协议在pc端只有在safari中支持，可以使用百度云的播放器 Web SDK v2.1.4解决这个问题 https://cloud.baidu.com/doc/MCT/Web-SDK.html#.7A.5E.66.9B.47.86.6E.45.3D.90.F2.9F.C1.2E.DC.16
当页面内容不够的时候，怎么让footer一直底部显示?
zhh_Tony
09-28 7887
Document html,body {   margin: 0;   padding:0;   height: 100%; } #container {   min-height:100%;   height: auto !important;   height: 100%; /*IE6不识别min-height*/   position: relative; } #
Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动
zhh_Tony
11-14 3075
Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器 - 凤凰涅磐360yi 时间 2013-08-22 11:28:00  博客园精华区 原文  http://www.cnblogs.com/suchso/p/jquery-small-plug-OWLCarousel-touch-mobilebrowser.html 主题 jQuery HTML
三大开发模式的介绍（MVC、MVVM、MVP）
zhh_Tony
09-30 2025
一.MVC:Model - View - Controller 特点：各部分循环传递 1.view接收到用户请求，发送指令到Controller 2.Controller完成业务逻辑之后，要求Model执行相应的操作 3.Model将数据发送给View，用户得到反馈 二.MVP:Model -View -Presenter 特点：各部分的通讯是互相传递的 vi
自定义li列表左侧的小黑点
zhh_Tony
09-29 1342
ul li:before{     content: "";     display: inline-block;     width: 3px;     height: 3px;     background-color: #333;     border-radius: 50%;     margin-right: 5px;     vertical-align: middle
body{font-size: 62.5%;}这种写法的原因
zhh_Tony
11-10 950
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px*6
缓冲动画效果
zhh_Tony
09-29 500
js动画效果练习1 *{ margin: 0; padding: 0; } #scroll{ margin-top: 100px; width: 200px; height: 200px; position: absolute; left: -190px; background: red; } .tip{ width: 30px; height: 60px
下拉加载更多DEMO(js实现)
zhh_Tony
11-08 483
项目的一个前端页面展示已购买商品时，要求能下拉加载更多。花了点时间研究这个功能，以前没做过。     首先需要给div加scroll事件，监听滚动条滚动动作。那何时触发加载动作呢？当滚动条滚到底的时候。如何判断滚动条滚到底呢？     当滚动条的高度加上滚动条到div顶部的高度等于div的可滚动高度时，说明滚动条到底部了。公式如下。 [javascript] vi
<!DOCTYPE html>很重要
zhh_Tony
12-21 319
噩梦开始的源头：之前写html或者jsp页面，从来不注意doctype的声明，也不太明白doctype的作用。直到最近碰到了一个非常奇葩的bug：某一个页面在IE7和8，Chrome，ff等下正常，但是在IE9下显示有问题，我就开始找啊找，各种调试，各种log，终于在httpWatch里边找到了答案：DOCTYPE未声明。于是我给页面添加了,果然奏效了。   下面我就尽可能简洁扼要的说
关于HTML页面之间的传值
zhh_Tony
11-08 273
HTML页面之间的传值，需要借助于jQuery。 例:从Add页面新增数据，传入到List页面中。 Add页面的传值：   [javascript] view plain copy     "http://localhost:2474/Scripts/jquery-1.4.1.js" type="text/javascript">       "
链式运动
zhh_Tony
09-29 257
CSS： #li1{ width: 200px; height: 100px; border: 4px solid gray; filter: alpha(opacity:30); opacity: 0.3; background: red; list-style-type: none; } HTML: 链式运动 window.onl
选项卡切换
zhh_Tony
09-29 179
选项卡         /* CSS样式制作 */          * {         margin: 0;         padding: 0;         font: normal 12px "微软雅黑";         color: #000000;     }          ul {         list-style-type: none;
倒计时
zhh_Tony
09-29 177
Document window.onload = function(){ showTime(); //时间差 //START // var curtime = new Date(); // var endtime = new Date("2016,8,10"); // var interalue = Math.ceil((endtime.getTime() - curti
DOM操作
zhh_Tony
09-29 173
Document li{ background: red; margin-top: 20px; width: 200px; height: 100px; list-style-type: none; filter: alpha(opacity:30); opacity: 0.3; border: 1px solid black; } window.onload =
圣杯布局 双飞翼布局
最新发布
09-11
而双飞翼布局与圣杯布局类似，也是左右两栏固定宽度，中间栏自适应宽度，但它在DOM结构上有所不同。 圣杯布局的DOM结构如下： ``` <div class="main">Main Content <div class="left">Left Sidebar ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值