双飞翼布局

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量31 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ndjjddj/article/details/130494926
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

双飞翼布局

二、浮动

1.引入库

代码如下（示例）：

* {
            padding: 0;
            margin: 0;
        }

        /* header {
            display: flex;
        } */

        aside {
            float: left;
            width: 200px;
            height: 100vh;
            background-color: aqua;
        }

        nav {
            float: left;
            /* 计算属性calc() 运算符左右必须是空格*/
            width: calc(100% - 400px);
            /* flex: 1; */
            height: 100vh;
            background-color: antiquewhite;
        }

        section {
            float: left;
            width: 200px;
            height: 100vh;
            background-color: aqua;
        }

<header>
        <aside>1</aside>
        <nav>2</nav>
        <section>3</section>
    </header>

二、定位

1.引入库

代码如下（示例）：

* {
            padding: 0;
            margin: 0;
        }

        header {
            /* display: flex; */
            position: relative;
        }

        aside {
            position: absolute;
            left: 0;
            top: 0;
            /* float: left; */
            width: 200px;
            height: 100vh;
            background-color: aqua;
        }

        nav {
            padding-left: 200px;
            /* float: left; */
            /* 计算属性calc() 运算符左右必须是空格*/
            /* width: calc(100% - 400px); */
            /* flex: 1; */
            height: 100vh;
            background-color: antiquewhite;
        }

        section {
            position: absolute;
            right: 0;
            top: 0;
            /* float: left; */
            width: 200px;
            height: 100vh;
            background-color: aqua;
        }

<body>
    <header>
        <aside>1</aside>
        <nav>2</nav>
        <section>3</section>
    </header>
</body>

二、弹性布局

1.引入库

代码如下（示例）：

 * {
            padding: 0;
            margin: 0;
        }

        header {
            display: flex;
        }

        aside {
            width: 200px;
            height: 100vh;
            background-color: aqua;
        }

        nav {
            flex: 1;
            height: 100vh;
            background-color: antiquewhite;
        }

        section {
            width: 200px;
            height: 100vh;
            background-color: aqua;
        }

 <header>
        <aside>1</aside>
        <nav>2</nav>
        <section>3</section>
    </header>
悟空.........
关注
双飞翼 html 布局,css实现双飞翼布局的四种方法（附代码）
weixin_30394975的博客
06-11 1050
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。圣杯布局、双飞翼布局效果图从效果图来看圣杯布局、双飞翼布局效果是一样一样的。圣杯布局、双飞翼布局就是左右两侧宽度固定，中间内容宽度自适应，即100%圣杯布局*{margin: 0;padding: 0;box-sizing: border-box;}.clearfi...
如何做出双飞翼布局与圣杯布局
01-08
双飞翼布局与圣杯布局是网页开发中两种常见的三栏布局方式，它们的主要目标是实现两侧栏宽度固定，中间栏宽度自适应，并且在页面加载时优先展示主要内容，提高用户体验。这两种布局方法都考虑了不同分辨率设备上的...
CSS双飞翼布局
weixin_57334661的博客
06-01 455
比如：写一个左中右布局占满全屏，其中左、右两块固定宽 200px，中间自适应，要求先加载中间块。双飞翼布局是一种经典的CSS布局模式，主要用于实现左右两列固定宽度，中间列自适应的布局。左右 200px 中间自适应。
2.3双飞翼布局
u010502101的博客
10-11 330
圣杯布局的改进版 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; padd
实现双飞翼布局
CSDN_156的博客
12-06 899
说到圣杯布局和双飞翼布局，始终都是面试的高频考点，问题方式也大同小异，比如，实现一个左右固定，中间自适应的布局；实现一个中间部分优先加载的布局…… 现如今，很多web端的应用，他们的布局方式都是圣杯布局和双飞翼布局，既然用到的这么多，那么，双飞翼布局是如何实现的呢？带着这个问题，咱们一起把他说道说道 双飞翼布局的实现方式一、（position+margin+float） 首先我们从上面简介部分得知，双飞翼布局是一个两边固定，中间自适应的布局，并且中间部分...
双飞翼布局详解
dyb2440492276的博客
03-21 6265
作用： 圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 原理： 双飞翼布局为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。 css代码： .header,.footer{ height: 200px; width: 100%; background-color: #0000FF; }
CSS 双飞翼布局
Hillbox
09-26 417
【代码】CSS 双飞翼布局。
圣杯布局与双飞翼布局
JackDan9
04-28 316
圣杯布局与双飞翼布局
什么是双飞翼布局
a242424242424的博客
04-18 120
1、双飞翼布局是将所有div都嵌入到一个共同的父元素中，通过margin外边距来实现三栏布局。2、圣杯布局是将左右两边元素通过相对定位，中间元素通过内边距实现三栏布局。双飞翼和圣杯布局一样是实现三栏布局，两侧宽度固定，中间宽度自适应。
前端页面布局之双飞翼布局
weixin_46372074的博客
07-13 1621
双飞翼布局分为 左，中，右三个部分。 左右宽度固定，中间部分自适应三个部分通过按顺序向左浮动实现。 效果: 设置父元素相对布局，用来实现内部元素的绝对布局。 效果： 将注释内的内容加上： 作用是 1.盒模型的尺寸（宽高）是包含content、padding、border全部在内的尺寸； 2.将所有元素的外边距设置为0 效果： 效果：...............
双飞翼布局和圣杯布局
01-08
双飞翼布局和圣杯布局  网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。  首先三...
css多种方式实现双飞翼布局
09-22
双飞翼布局是一种常用的网页布局方式，主要用于实现两侧固定宽度，中间自适应宽度的布局效果。该布局在视觉上呈现为中间主体区域能够占据剩余的大部分空间，而两侧则是两个相对较小的固定宽度的侧边栏。这样的布局...
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...
CSS画出三角形的做法
mingangel的博客
10-01 387
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 382
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
【CSS】position
最新发布
小秀的博客
10-02 319
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
CSS 中的@media print 是干什么用的？
读心悦
09-29 238
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
CSS中的font-variation-settings：探索字体的可变性
艾恩小灰灰的博客
09-30 452
可变字体允许字体文件包含一系列的设计轴（Design Axes），如宽度（Width）、倾斜度（Slant）、粗细（Weight）等。通过调整这些轴的值，可以实现从一种样式到另一种样式的平滑过渡，而无需加载多个独立的字体文件。为设计师提供了前所未有的灵活性，在保持页面加载性能的同时，能够创造出丰富多样的视觉效果。随着更多浏览器的支持和可变字体的普及，这一功能将在未来成为Web设计中的重要工具之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值