当前位置： 首页 > news >正文

Html基础知识学习——圣杯布局、margin负值、等高布局（十七）

news 2026/2/9 3:23:19

文章目录

  • 圣杯布局
  • margin负值
  • 等高布局

圣杯布局

在这里插入图片描述

两边页面固定中间页面宽度随着浏览器大小自适应

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*  圣杯布局：两边页面固定中间页面宽度随着浏览器大小自适应*/body {margin: 0;}.center {height: 600px;background-color: pink;margin: 0 200px;}.left {width: 200px;height: 600px;background-color: aqua;position: absolute;left: 0;top: 0;}.right {width: 200px;height: 600px;background-color: bisque;position: absolute;right: 0;top: 0;}</style>
</head><body><div class="center"></div><div class="left"></div><div class="right"></div>
</body></html>

margin负值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{float: left;border: 10px solid #000;margin: 20px;}.box div{width: 100px;height: 100px;background-color: aquamarine;}.div1{margin-top: -30px;}.div2{margin-left: -30px;}.div3{margin-bottom: -30px;}.div4{margin-right: -30px;}</style>
</head>
<body><div class="box"><div class="div1"></div></div><div class="box"><div class="div2"></div></div><div class="box"><div class="div3"></div></div><div class="box"><div class="div4"></div></div><div class="box"><div class="div5"></div></div>
</body>
</html>

等高布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 等高布局 */body{margin :0}.wrap{width: 900px;margin: 0 auto;overflow: hidden;border: 10px solid #000;}.wrap :after{content: "";display:block;clear: both;}.left{width: 200px;background: red;float: left;padding-bottom:400px ;margin-bottom: -400px;}.right{width: 700px;background: yellowgreen;float: right;padding-bottom:400px ;margin-bottom: -400px;}</style>
</head>
<body><div class="wrap"><div class="left">&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/></div><div class="right">&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/></div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 等高布局 */body{margin :0}.wrap{width: 900px;margin: 0 auto;overflow: hidden;border: 10px solid #000;}.wrap :after{content: "";display: block;clear: both;}.left{width: 200px;background: red;float: left;padding-bottom:200px ;margin-bottom: -200px;}.right{width: 200px;background: yellowgreen;float: right;padding-bottom:200px ;margin-bottom: -200px;}</style>
</head>
<body><div class="wrap"><div class="left">&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/></div><div class="right">&nbsp;  &nbsp;快快乐乐<br/>&nbsp;  &nbsp;快快乐乐<br/></div></div>
</body>
</html>

相关文章：

Html基础知识学习——圣杯布局、margin负值、等高布局（十七）

文章目录 圣杯布局margin负值等高布局 圣杯布局 两边页面固定中间页面宽度随着浏览器大小自适应 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-widt…...

编程日记 2023/7/22 4:06:40

从一长串字符串中找出图片，查看是否符合md5要求

/**检查内容中的图片否含有外部链接*/ function checkExternalLinks(content){var pattern /<img[^>]src["]([^"])["][^>]*>/g;var match;var index 0;while ((match pattern.exec(content)) ! null) {var imageUrl match[1];var regex /\/sto…...

编程日记 2023/7/22 3:33:19

新手小白如何学好UI设计？一般学多久？ 优漫动游

学习UI设计首先就是软件&#xff1a;PS、AI、CDR等但是掌握了软件不等于就掌握了UI设计&#xff0c;设计的思维也是很重要的网上很多关于UI设计的教程视频&#xff0c;可以多去看看 广州平面设计培训 要多久这个看个人的学习能力吧&#xff0c;有些人天资聪慧&#xff0c;很快…...

编程日记 2023/7/22 2:59:58

实现 Rollup 插件alias 并使用vitest提高开发效率

本篇文章是对 实现 Rollup 插件 alias | 使用 TypeScript 实现库的基本流程 | 使用单元测试提高开发效率 的总结。其中涉及到开发一个组件库的诸多知识点。 实现一个经常用的 rollup 插件 alias 首先执行npm init命令初始化一个package.json文件&#xff0c;因为插件使用了ty…...

编程日记 2023/7/22 2:26:37

【DSL】ES+DSL 查询语法

【DSL】ESDSL 查询语法 一、前言二、定义1.基本介绍2.语法说明&#xff08;1&#xff09;关键字(Keywords)&#xff08;2&#xff09;标识符(Identifiers)&#xff08;3&#xff09;表达式(Expressions)&#xff08;4&#xff09;运算符(Operators)&#xff08;5&#xff09;函…...

编程日记 2023/7/22 1:53:15

Vue第三篇：最简单的vue购物车示例

本文参考&#xff1a;Vue Cli&#xff08;脚手架&#xff09;实现购物车小案例 - - php中文网博客 效果图&#xff1a; 编写流程&#xff1a; 1、首先通过vue/cli创建工程 vue create totalprice 2、改写App.vue代码如下&#xff1a; <template><div><div v…...

编程日记 2023/7/22 1:19:54

MFC 基于数据库的管理系统

文章目录 初始化设置菜单 添加数据库类创建数据库配置数据库 全部代码 初始化 创建文件选择基于CListView 初始化数据 public:CListCtrl& m_list;CSQLView::CSQLView() noexcept:m_list(GetListCtrl()) {// TODO: 在此处添加构造代码}void CSQLView::OnInitialUpdate() {C…...

编程日记 2023/7/22 0:46:33

EfficientNet论文笔记

EfficientNet论文笔记 通过NAS平衡了channel&#xff0c;depth&#xff0c;resolution&#xff0c;发现在相同的FLOPs下&#xff0c;同时增加 depth和 resolution的效果最好。 数据集效果小于resolution怎么办&#xff1f; EfficientNet—b0框架 表格中每个MBConv后会跟一个…...

编程日记 2023/7/22 0:13:12

系统学习Linux-SSH远程服务（二）

概念 安全外壳协议&#xff0c;提供安全可靠的远程连接 特点 ssh是工作在传输层和应用层的协议 ssh提供了一组管理命令 ssh 远程登陆 scp 远程拷贝 sftp 远程上传下载 ssh-copy-id ssh keygen 生成 提供了多种身份验证机制 身份验证机制 密码验证 需要提供密码 密…...

编程日记 2023/7/21 23:39:51

PyTorch训练RNN, GRU, LSTM：手写数字识别

文章目录 pytorch 神经网络训练demoResult参考来源 pytorch 神经网络训练demo 数据集&#xff1a;MNIST 该数据集的内容是手写数字识别&#xff0c;其分为两部分&#xff0c;分别含有60000张训练图片和10000张测试图片 图片来源&#xff1a;https://tensornews.cn/mnist_intr…...

编程日记 2023/7/21 23:06:29

基于深度学习的高精度道路瑕疵检测系统（PyTorch+Pyside6+YOLOv5模型）

摘要&#xff1a;基于深度学习的高精度道路瑕疵&#xff08;裂纹&#xff08;Crack&#xff09;、检查井&#xff08;Manhole&#xff09;、网&#xff08;Net&#xff09;、裂纹块&#xff08;Patch-Crack&#xff09;、网块&#xff08;Patch-Net&#xff09;、坑洼块&#x…...

编程日记 2023/7/21 22:33:08

【裸辞转行】是告别，也是新的开始

一年多了没有更新&#xff0c;是因为去年身体加心理因素辞职了&#xff0c;并且大概率不会再做程序员了&#xff0c;嗯。本来觉得可能再也不会打开 CSDN 了&#xff0c;想了想&#xff0c;还是来做个告别吧&#xff0c;任何事情都该有始有终才对。 回忆碎碎念 是在去年的 11 …...

编程日记 2023/7/21 21:59:47

了解交换机接口的链路类型（access、trunk、hybrid）

上一个章节中讲到了vlan的作用及使用&#xff0c;这篇了解一下交换机接口的链路类型和什么情况下使用 vlan在数据包中是如何体现的&#xff0c;在上一篇的时候提到测试了一下&#xff0c;从PC1去访问PC4的时候&#xff0c;只从E0/0/2发送给了E0/0/3这是&#xff0c;因为两个接…...

编程日记 2023/7/21 21:26:25

Android系统启动流程分析

当按下Android系统的开机电源按键时候&#xff0c;硬件会触发引导芯片&#xff0c;执行预定义的代码&#xff0c;然后加载引导程序(BootLoader)到RAM&#xff0c;Bootloader是Android系统起来前第一个程序&#xff0c;主要用来拉起Android系统程序&#xff0c;Android系统被拉起…...

编程日记 2023/7/21 20:53:03

如何在Ubuntu上安装OpenneBula

OpenNebula是一个开源云计算平台&#xff0c;允许我们在完全虚拟化云中组合和管理VMware和KVM虚拟机 第1步&#xff1a;安装MariaDB数据库服务器 OpenNebula还需要一个数据库服务器来存储其内容。 安装MariaDB&#xff1a; 1 2 sudo apt update sudo apt install mariadb-s…...

编程日记 2023/7/21 20:19:40

解决MySQL中分页查询时多页有重复数据，实际只有一条数据的问题

0 前言 有一个离奇的BUG&#xff0c;在查询时&#xff0c;第一页跟第二页有一个共同的数据。有的数据却不显示。 后来发现是在SQL排序时没用主键排序。 解决&#xff1a;使用主键排序 以下是我准备的举例&#xff0c;可以自己试试。 1 数据准备 SET NAMES utf8mb4; SET FORE…...

编程日记 2023/7/21 19:46:19

【数据结构】时间复杂度---OJ练习题

目录 &#x1f334;时间复杂度练习 &#x1f4cc;面试题--->消失的数字 题目描述 题目链接&#xff1a;面试题 17.04. 消失的数字 &#x1f334;解题思路 &#x1f4cc;思路1&#xff1a; malloc函数用法 &#x1f4cc;思路2&#xff1a; &#x1f4cc;思路3&…...

编程日记 2023/7/21 19:12:58

京东自动化功能之商品信息监控是否有库存

这里有两个参数，分别是area和skuids area是地区编码，我这里统计了全国各个区县的area编码，用户可以根据实际地址进行构造skuids是商品的信息ID填写好这两个商品之后，会显示两种状态，判断有货或者无货状态，详情如下图所示 简单编写下python代码，比如我们的地址是北京市…...

编程日记 2023/7/21 18:39:36

【SwitchyOmega】SwitchyOmega 安装及使用

文章目录 安装教程使用教程 安装教程 SwitchyOmega 谷歌商店下载链接&#xff1a;https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif?hlen-US 在谷歌商店搜索 SwitchyOmega&#xff0c; 选择 Proxy SwitchyOmega 点击 Add t…...

编程日记 2023/7/21 18:06:15

CentOS5678 repo源 地址 阿里云开源镜像站

CentOS5678 repo 地址 阿里云开源镜像站 https://mirrors.aliyun.com/repo/ CentOS-5.repo https://mirrors.aliyun.com/repo/Centos-5.repo [base] nameCentOS-$releasever - Base - mirrors.aliyun.com failovermethodpriority baseurlhttp://mirrors.aliyun.com/centos/$r…...

编程日记 2023/7/21 17:32:54

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/2/5 5:05:56

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/11/22 20:41:02

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/11/26 18:23:29