CSS双飞翼布局实例

最新推荐文章于 2024-09-06 09:38:49 发布
最新推荐文章于 2024-09-06 09:38:49 发布
阅读量436 收藏
点赞数
分类专栏： div+css 文章标签： css html 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style type="text/css">
    body {background-color: #ffffff; font-size:14px; padding:0; margin:0;}
    .header,
    .footer{ 
		padding: 20px 3px;
        background: #cccccc;
        text-align: center;
    }
    .sub,
    .main,
    .extra{ 
        float: left;
        min-height: 130px;
    }
    .sub{
        margin-left: -100%;
        width: 200px;
        background:#44fa44;
    }
    .extra{
        margin-left: -220px;
        width: 220px;
        background:#00bcd4;
    }
    .main{ 
        width: 100%;
    }
    .main-inner{ 
        margin-left: 200px;
        margin-right: 220px;
        min-height: 130px;
        background:#03a9f4;
        word-break: break-all;
    }
    .footer{ 
        clear: both;
    }
</style>
</head>

<body>
<div class="header">header</div>
    <div class="main">
    	<div class="main-inner">main</div>
    </div> 
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="footer">footer</div>
</body>
</html>

 

夏末_阳光依然耀眼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
双飞翼 html 布局,css实现双飞翼布局的四种方法（附代码）
weixin_30394975的博客
06-11 1045
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。圣杯布局、双飞翼布局效果图从效果图来看圣杯布局、双飞翼布局效果是一样一样的。圣杯布局、双飞翼布局就是左右两侧宽度固定，中间内容宽度自适应，即100%圣杯布局*{margin: 0;padding: 0;box-sizing: border-box;}.clearfi...
圣杯布局和双飞翼布局的原理探究
请叫我二狗哥
11-25 2216
浮动布局并不是再是流行的布局方式，不过基于浮动的经典布局还是经常出现在前端面试中，圣杯布局和双飞翼布局就是其中常考核的知识点。圣杯布局和双飞翼布局都是前端中三列设计布局方式，要求主要中间内容优先渲染，左右内容宽度固定，中间主要内容宽度自适应排布。圣杯布局和双飞翼布局都没有使用绝对定位，而是应用浮动、负外边距以及相对定位这几个核心知识点来实现。 圣杯布局 圣杯布局是让左右固定栏和中间自适应的主内容栏处于同一容器包裹中，容器（#container）设置padding-left、padding-right值，其
双飞翼布局实例
weixin_33728268的博客
07-25 95
<!DOCTYPEhtml> <htmllang="en"> <head> <meta charset="UTF-8"> <style> #center_div,#left_div,#right_div{ text-align: center; } ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
weixin_30267697的博客
01-27 180
今天聊聊一个经典的布局实例： 实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了，这玩意儿通过双飞翼布局就能轻松实现。不过，还请容我在双飞翼之外，循序渐进地介绍一下我们可以如何实现一个三列布局。 1. 首先，使用浮动布局来实现一下 See the Pen float-three-column by xal82179270...
圣杯布局（相对布局）和双飞翼布局这两种经典布局的实现案例
z-ying-jian的博客
01-29 628
圣杯布局 针对下列DOM结构实现水平三列布局，.center盒子在中间 &amp;amp;lt;div class=&amp;quot;container&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;main&amp;quot;&amp;amp;gt;我是中间的盒子&amp;amp;lt;/div&amp;amp;gt; &amp
经典布局方案之双飞翼布局
weixin_42565663的博客
07-04 222
 今天主要学习了一些经典的方案布局方法：1、上中下一栏式2、左右两栏式3、左右两栏加页眉页脚4、左中右三栏5、左中右三栏页眉页脚这里主要想总结一下左中右三栏的 双飞翼布局。先贴上代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Do
css经典布局——双飞翼布局
热门推荐
越努力，越幸运！
01-18 3万+
圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局。 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分...
手机端html三栏式布局,CSS经典三栏布局方案
weixin_36463292的博客
06-28 483
1. float布局最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：.left {float: left;width: 100px;height: 200px;background-color: red;}.right {float: right;width: 100px;height: 200px;background-color: yellow;}此时可以得到左右两栏分布：这里...
CSS之布局篇
litcangosh的博客
10-28 142
1.Flex布局(弹性盒模型) Flex 布局教程：语法篇(阮一峰) Flex 布局教程：实例篇(阮一峰) 2.Grid网格布局 Grid网格布局教程(阮一峰) 3.圣杯布局和双飞翼布局 圣杯布局 html代码中 main部分首先要放在cotent的最前部分。然后是left,right 将三者都 float:left , 再加上一个position:relative (因为相对定位后面会...
CSS布局
weixin_42597880的博客
08-26 297
1.流动布局（元素随着浏览器扩展调整到填满整个浏览器为止） 块元素垂直从头到尾流动，内联元素在水平方向一个接一个的流动。 当浏览器并排放置两个内联元素时：元素之间有足够的空间，该空间等于两个元素边界之和。 比如左边图片1的边界为10像素，右边图片2的边界为20像素，两个元素之间就会有30像素的空间。 当浏览器并列放置两个块元素时：两个块元素共同的边界重叠在一起，重叠的高度是最大边界的值。...
圣杯布局和双飞翼布局（前端面试必看）
sinat_27240687的博客
03-28 2272
爱生活，不爱黑眼圈 稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别
CSS经典布局之双飞燕布局
yuan5801551的博客
08-13 2041
CSS经典布局之双飞翼 布局 双飞翼就是两边不变中间伸缩，看淘宝就知道了 第一种实现方法:flex布局 css代码 .content{ display: flex; } .content-left{ flex: 0 0 200px; width: 200px; hei...
CSS行元素的截断样式box-decoration-break属性，有点儿意思！
流绪@微梦
09-03 546
在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。常用行内元素：a、span、i、em、strong、img等。
css radius
时间不说谎
09-03 638
在 css 中，radius 属性用于设置元素角落的圆角半径，以创建更美观的现代化外观。属性值包含绝对长度或百分比，或继承父元素的半径。指定一个值会影响所有四个角，指定两个值会分别影响左上角和右下角、右上角和左下角的半径。Radius 是 CSS 中的一个属性，它允许开发者对元素的角落进行圆角处理。它为元素创建圆角边框，使元素看起来更加美观和现代。radius 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
css spacing设置间距
时间不说谎
09-03 299
将在每个单词之间增加30像素的间距。这个属性可以增加或减少字与字之间的空白，并且允许负值，即减少字与字之间的间距。将在每个字母之间增加10像素的间距。这个属性会影响一个单词中每个字母之间的间距，使得单词中的字母之间也有空白。属性用于设置单词之间的间距。它只影响英文单词之间的间距，对中文无效。属性用于设置字母之间的间距，适用于中文和英文。
VitePress 自定义 CSS 指南
最新发布
软考鸭
09-06 407
首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在目录下创建一个名为custom.css的文件。接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是。import './custom.css' // 引入自定义 CSS。
【vue css】css字体设置渐变色
weixin_41747256的博客
09-04 310
css字体设置渐变色
CSS双飞翼布局详解与实现方法
总结来说，无论是圣杯布局还是双飞翼布局，它们都是通过CSS的浮动和定位技巧来实现一个灵活的、响应式的两栏布局结构，适合在不同屏幕尺寸下保持良好的视觉效果。开发者可以根据实际需求选择其中一种布局方法，理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值