CSS练习小题（七）：三栏自适应

已于 2022-04-15 17:19:37 修改
阅读量192 收藏
点赞数
分类专栏： # CSS练习题 文章标签： css
于 2022-03-23 15:19:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Sunshine_Jian/article/details/123687034
版权

 效果图：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100vh;
        }
        .left,.right{
            position: absolute;
            width: 200px;
            background-color: burlywood;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .center{
            margin: 0 200px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="center">中间</div>
</body>
</html>

前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局
2401_84435192的博客
05-01 87
其中，li设置成inline-block，并在ul上设置font-size为0，消除li之间的空隙；一般两列布局会在父级设置一个最小宽度min-width，当浏览器的宽度小于这个值时，下方出现滚动条，页面从左到右滚动看全貌。当两个子div不能充满父级时，2子由于设置了flex-grow，而1子的flex-grow为0，所以多余的宽度都给了2。两个子div，第一个子div设定宽度，第二个不设宽度，但设置了felox-grow：1；还可以用float，li脱离文档流，让其横放，并清除浮动。
CSSBFC规则的应用自适应两栏布局
HelloWorld1626的博客
03-01 391
两栏布局是写页面时经常用到的，要想实现两栏布局，就需要明白BFC规则，Block formatting context，直译为“块级格式化上下文”，可以简单的理解它为一个独立的区域，把区域内部元素与外部元素区分开，两者互不干扰。 它的规则： 1.内部元素会在垂直方向一个接一个放置。 2.属于同一个BFC的两个元素上下margin会重叠。 3.独立的BFC的区域不会与浮动元素重叠。 4.BFC就是页...
HTML第7章 课堂练习 PPT及答案 CSS.ACCP6.0
05-10
HTML第7章 课堂练习 PPT及答案 CSS.ACCP6.0
圣杯布局
qq_41329275的博客
09-28 100
几种常见的实现圣杯布局的方式
网页制作 第七章测试
Long_UP的博客
06-05 1041
第1部分 总题数: 8 【单选题】 (2分) 关于网页布局，下列说法错误的是（）。 A. 网页后台一般采用frameset进行窗口分割 B. 网页的宽度最多不要超过1024px C. 网页前台一般采用div+css布局 D. 网页布局设计时，一般用div来显示数据，用table来布局 本题总得分2分 【单选题】 (2分) 要将某div设置为漂浮于页面之上，以下能做到得是（）。 A. position：relative B. position：fixed C. position：static D. pos
html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...
weixin_42532067的博客
06-15 296
假设高度已知，请写出三栏布局，其中左右各位300px，中间自适应1、左右浮动.left {float: left;width: 300px;background: red;}.right {float: right;width: 300px;background: green;}.center {background: yellow;}这是浮动布局2、绝对定位.left-center-right ...
从 Scrapy 到 Django 必须掌握(8)：网站的自适应和响应式
晦涩难董先生
04-22 1338
一个页面自动适配所有设备，代码复用高，开发维护方便。为不同设备做不同页面，用户体验可以更好，但开发和维护复杂。现在主流的网站几乎都是用响应式设计，除非对不同设备有极高的优化需求，才会用自适应（比如某些大型门户，或需要极致性能体验的应用）。响应式网页设计已经成为现代网站开发的主流，由于有大量用户会用手机浏览，更需要高度重视响应式体验。下面我会从“规划-布局-细节-常见问题”四个部分，详细讲解一个响应式论坛网页从零开始应如何设计。需求梳理→ 明确终端和功能原型/线框图→ 画草图，尝试分辨率适配。
CSS真题合集（一）
措手不及ya的博客
06-03 1052
盒子模型、BFC、响应式布局、元素水平垂直居中的方法、实现两栏布局右侧自适应?三栏布局中间自适应、css选择器、隐藏页面元素方法和区别、实现单行/多行文本溢出的省略样式、画三角形、css完成视差滚动效果
CSS三栏自适应布局，左中右，上中下
weixin_34087301的博客
03-06 436
本文对可以实现三栏布局的方法进行了整理 左右固定宽度，中间自适应(5种方法) 1.float方法 2.absolute方法 3.flexbox方法 4.table方法 5.grid方法 &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;css布局全解&lt;/title&gt; &lt;style t...
前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局）
2401_84092360的博客
04-22 335
一般两列布局会在父级设置一个最小宽度min-width，当浏览器的宽度小于这个值时，下方出现滚动条，页面从左到右滚动看全貌。当两个子div不能充满父级时，2子由于设置了flex-grow，而1子的flex-grow为0，所以多余的宽度都给了2。两个子div，第一个子div设定宽度，第二个不设宽度，但设置了felox-grow：1；即使li个数不定，可能4个可能5个，依然不会超出ul，flex-shrink默认为1；在两列的基础上，加第三个div，并设置它的宽度和背景颜色。各li1：1比例缩放，充满ul；
前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局(1)
2401_84435192的博客
05-01 65
其中，li设置成inline-block，并在ul上设置font-size为0，消除li之间的空隙；一般两列布局会在父级设置一个最小宽度min-width，当浏览器的宽度小于这个值时，下方出现滚动条，页面从左到右滚动看全貌。当两个子div不能充满父级时，2子由于设置了flex-grow，而1子的flex-grow为0，所以多余的宽度都给了2。两个子div，第一个子div设定宽度，第二个不设宽度，但设置了felox-grow：1；还可以用float，li脱离文档流，让其横放，并清除浮动。
HTML+CSS面试题总结（附答案+视频讲解）
xm1037782843的博客
06-25 2909
前端面试题总结 面试题总结 html+css面试题 元素隐藏、盒子垂直居中
前端知识测试：HTML、CSS、JS试题解析
2. CSS引入方式：CSS代码可以通过三种常见方式引入：行内样式（`style`属性），内联样式表（`<style>`标签），外部样式表（`<link rel="stylesheet" href="...">`）和@import规则（`@import url("...");`）。 3. ...
CSS闯关指南：从手写地狱到“类”积木之旅｜得物技术
最新发布
SmartCodeTech的博客
05-26 635
CSS开发经历了从纯手写时代到现代原子化框架的演进历程。早期手写CSS存在代码冗余、命名冲突、维护困难等问题；Sass/Less等预处理器通过变量和嵌套提升了代码复用率；CSS Modules和BEM规范解决了作用域污染；CSS-in-JS实现了样式与组件绑定。而原子化CSS（如Tailwind、UnoCSS）通过预设实用类组合样式，大幅提升开发效率和设计一致性，但也面临学习曲线和可读性挑战。技术选型应结合实际需求，平衡灵活性、维护性和开发体验，在代码严谨性和开发效率间寻找最优解。
用 Deepseek 写的 html+js 密码生成器
weixin_42581036的博客
05-22 748
这是一个功能全面的密码生成器，使用HTML和JavaScript实现。用户可以通过滑块设置密码长度（4到64位），并选择包含的字符类型，如小写字母、大写字母、数字和符号。此外，用户还可以选择避免密码中出现重复字符。生成的密码会显示在输入框中，并附带一个密码强度指示条，根据密码长度和使用的字符类型显示强度。用户还可以一键复制生成的密码到剪贴板。该工具具有响应式设计，适配不同屏幕尺寸，适合需要生成安全密码的用户使用。
CSS：vertical-align用法以及布局小案例(较难)
Brave_heart4pzj的博客
05-22 331
CSS
Vue+css实现扫描动画效果（使用@keyframes scan）
蓝胖子的博客
05-23 357
Vue+css实现扫描动画效果（使用@keyframes scan）annimation
CSS回顾
linux_hzh的博客
05-22 1243
显示模式img {div {.box1 {.box2 {<img width="300" src="../images/我的自拍.jpg" alt=""><img width="300" src="../images/我的自拍.jpg" alt="">
东方仙盟_灵颜妙手——表单样式——仙盟创梦IDE
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
05-26 253
让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值