css总结
记录做项目经常会写到的css
1、左边导航栏固定,右边div占满剩余宽度
<template><div class="entrance"><div class="left"></div><div class="right"><div class="content"></div></div></div>
</template>
<style scoped>.entrance {display: flex;height: 100%;}.left {width: 300px;//左边固定宽度height: 100%;background: gray;}.right {height: 100%;width: 100%;padding: 26px;box-sizing: border-box;//不设为border-box,盒子的宽度加上padding会超出剩余宽度}.content {background: rgb(101, 69, 138);height: 100%;width: 100%;}
</style>

2、让两个按钮固定在右边(div靠右)
第一种:父盒子设置text-align: right;

第二种:浮动float
右浮动所有的盒子都会从右边开始浮动,所以这里的顺序跟实际页面代码相反
<div class="content"><el-button class="cancel">取消</el-button><el-button type="primary" class="confirm">确认</el-button></div>.content {background: rgba(210, 208, 212, 0.801);height: 100%;width: 100%;/* text-align: right; */}.confirm {float: right;}.cancel {margin-right: 10px;float: right;}

注意:开启浮动的盒子,下面的盒子会顶上去,如下图

我们得清除浮动
.bottom {width: 100%;height: 100px;background: green;clear: both;}
第三种:margin-left:auto
::v-deep .el-button--default {margin: 10px 10px 10px auto;}::v-deep .el-button--primary {margin: 10px 0 10px;}

3、el-form label与输入框换行
el-form label默认与输入框在同一行。若是要换行

<el-form :model="formInline" class="groupForm"><el-form-item label="审批人"><el-input v-model="formInline.user" placeholder="审批人" width='300px'></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="formInline.region" placeholder="活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form>.groupForm {width: 200px;}::v-deep .groupForm .el-form-item__label {color: #171717;font-size: 15px;text-align: left;float: none;word-break: break-word;opacity: 0.7;}::v-deep .groupForm .el-form-item {margin-bottom: 10px;}::v-deep .groupForm .el-form-item__label::after {content: '*';color: #dd1515;font-size: 20px;vertical-align: sub}
相关文章:
css总结
记录做项目经常会写到的css 1、左边导航栏固定,右边div占满剩余宽度 <template><div class"entrance"><div class"left"></div><div class"right"><div class"content"></div>…...
[C语言]排序的大乱炖——喵喵的成长记
宝子,你不点个赞吗?不评个论吗?不收个藏吗? 最后的最后,关注我,关注我,关注我,你会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要…...
Docker 网络与Cgroup资源限制
目录 一、Docker 网络实现原理: 二、Docker 的网络模式: 三、网络模式详解: 1. host模式: 2. container模式: 3. none模式: 4.bridge模式: 5.自定义网络: 四、Cgroup资源控制: …...
D - United We Stand
思路: (1)题目要求将集合A划分为B,C两组,使得C中任意数都不是B中的除数 (2)直观感受,只要让C中数比B中大,则满足条件,不妨只取最大的放入C中; …...
【1.总纲】
目录 知识框架No.0 总纲安排No.1课程安排一、目标二、内容三、 学到 No.2 深度学习介绍一、AI地图二、图片分类三、物体检测和分割四、样式迁移五、人脸合成六、文字生成图片七、文字生成-GPT八、无人驾驶九、广告点击 No.3 安装No.3 安装 知识框架 No.0 总纲安排 B站网址&…...
I/O模型之非阻塞IO
简介 五种IO模型 阻塞IO 非阻塞IO 信号驱动IO IO多路转接 异步IO 代码书写 非阻塞IO 再次理解IO 什么是IO?什么是高效的IO? 为了理解后面的一个问题,我们首先要再重新理解一下什么是IO 在之前的网络介绍中ÿ…...
2023版 STM32实战11 SPI总线读写W25Q
SPI全称 英文全称:Serial peripheral Interface 串行外设接口 SPI特点 -1- 串行(逐bit传输) -2- 同步(共用时钟线) -3- 全双工(收发可同时进行) -4- 通信只能由主机发起(一主,多从机) 开发使用习惯和理解 -1- CS片选一般配置为软件控制 -2- 片选低电平有效,从…...
Spring Security认证源码解析(示意图)
建议先看完Spring Security总体架构介绍和Spring Security认证架构介绍,然后从FilterChainProxy的doFilterInternal函数开始,配合文章进行debug以理解Spring Security认证源码的执行流程。 在之前的Spring Security认证架构介绍中,我们已经知…...
2023.10.22 关于 定时器(Timer) 详解
目录 引言 标准库定时器使用 自己实现定时器的代码 模拟实现的两大方面 核心思路 重点理解 自己实现的定时器代码最终代码版本 引言 定时器用于在 预定的时间间隔之后 执行特定的任务或操作 实例理解: 在服务器开发中,客户端向服务器发送请求&#…...
【STM32】GPIO控制LED(寄存器版)
在开始之前记得先准备好环境: STM32F103核心板下载教程.pdf 林何/STM32F103C8 - 码云 - 开源中国 (gitee.com) 一、STM32的GPIO模块数据手册详解 每个GPIO端口对应16个引脚,例GPIOA(PA0~PA15)内核cpu就可以通过APB2总线对寄存器…...
Spring Boot OAuth 2.0整合—高级配置
一、概述 HttpSecurity.oauth2Login() 为定制OAuth 2.0登录提供了大量的配置选项。主要的配置选项被分组到它们的协议端点对应处。 例如,oauth2Login().authorizationEndpoint() 允许配置授权端点,而 oauth2Login().tokenEndpoint() 允许配置令牌端点。…...
软考-虚拟专用网原理与应用
本文为作者学习文章,按作者习惯写成,如有错误或需要追加内容请留言(不喜勿喷) 本文为追加文章,后期慢慢追加 by 2023年10月 虚拟专用网概念 虚拟专用网(Virtual Private Network)是一种通过…...
clock_property 时钟的常用属性
get_property [get_clocks] property_option 1. period get_property [get_clocks] period 查询所有clock 的周期,如果存在loops会生成CTE_loops.rpt 2.clock_network_pins 查询clock所有的pins 3.generated_clocks_extended 查询clock分频产生的generate…...
平板有必要买触控笔吗?推荐的ipad手写笔
iPad之所以能吸引这么多人,主要是因为它的功能出色。用来画画、做笔记,也是一种不错的体验。但如果只是用来看电视和打游戏的话,那就真的有点大材小用了。如果你不需要昂贵的苹果电容笔,也不需要用来专业的绘图,那你可…...
Qt扫描-QMoive 理论总结
QMoive 理论总结 一、概述二、使用1. 使用2. 信号发出时机 三、控制的相关槽函数四、信号 一、概述 QMovie类是一个使用QImageReader播放 动画 的方便类。这个类用于显示没有声音的简单动画,一般即是 gif 动画。如果要显示视频和媒体内容,请使用Qt Mult…...
类似东郊到家预约家政保洁小程序搭建
随着生活水平的提高,人们对健康养生的需求越来越重视,按摩作为一种传统的养生方式,备受关注。为了方便用户快速、方便地预约按摩服务,本文将介绍一款按摩预约小程序的开发。 首先,我们通过市场调研和分析发现…...
[补题记录] Atcoder Beginner Contest 325(E、F)
URL:https://atcoder.jp/contests/abc325 目录 E Problem/题意 Thought/思路 Code/代码 F Problem/题意 Thought/思路 Code/代码 E Problem/题意 有一个二维矩阵,D[i][j] 表示从 i 到 j 的距离。从 i 到 j 有两种方式: 坐汽车&…...
1024啊啊啊啊啊啊
1024 程序员节快乐,没什么想发的,只是想要个1024胸章。...
淘宝商品详情API接口(H5端和APP端),淘宝详情页,商品属性接口,商品信息查询
一、接口参数说明:提取淘宝商品详情页各项数据,包含skuid、价格、收藏数、加购数、月销售量、主图、标题、详情页图片等页面上可以看奥的数据都可以拿到。 点击获取key和secret 二、使用场景 1、商品销售情况分析,根据销量调整活动方案&am…...
JVM的几个面试重点
JVM的内存区域划分 JVM类加载机制 前言 Java程序最开始是一个 .java 的文件,JVM把它编译成 .closs 文件(字节码文件),运行 Java 程序, JVM 就会读取 .class 文件,把文件内容读取到内存中,构造出…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
