Html+CSS三栏式伸缩布局

最新推荐文章于 2023-02-01 12:40:00 发布
最新推荐文章于 2023-02-01 12:40:00 发布
阅读量5.5k 收藏 1
点赞数
分类专栏： Html/CSS/JS 文章标签： html css 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haeasringnar/article/details/78863160
版权

三栏式伸缩布局的Html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrapper{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
                display:flex;-webkit-flex-flow:row wrap;font-weight:bold;text-align:center}
            .wrapper > *{padding:10px;flex:1 100%}
            .header{background:tomato}
            .footer{background:lightgreen}
            .main{text-align:left;background:deepskyblue;}
            .aside-1{background:gold}
            .aside-2{background:hotpink}
            @media all and (min-width:600px){.aside{flex:1 auto}/*让所有灵活的项目都带有相同的长度，忽略它们的内容：*/
            }@media all and (min-width:800px){.main{flex:2 0px}
                .aside-1{order:1}/*用整数值来定义排列顺序，数值小的排在前面。可以为负值*/
                .main{order:2}
                .aside-2{order:3}
                .footer{order:4}
            }
        </style>        
    </head>
    <body>
        <div class="wrapper">
            <header class="header">Header</header>
            <article class="main">
                <p>这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，
                    这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，</p>
            </article>
            <aside class="aside aside-1">Aside 1</aside>
            <aside class="aside aside-2">Aside 2</aside>
            <footer class="footer">Footer</footer>
        </div>
    </body>
</html>
haeasringnar
关注
专栏目录
两个div块左右拉伸 导航栏显示/隐藏
03-03
运用div布局，两个div拉伸一个变大一个变小，实现左侧导航栏显示/隐藏功能
页面布局方法之三栏布局
Banner_的博客
07-01 965
三栏布局方法1.浮动布局(float)2.绝对定位(absolute)3.伸缩布局(flex)4.表格布局(table)5.网格布局(grid) 题目：完成左中右三栏布局，高度100px，左右宽度200px，中间宽度自适应。 今天学习了关于三栏布局的五种方法，其中最常用的就是flex伸缩布局，其他的布局方法虽然也可以实现同样的效果，但是或多或少有些缺点，但是本着多学点总是没错的精神，还是都了解一下。 1.浮动布局(float) float浮动布局的有点是兼容性比较好，但是其脱离Dom流的特性导致使用起来需要
html伸缩布局,CSS3 伸缩布局（一）
weixin_31221157的博客
06-15 357
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型(Flexible Box)，用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。Fle...
html三栏式布局图,div布局的自由伸展三栏式版面
weixin_36324426的博客
06-15 420
#middlebox {margin: 0 34% 0 170px;border-left: 2px solid #000;border-right: 2px solid #000;padding: 0 10px 10px;background-color: #6b9;}中间栏段有设定背景色，以便跟右边栏段作区分。这个栏段也需要补白(padding)和边框(border)，不过因为没有设定“宽度(...
实现三栏布局的几种方法
Longyearning的博客
07-29 1585
实现三栏布局的几种方法
html+css：主要运用了flex布局和绝对定位
07-24
6. `flex-grow`, `flex-shrink`, `flex-basis`: 这三个属性共同决定了子元素的伸缩比例，用于决定如何分配多余空间或缩小空间。 绝对定位是CSS定位模型的一部分，通过设置`position`属性为`absolute`，元素会脱离...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
html+css+js网页设计.pdf
最新发布
05-14
- **Flexbox**：提供了一种更灵活的布局方式，可以轻松实现居中对齐、伸缩等功能。 - **Grid**：适合于复杂的二维网格布局。 - **浮动(float)**：可以实现简单的左右排列效果。 - **媒体查询**：允许根据不同设备...
div布局的自由伸展三栏式版面的代码
10-30
在这个示例中，我们使用了CSS Flexbox布局来创建三栏式版面。关键点如下： 1. `*{margin:0;padding:0;box-sizing:border-box;}` 是重置浏览器默认样式，确保元素边距和内填充的统一处理。 2. `html, body {height: ...
用CSS的float和clear属性进行三栏网页布局
09-25
"用CSS的float和clear属性进行三栏网页布局" 本文介绍了一种使用CSS的float和clear属性来实现三栏网页布局的方法。这种布局是最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本...
html 页面 frame框架 伸缩弹窗
11-23
html 页面 frame框架 伸缩弹窗 html 页面 frame框架 伸缩弹窗
css实现经典管理系统布局，三栏式
06-23
css实现经典管理系统布局，三栏式
前端HTML-三栏布局
weixin_46589442的博客
02-01 477
双飞翼布局 <style> .container { float: left; width: 100%; } .main { height: 200px; background-color: aqua; margin-left: 100px; margin-right: 100px;
HTML、CSS——可伸缩式搜索框
u013430418的博客
08-12 1788
用HTML、css制作一个可以伸缩的搜索框。
HTML + CSS -12. 弹性（伸缩）布局(flex 布局)
小多的博客
05-26 1880
一、伸缩布局(CSS3) CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 方向：默认主轴从左向右，侧轴默认从上到下 主轴和侧轴并不是固定不变的，通过flex-direction可以互换。 Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏
html 伸缩盒子布局,详解CSS3伸缩布局盒模型Flex布局
weixin_42127937的博客
06-17 2026
一、Flex 布局是什么？CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目...
html伸缩布局,HTML-CSS：伸缩布局
weixin_31423295的博客
06-15 568
主轴方向/*在伸缩布局中, 默认伸缩项是从左至右的排版的*/display: flex;/*主轴的排版的方向默认就是row, 默认就是从左至右*//*flex-direction: row;*//*修改主轴的排版方向为从右至左*//*flex-direction: row-reverse;*//*告诉系统把主轴的方向改为垂直方向注意点:1.默认情况下主轴是水平方向的, 但是也可以修改为垂直方向.只...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
dxy1128的博客
11-03 3647
写在前面：博主最近在转头复习最前面学的CSS，整理一下CSS三栏布局的笔记，正好也捋顺自己的逻辑思路。解析我尽量按照思路详细的写了，代码均可正确运行，留给需要的小伙伴进行参考，如有不足，欢迎在评论区补充。
Web实现：flex弹性布局两栏自适应布局
jasmyn518的博客
03-04 1010
HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
HTML+CSS基础笔记：从布局到超链接
它与HTML并行工作，允许开发者控制文本的字体、颜色、布局以及响应式设计。CSS的重要概念包括选择器（如ID选择器、类选择器）、属性（如`width`、`height`）和值（如像素、百分比）。CSS的嵌套规则和盒模型（即元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

haeasringnar

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值