css， resize 拖拉宽度
效果如下：
可直接复制预览查看属性值:
关键样式属性： resize: horizontal; overflow-x: auto;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./style.css" type="text/css" title="Atom">
</head>
<body><div class="box"><div class="left"><div class="resizeIcon">🎈</div><div class="resize"></div><div class="content"><h2>面朝大海，春暖花开</h2>从明天起，做一个幸福的人 <br>喂马、劈柴，周游世界 <br>从明天起，关心粮食和蔬菜 <br>我有一所房子，面朝大海，春暖花开 <br>从明天起，和每一个亲人通信 <br>告诉他们我的幸福 <br>那幸福的闪电告诉我的 <br>我将告诉每一个人 <br>给每一条河每一座山取一个温暖的名字 <br>陌生人，我也为你祝福 <br>愿你有一个灿烂的前程 <br>愿你有情人终成眷属 <br>愿你在尘世获得幸福 <br>我只愿面朝大海，春暖花开 <br></div></div><div class="right"></div></div>
</body>
</html>
* {padding: 0;margin: 0;box-sizing: border-box;
}
html, body {width: 100%;height: 100%;
}
.box {width: 100%;display: flex;height: 100%;
}
.left {position: relative;margin-right: 16px;height: 100%;border: 1px solid red;
}.left .resize {resize: horizontal;overflow-x: auto;height: calc(50% + 16px);min-width: 400px;opacity: 0;width: calc(100vw - 100px - 16px - 4px);max-width: calc(100vw - 100px - 16px - 4px);transform: translateX(12px);border: 1px solid orange;
}.left .content {position: absolute;left: 0;top: 0;height: 100%;overflow: auto;line-height: 36px;padding: 50px;
}.left .resizeIcon {position: absolute;right: -16px;font-size: 18px;top: 50%;
}.right {border: 1px solid blue;min-width: 100px;height: 100%;flex: 1;
}
相关文章：
css， resize 拖拉宽度
效果如下： 可直接复制预览查看属性值: 关键样式属性： resize: horizontal; overflow-x: auto; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content…...
Python识别抖音Tiktok、巨量引擎滑块验证码识别
由于最近比较忙，所以本周搞了一个相对简单的验证码，就是抖音Tiktok的滑块验证码，这也是接到客户的一个需求。这种验证码通常在电脑端登录抖音、巨量引擎的的时候出现。 首先看一下最终的效果： 验证码识别过程 1、利用爬虫采集图…...
EvilBox One靶场笔记
EvilBox: One靶场笔记 信息收集 先fscan找主机192.168.1.102 namp扫端口 开放80,22端口 然后扫目录 └─$ gobuster dir -r -u http://192.168.1.102/ -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt -x php,txt,bak,html在扫secret目录，找…...
shell脚本中的export无效
写了一段shell脚本： #!/bin/bash source Tools/simulation/gazebo-classic/setup_gazebo.bash $(pwd) $(pwd)/build/px4_sitl_default export ROS_PACKAGE_PATH$ROS_PACKAGE_PATH:$(pwd) export ROS_PACKAGE_PATH$ROS_PACKAGE_PATH:$(pwd)/Tools/simulation/gazebo…...
前沿分享-鱼形机器人
可能并不太前沿了，是21年底的新闻了，但是看见了就顺便发一下吧。 大概就是，通过在pH响应型水凝胶中编码不同的膨胀速率而构建了一种环境适应型变形微机器人,让微型机器人直接向癌细胞输送药物从而减轻药物带来副作用。 技术原理是，…...
摄像机终端IP地址白名单配置流程
海康摄像头配置白名单流程 1.登录海康摄像机前端 2.进入配置-系统-安全管理-IP地址过滤 3.IP地址过滤方式选择“允许” 4.点击添加按钮输入对应的IP地址或者IP网段 5.最后勾选启用IP地址过滤，然后保存 大华摄像头配置白名单流程 1.登录大华摄像机前端 2.进入设…...
Glibc—查看版本
方式1：直接查看ldd版本 ldd --versionldd (Buildroot) 2.30 Copyright (C) 2019 Free Software Foundation, Inc. This is free software; see the source for copying conditions. There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICU…...
C++物理引擎Box2D的下载，编译，VS2013配置环境
文章目录 网站和下载地址编译工具：编译box2dhelloworld测试网站和下载地址 https://box2d.org/ 下载地址 https://hub.nuaa.cf/erincatto/box2d/tags 编译工具： 1.VS2013 2.cmake 下载地址 https://cmake.org/ 编译box2d 下载box2d源码2.4.0，解压。在box2d-2.4.0目录下…...
STL容器详解——map容器
一、map容器介绍 作为关联式容器的一种，map 容器存储的都是 pair 对象，也就是用 pair 类模板创建的键值对。其中，各个键值对的键和值可以是任意数据类型，包括 C 基本数据类型（int、double 等）、使用结构体…...
VR全景在建筑工程行业能起到哪些作用？
在建筑工程领域，数字化技术为行业的发展起到巨大的推动作用，虽然建筑施工行业主要是依赖于工人劳动力和施工设备，但是VR全景在该行业中方方面面都能应用，从设计建模到项目交付，帮助建筑师以及项目方更好的理解每个环节…...
P1257 平面上的最接近点对
题目 思路 详见加强加强版 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn4e510; pair<int,int> a[maxn]; int n; double d1e16; pair<int,int> vl[maxn],vr[maxn]; void read() { cin>>n;for(int i1;i<…...
8月1日上课内容 第一章web基础与http协议
dns与域名 网络是基于tcp/ip协议进行通信和连接的 应用层--传输层---网络层----数据链路层-----物理层 ip地址，我们每一台主机都有一个唯一的地址标识(固定的ip地址)，区分用户和计算机通信。 ip地址:32位二进制数组成的，不方便记忆 192.168.…...
Gson 添加数据默认值问题记录
问题：在用Gson add(key（string类型），value（必须是JsonElement子类））时发现，value 传了 "" 空字符串（非null），默认解析后返回null&#…...
利用Arthas+APM监控进行Java性能深度定位
大家可能都用过APM监控，包括开源的Skywalking、商用的卓豪（ZOHO）ManageEngine APM应用性能监控、以及云监控产品如听云（Server监控），这些APM监控产品大大方便了我们实时监控应用性能，并实现性能…...
【BASH】回顾与知识点梳理（十一）
【BASH】回顾与知识点梳理 十一 十一. 八至十章知识点总结及练习11.1 总结11.2 练习情境模拟题一：透过 grep 搜寻特殊字符串，并配合数据流重导向来处理大量的文件搜寻问题。情境模拟题二：使用管线命令配合正规表示法建立新指令与新变量。 该系…...
vue2-diff算法
1、diff算法是什么？ diff算法是一种通过同层的树节点进行比较的高效算法。 其有两个特点： 比较只会在同层级进行，不会跨层级进行。 在diff比较的过程中，循环从两边向中间比较。 diff算法在很多场景中都有应用，在vue中&…...
SpringBoot使用redis作为缓存的实例
目录 什么是缓存？ 缓存的作用？ 缓存的成本？ 实际项目中的应用 代码展示 什么是缓存？ 缓存就是数据交换的缓冲区（称作Cache [ kʃ ] ），是存贮数据的临时地方，一般读写性能较高。 缓…...
vue3使用vue3-seamless-scroll插件
1、局部引入 import vueSeamlessScroll from "vue-seamless-scroll"; 2、注册 components: { vueSeamlessScroll, }, 3、使用 <vue3-seamless-scroll :list"list1" class"scroll" step"0.2"><div class"item"…...
QT开发学习相关笔记
QT中配置文件读取 QT中使用的config文件为：xxx.ini文件,基本格式如下： 使用 QSetting（QT自带类）中的相关接口实现设置配置文件数据，或者读取数据。 读取配置文件路径设置如下，其中 iniPath为设置路径 ne…...
拆分PDBQT文件并将其转换为PDB格式
拆分PDBQT文件转为PDB格式 1. vina_split拆分PDBQT文件 假设你用AutoDock Vina做了对接，那么所有预测的结合构象都被放入一个多构象 PDBQT 文件中，如果需要拆分后进行可视化分析，那么Vina官方自带了vina_split来进行拆分。下面是vina_split…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）
1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心 首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...