CSS布局之圣杯布局/双飞翼布局

news2024/11/23 18:37:08

📝个人主页:爱吃炫迈
💌系列专栏:HTML+CSS
🧑‍💻座右铭:道阻且长,行则将至💗

文章目录

  • 圣杯布局
    • HTML代码
    • 步骤
    • CSS代码
  • 双飞翼布局
    • HTML代码
    • 步骤
    • CSS代码
  • 小结


请添加图片描述

圣杯布局

HTML代码

  <div class="wrap">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>

步骤

  1. 给最外层容器wrap设置padding-left: 200px;padding-right: 200px;
  2. 渲染contentleftright三个容器
  • 都设置浮动float: left;,脱离文档流;
  • 设置left和right宽度和高度:width: 200px;height: 100px;
  • 设置center的宽度:width: 100%;,使其充满容器;高度:height: 100px;

🌸查看效果

请添加图片描述

  1. 将left移动到左边空白区
  • 先将left拉回第一行,使其覆盖在center的最左侧:position: relative;margin-right: -100%;

请添加图片描述

  • 将left相对于center容器向左移100%(也就是content自身的宽度)left: -200px;

请添加图片描述

  1. 将right移动到右边空白区
  • 先将right拉回第一行:position: relative;margin-left: -200px;

请添加图片描述

  • 将right相对于自身向右移200px:left: 200px;

🌸最终效果

请添加图片描述


CSS代码

.wrap {
    padding-left: 200px;
    padding-right: 200px;
}

.left {
    position: relative;
    float: left;
    left: -200px;
    margin-left: -100%;

    width: 200px;
    height: 200px;

    background-color: pink;
}
.center {
    float: left;
    width: 100%;
    height: 200px;
    background-color: greenyellow;
}
.right {
    position: relative;
    float: left;
    left: 200px;
    margin-left: -200px;

    width: 200px;
    height: 200px;

    background-color: pink;
}

双飞翼布局

HTML代码

  <div class="wrap">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>

步骤

  1. 渲染contentleftright三个容器
  • 都设置浮动float: left;,脱离文档流;
  • 设置left和right宽度和高度:width: 200px;height: 200px;
  • 设置center的宽度:width: 100%;,使其充满容器;高度:height: 200px;

🌸查看效果

请添加图片描述

  1. 将left拉回第一行,使其覆盖在center的最左侧:margin-right: -100%;

请添加图片描述

  1. 将right拉回第一行,使其覆盖在center的最右侧:margin-left:-200px

🌸最终效果

请添加图片描述


CSS代码

 .left {
    float: left;
    margin-left: -100%;

    width: 200px;
    height: 200px;

    background-color: pink;
  }
  .center {
    float: left;
      
    width: 100%;
    height: 200px;
      
    background-color: greenyellow;
  }
  .right {
    float: left;
    margin-left: -200px;

    width: 200px;
    height: 200px;

    background-color: pink;
  }

小结

圣杯布局和双飞翼布局实现的效果都是相同的,只是在左右容器覆盖在中间容器中时,处理的容器不同而已。圣杯布局在处理左右容器,用相对定位时要注意左右平移的方向是相反的。双飞翼布局处理中间容器时要注意内层容器的内边距。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/465807.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

