Html基础知识学习——圣杯布局、margin负值、等高布局(十七)
文章目录
- 圣杯布局
- 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"> 快快乐乐<br/> 快快乐乐<br/> 快快乐乐<br/> 快快乐乐<br/> 快快乐乐<br/> 快快乐乐<br/></div><div class="right"> 快快乐乐<br/> 快快乐乐<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"> 快快乐乐<br/> 快快乐乐<br/> 快快乐乐<br/> 快快乐乐<br/> 快快乐乐<br/> 快快乐乐<br/></div><div class="right"> 快快乐乐<br/> 快快乐乐<br/></div></div>
</body>
</html>
相关文章:
Html基础知识学习——圣杯布局、margin负值、等高布局(十七)
文章目录 圣杯布局margin负值等高布局 圣杯布局 两边页面固定中间页面宽度随着浏览器大小自适应 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-widt…...
从一长串字符串中找出图片,查看是否符合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…...
新手小白如何学好UI设计?一般学多久? 优漫动游
学习UI设计首先就是软件:PS、AI、CDR等但是掌握了软件不等于就掌握了UI设计,设计的思维也是很重要的网上很多关于UI设计的教程视频,可以多去看看 广州平面设计培训 要多久这个看个人的学习能力吧,有些人天资聪慧,很快…...
实现 Rollup 插件alias 并使用vitest提高开发效率
本篇文章是对 实现 Rollup 插件 alias | 使用 TypeScript 实现库的基本流程 | 使用单元测试提高开发效率 的总结。其中涉及到开发一个组件库的诸多知识点。 实现一个经常用的 rollup 插件 alias 首先执行npm init命令初始化一个package.json文件,因为插件使用了ty…...
【DSL】ES+DSL 查询语法
【DSL】ESDSL 查询语法 一、前言二、定义1.基本介绍2.语法说明(1)关键字(Keywords)(2)标识符(Identifiers)(3)表达式(Expressions)(4)运算符(Operators)(5)函…...
Vue第三篇:最简单的vue购物车示例
本文参考:Vue Cli(脚手架)实现购物车小案例 - - php中文网博客 效果图: 编写流程: 1、首先通过vue/cli创建工程 vue create totalprice 2、改写App.vue代码如下: <template><div><div v…...
MFC 基于数据库的管理系统
文章目录 初始化设置菜单 添加数据库类创建数据库配置数据库 全部代码 初始化 创建文件选择基于CListView 初始化数据 public:CListCtrl& m_list;CSQLView::CSQLView() noexcept:m_list(GetListCtrl()) {// TODO: 在此处添加构造代码}void CSQLView::OnInitialUpdate() {C…...
EfficientNet论文笔记
EfficientNet论文笔记 通过NAS平衡了channel,depth,resolution,发现在相同的FLOPs下,同时增加 depth和 resolution的效果最好。 数据集效果小于resolution怎么办? EfficientNet—b0框架 表格中每个MBConv后会跟一个…...
系统学习Linux-SSH远程服务(二)
概念 安全外壳协议,提供安全可靠的远程连接 特点 ssh是工作在传输层和应用层的协议 ssh提供了一组管理命令 ssh 远程登陆 scp 远程拷贝 sftp 远程上传下载 ssh-copy-id ssh keygen 生成 提供了多种身份验证机制 身份验证机制 密码验证 需要提供密码 密…...
PyTorch训练RNN, GRU, LSTM:手写数字识别
文章目录 pytorch 神经网络训练demoResult参考来源 pytorch 神经网络训练demo 数据集:MNIST 该数据集的内容是手写数字识别,其分为两部分,分别含有60000张训练图片和10000张测试图片 图片来源:https://tensornews.cn/mnist_intr…...
基于深度学习的高精度道路瑕疵检测系统(PyTorch+Pyside6+YOLOv5模型)
摘要:基于深度学习的高精度道路瑕疵(裂纹(Crack)、检查井(Manhole)、网(Net)、裂纹块(Patch-Crack)、网块(Patch-Net)、坑洼块&#x…...
【裸辞转行】是告别,也是新的开始
一年多了没有更新,是因为去年身体加心理因素辞职了,并且大概率不会再做程序员了,嗯。本来觉得可能再也不会打开 CSDN 了,想了想,还是来做个告别吧,任何事情都该有始有终才对。 回忆碎碎念 是在去年的 11 …...
了解交换机接口的链路类型(access、trunk、hybrid)
上一个章节中讲到了vlan的作用及使用,这篇了解一下交换机接口的链路类型和什么情况下使用 vlan在数据包中是如何体现的,在上一篇的时候提到测试了一下,从PC1去访问PC4的时候,只从E0/0/2发送给了E0/0/3这是,因为两个接…...
Android系统启动流程分析
当按下Android系统的开机电源按键时候,硬件会触发引导芯片,执行预定义的代码,然后加载引导程序(BootLoader)到RAM,Bootloader是Android系统起来前第一个程序,主要用来拉起Android系统程序,Android系统被拉起…...
如何在Ubuntu上安装OpenneBula
OpenNebula是一个开源云计算平台,允许我们在完全虚拟化云中组合和管理VMware和KVM虚拟机 第1步:安装MariaDB数据库服务器 OpenNebula还需要一个数据库服务器来存储其内容。 安装MariaDB: 1 2 sudo apt update sudo apt install mariadb-s…...
解决MySQL中分页查询时多页有重复数据,实际只有一条数据的问题
0 前言 有一个离奇的BUG,在查询时,第一页跟第二页有一个共同的数据。有的数据却不显示。 后来发现是在SQL排序时没用主键排序。 解决:使用主键排序 以下是我准备的举例,可以自己试试。 1 数据准备 SET NAMES utf8mb4; SET FORE…...
【数据结构】时间复杂度---OJ练习题
目录 🌴时间复杂度练习 📌面试题--->消失的数字 题目描述 题目链接:面试题 17.04. 消失的数字 🌴解题思路 📌思路1: malloc函数用法 📌思路2: 📌思路3&…...
京东自动化功能之商品信息监控是否有库存
这里有两个参数,分别是area和skuids area是地区编码,我这里统计了全国各个区县的area编码,用户可以根据实际地址进行构造skuids是商品的信息ID填写好这两个商品之后,会显示两种状态,判断有货或者无货状态,详情如下图所示 简单编写下python代码,比如我们的地址是北京市…...
【SwitchyOmega】SwitchyOmega 安装及使用
文章目录 安装教程使用教程 安装教程 SwitchyOmega 谷歌商店下载链接:https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif?hlen-US 在谷歌商店搜索 SwitchyOmega, 选择 Proxy SwitchyOmega 点击 Add t…...
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…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库,提供了高效、安全的文本格式化功能,是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全:…...
[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码:HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下…...
全面解析数据库:从基础概念到前沿应用
在数字化时代,数据已成为企业和社会发展的核心资产,而数据库作为存储、管理和处理数据的关键工具,在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理,到社交网络的用户数据存储,再到金融行业的交易记录处理&a…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...