延长无线传感器网络网络寿命的异构节点智能部署策略(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 无线传感器网络是通过大量分布的传感器节点作为终端来协同感知和自主地监测外部世界,以多跳、自组织或协作的方式进行通信和信息…

Android系统架构

Application层&#xff0c;也就是应用层&#xff0c;不仅包括通话短信联系人这种系统级的应用&#xff0c;还包括用户自己安装的一些第三方应用Framework层&#xff0c;这一层大部分用Java写的&#xff0c;包括系统服务和四大组件Library层&#xff0c;这一层大部分都是C/C写的…

C++调用matlab编译动态库方法及相关问题解决

目录 参考链接&#xff1a;1、C调用matlab代码的方法1.1、Library Compiler 方法1.1.1、功能1.1.2、参考链接 1.2、mex -setup方法1.2.1、功能参考链接&#xff1a; 1.3、coder 方法功能 1.4、Matlab engine 2、C 使用matlab编译动态库的传参方法3、matlab运行时 参考链接&…

《AI嵌入式系统技术与实践-基于树莓派RP2040和MicroPython》书籍介绍

图书封面及出版信息 该书由本博主编著&#xff0c;全书总字数约50万字&#xff0c;本书于2023年4月出版。 内容简介 本书基于以RP2040 MCU芯片为核心的树莓派Pico开发板硬件扩展接口&#xff0c;利用Pico硬件扩展接口和面包板设计典型硬件电路&#xff0c;并结合当今流行的微…

网络编程(TCP与UDP协议)

文章目录 1. 网络编程1.1 软件架构1.2 网络基础 2. 网络通信要素2.1 如何实现网络中的主机互相通信2.2 通信要素一&#xff1a;IP地址和域名2.2.1 IP地址2.2.2 域名 2.3 通信要素二&#xff1a;端口号2.4 通信要素三&#xff1a;网络通信协议 3. 传输层协议&#xff1a;TCP与UD…

如何快速查询Git的config配置文件的本地路径

如何快速查询Git的config配置文件的本地路径 命令作用git config --local --list --show-origin查看仓库级别 git 配置信息&#xff0c;并打印配置文件本地路径最高优先级&#xff08;仓库下&#xff09;git config --global --list --show-origin查看全局级别 git 配置信息&a…

2022年全国职业院校技能大赛网络系统管理赛项模块B:Windows部署(样题1)

2022年全国职业院校技能大赛 网络系统管理赛项 模块B&#xff1a;Windows部署 &#xff08;样题1&#xff09; 目录 一、 初始化环境 &#xff08;一&#xff09;默认账号及默认密码 二、项目任务描述 &#xff08;一&#xff09;基本配置 &#xff08;二&#xff09;拓…

C语言控制语句

文章目录 前言一、分支语句1.if语句2.if else else if3.switch语句 二、循环语句1.for循环2.while循环3.do-while循环 三、跳转语句1.break语句2.continue语句3.goto语句 四、嵌套语句1.if语句嵌套2.for语句嵌套3.while语句嵌套 总结 前言 C语言中的控制语句是非常重要的一个知…

JVM入门必备

1、JVM 的位置 2、JVM 的体系结构 JVM&#xff08;Java虚拟机&#xff09;是Java程序的运行环境&#xff0c;它对于Java平台的运行和跨平台特性的实现有着重要的作用。JVM的体系结构有以下几个部分&#xff1a; 类加载器&#xff08;ClassLoader&#xff09;&#xff1a;负责将…

day4 IP地址与端口号

IP地址及其表示方式 IP地址表示方法&#xff1a; 分类的IP地址&#xff1a; 多归属主机&#xff1a; 当一个主机通过两个网卡同时连接到两网络时&#xff0c;也就是该主机同时拥有两个IP地址&#xff0c;该主机被称为多归属主机&#xff1b; 一个路由器至少连接到两个不同的网…

C++语法(21)---- 模拟map和set

(1条消息) C语法&#xff08;20&#xff09;---- 模拟红黑树_哈里沃克的博客-CSDN博客https://blog.csdn.net/m0_63488627/article/details/130296772?spm1001.2014.3001.5501 目录 1.stl中的设计思想 2.模拟set和map 1.set和map的类 2.BRTree的仿函数实现 3.红黑树的迭…

C语言力扣简单题-两数之和

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 两数之和 题目&#xff1a; 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和…

从数据处理到人工智能(常用库的介绍)

Python库之数据分析 ​​​​​​​​​​​​ 可以这么理解pandas通过扩展了对一维数据和二维数据的一种表示&#xff0c;因而能够形成更高层对数据的操作&#xff0c;简化数据分析的运行 Python库之数据可视化 Matplotlib — Visualization with Python seaborn: statistic…

DNS基础:通过dig命令理解DNS域名解析中的A记录,AAAA记录,CNAME记录,MX记录,NS记录

参考博文&#xff1a;https://blog.csdn.net/zxl1990_ok/article/details/125432123 目录 参考资料DNS简介查询过程直接显示DNS寻址结果向特定DNS服务器寻址查询A记录查询AAAA记录CNAME记录MX记录NS记录PTR记录SOA记录查看DNS服务器的主从关系 参考资料 http://ruanyifeng.com…

C++ Primer阅读笔记--异常处理机制

目录 1--异常处理机制 2--throw表达式 3--try语句块 4--标准异常类 5--代码实例 1--异常处理机制 异常处理机制为程序中的异常检测和异常处理这两部分的协作提供支持&#xff1b;在 C 语言中&#xff0c;异常处理包括&#xff1a;throw表达式、try语句块和异常类&#xff…

线程池【Linux】

文章目录 1. 引入2. 应用3. 实现封装线程封装线程池线程函数生产消费逻辑互斥锁条件变量线程函数主线程测试1 4. 优化5. 日志日志的重要性实现日志级别提取参数stdarg.h 头文件日志文件 懒汉实现单例模式什么是懒汉模式什么是单例模式实现 1. 引入 线程池是一种池化技术&#…

Vue后台管理系统-前端登录设计

在做后台管理系统时&#xff0c;登录模块是必不可少的&#xff0c;访模块看似简单&#xff0c;在开发涉及到许多细节&#xff0c;一般来说主要有以下这些&#xff1a; 1. 登录输入的信息要进行正则校验&#xff1b; 2. 密码输入要可以查看明文&#xff1b; 3. 密码输入时要对…

JavaWeb——IP协议的相关特性

目录 一、IP协议 1、地址管理 &#xff08;1&#xff09;、动态分配IP地址 &#xff08;2&#xff09;、NAT机制 &#xff08;3&#xff09;、IPv6协议 2、路由选择 &#xff08;1&#xff09;、定义 &#xff08;2&#xff09;、原理 二、路由器 三、IP地址的组成 1…

Postman登录注册指导

在做后端开发的小伙伴经常需要测试自己写的接口是否可以用 这时Postman就是一个很好的选择 如果您还没有下载 可以参考我的文章 API接口调试工具Postman下载安装步骤 安装好之后 我们就需要处理 它的一个注册和登录 我们点击右上角 这里就有一个创建一个账户 我们点击一下 …

CF - Playing in a Casino

题意&#xff1a;一个数的幸运值计算规则是用里面最大的数字-最小的数字所得值 给出一个范围&#xff0c;求这个范围里幸运值最大的是哪个数 解&#xff1a; 这道题相对来说就很简单了&#xff0c;注意数值限制范围在1道1e6&#xff0c;虽然这道题确实暴力就能做出来&#xf…