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

vue3 解决背景图与窗口留有间隙的问题

        需要实现一个登录界面,login.vue的代码如下:

<script>
import { ref } from 'vue';export default {setup() {return {};},
};
</script><template><div id="login-container" class="login-container"><div id="container-left" class="container-left"></div><div id="container-right" class="container-right"></div></div>
</template><style scoped>
.login-container {display: flex;flex-direction: row;background: url('../assets/loginBk.jpg') no-repeat center;background-size: cover;height: 100vh;width: 100vw;justify-content: center;align-items: center;
}.container-left {flex: 2;height: 100%;width: 100%;
}.container-right {flex: 1;height: 100%;width: 100%;
}
</style>

        可以看到已经把背景图的宽高分别设置为100vw和100vh了(占满整个可视窗口),但实际运行时发现图片和窗口之间留一定间隙且出现了滚动条:

        于是去看一下检查页面,发现body标签的margin设置为了8px:

         想来应该是index.html中的body标签有默认的margin间隙,于是手动讲margin设置为0:

        改好后发现问题解决了:

 

相关文章:

vue3 解决背景图与窗口留有间隙的问题

需要实现一个登录界面&#xff0c;login.vue的代码如下&#xff1a; <script> import { ref } from vue;export default {setup() {return {};}, }; </script><template><div id"login-container" class"login-container"><di…...

Cesium for UE-04-一些说明

目前主要做webgis的工作&#xff0c;UE官方对web的支持截止到了4.23版本&#xff0c;即使是4.23版本之后的4.xx版本也有办法支持&#xff0c;已经有大佬开源了一些方法和工具&#xff0c;不再介绍。即使是4.23想要输出为h5&#xff0c;也是有一定的折腾门槛的。最重要的是【Ces…...

AIGC:开启智能创造的璀璨新篇章

在当今科技迅猛发展的时代浪潮中&#xff0c;人工智能&#xff08; Artificial Intelligence , AI &#xff09;已然历经了从早期的计算智能、感知智能逐步迈向认知智能的辉煌历程。而在这一进程中&#xff0c; AI 生成内容&#xff08; Artificial Intelligence Generated Con…...

计算机组成原理与系统结构——外部存储器

笔记内容及图片整理自XJTUSE “计算机组成原理与系统结构” 课程ppt&#xff0c;仅供学习交流使用&#xff0c;谢谢。 磁盘 磁盘是一个由非磁性材料构成的圆形盘片&#xff08;称为基片&#xff09;&#xff0c;上面涂抹可磁化材料。传统的基片一直是铝制或铝合金的&#xff0…...

如何使用 Browserless 抓取动态网站?

什么是动态网页&#xff1f; 动态网页是指其内容并非完全直接嵌入在静态HTML中&#xff0c;而是通过服务器端或客户端渲染生成的网页。 它可以根据用户的操作实时显示数据&#xff0c;例如在用户点击按钮或向下滚动页面时加载更多内容&#xff08;如无限滚动&#xff09;。这…...

第21~22周Java主流框架入门-Spring 2.SpringAOP面向切面编程

1.Spring AOP (Aspect-Oriented Programming) 1. 1. 什么是 Spring AOP&#xff1f; AOP&#xff08;面向切面编程&#xff09; 是 Spring 提供的一种可插拔的组件技术&#xff0c;允许我们在软件运行过程中添加额外的功能。场景&#xff1a;假设有两个模块&#xff0c;用户管…...

Flutter不常用组件----InteractiveViewer

在现代移动应用开发中&#xff0c;用户互动性是提升体验的关键。Flutter 提供了多种组件来帮助开发者实现丰富的交互功能&#xff0c;其中一个强大的组件便是 InteractiveViewer。它允许用户通过手势对内容进行缩放、平移和旋转&#xff0c;适用于需要用户查看大图、地图或者其…...

【LeetCode HOT 100】详细题解之二分查找篇

【LeetCode HOT 100】详细题解之二分查找篇 35 搜索插入位置思路代码(左闭右闭)代码(左闭右开) 74 搜索二维矩阵思路代码(左闭右闭) 34 在排序数组中查找元素的第一个和最后一个位置思路代码 33 搜索旋转排序数组思路代码 153 寻找旋转排序数组中的最小值思路代码 4 寻找两个正…...

管理篇(顶级思维模型(31个))(待做)

目录 一、成长进阶模型 二、优势探索模型 三、优势层次模型 四、人生定位模型 五、看懂人性模型 六、如何抉择模型 七、本质思考模型 八、心流模型 九、精力管理模型 十、高效沟通模型 十一、100%传递模型 十二、高效倾听模型 十三、高效表达模型 十四、精准提问模…...

十一、数据库配置

一、Navicat配置 这个软件需要破解 密码是&#xff1a;123456&#xff1b; 新建连接》新建数据库 创建一个表 保存出现名字设置 双击打开 把id设置为自动递增 这里就相当于每一次向数据库添加一个语句&#xff0c;会自动增长id一次 二、数据库的增删改查 1、Vs 建一个控…...

day02 -- docker

1.docker的介绍 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go语言 并遵从 Apache2.0 协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。容器是完全使…...

ecmascript标准

1. 简介 1.1. 概述 ECMAScript(简称ES)是JavaScript编程语言的一个标准化版本。它是为网络开发设计的一种轻量级的脚本语言,主要用于在网页上实现交互性和动态效果。ECMAScript是该语言的标准名称,而JavaScript是其最知名和广泛使用的实现。 1.2. 特点 跨平台性 :ECMAS…...

在Linux命令行中一行执行多个命令

原文地址链接: https://kashima19960.github.io/2024/10/22/Linux/在Linux命令行中一行执行多个命令/&#xff0c;一般有最新的修改都是在我的个人博客里面&#xff0c;所以在当前平台的更新会比较慢&#xff0c;请见谅&#x1f603; 前言 在shell中一个一个命令行&#xff0c…...

u盘快速格式化后怎么恢复文件:深入解析与全面指南

U盘&#xff0c;凭借其小巧便携、易于使用的特点&#xff0c;成为了我们日常生活中不可或缺的数据存储工具。然而&#xff0c;有时为了清除病毒、解决文件系统错误或准备存储新数据&#xff0c;我们可能需要对U盘进行快速格式化。但这一操作往往伴随着一个严峻的问题&#xff1…...

青少年编程能力等级测评CPA C++(二级)试卷(2)

青少年编程能力等级测评CPA C&#xff08;二级&#xff09;试卷&#xff08;2&#xff09; 一、单项选择题&#xff08;共20题&#xff0c;每题3.5分&#xff0c;共70分&#xff09; CP2_2_1&#xff0e;下列C程序段中&#xff0c;对二维数组arr的定义不正确是&#xff08; &…...

aws 把vpc残留删除干净

最近忘了把vpc 删干净导致又被收了冤大头钱 在删除vpc 的收发现又eni在使用&#xff0c;但是忘了是哪个资源在占用 先用命令行把占用的资源找出来停掉 使用 AWS 命令行界面&#xff08;CLI&#xff09;来查看 VPC 的使用情况 列出子网&#xff1a; aws ec2 describe-subnets …...

平衡二叉树最全代码

#include<stdio.h> #include<stdlib.h>typedef struct Node {int val;int height;struct Node *left;struct Node *right; }Node;//创建新结点 Node* newNode(int val) {Node *node (Node*)malloc(sizeof(Node));node->val val;node->height 1;node->l…...

数据库表的创建

运用的环境是pychram python3.11.4 创建一个表需要用到以下语法 注释已经写清楚各种语法的含义&#xff0c;记住缩进是你程序运行的关键&#xff0c;因为程序是看你的缩进来判断你的运行逻辑&#xff0c;像我这个就是缩进不合理导致的报错 那么今天分享就到这里&#xff0c;谢…...

【MySQL 数据库】之--基础知识

1. MySQL 数据库基础概念 数据库: 逻辑上存储和管理数据的集合。MySQL 是一个常用的关系型数据库管理系统。 2. 创建数据库 要创建一个新的数据库&#xff0c;可以使用 CREATE DATABASE 语句。 语法: CREATE DATABASE 数据库名; 示例: CREATE DATABASE my_database; 注意事…...

Flume面试整理-如何处理Flume中的数据丢失

在Apache Flume中,数据丢失是一个可能出现的严重问题,特别是在处理大规模数据时。数据丢失通常会发生在数据从Source(源)到Channel(通道),或从Channel到Sink(汇)传输的过程中。如果不处理得当,Flume的崩溃或网络故障可能会导致丢失的数据无法恢复。以下是几种常见的F…...

ROCm零基础入门实战指南:从环境搭建到高性能计算

ROCm零基础入门实战指南&#xff1a;从环境搭建到高性能计算 【免费下载链接】ROCm AMD ROCm™ Software - GitHub Home 项目地址: https://gitcode.com/GitHub_Trending/ro/ROCm AMD ROCm&#xff08;Radeon Open Compute&#xff09;是一套开源GPU计算平台&#xff0c…...

数学学习者的终极指南:如何高效利用开源资源库构建完整知识体系

数学学习者的终极指南&#xff1a;如何高效利用开源资源库构建完整知识体系 【免费下载链接】awesome-math A curated list of awesome mathematics resources 项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-math 在数字化学习时代&#xff0c;如何从海量的…...

实战:用MAF的“人机协同”功能,给你的AI工具调用加上一道安全锁(附C#代码)

企业级AI代理安全实践&#xff1a;基于MAF的人机协同审批架构设计 当财务系统自动驳回了一笔高管差旅报销&#xff0c;或是订单管理系统未经确认修改了客户历史数据时&#xff0c;企业往往需要付出高昂的信任成本来修复这类"自动化事故"。Microsoft Agent Framework&…...

3090显卡跑ChatGLM-6B LoRA微调:从内存溢出到完美运行的避坑指南

3090显卡实战&#xff1a;ChatGLM-6B LoRA微调显存优化全攻略 当24GB显存的RTX 3090遇上60亿参数的ChatGLM-6B模型&#xff0c;显存管理就像在悬崖边跳舞。本文将分享如何在这块消费级旗舰显卡上完成LoRA微调的全套实战方案&#xff0c;从版本控制到梯度优化&#xff0c;从错误…...

微信群消息监控系统进阶:如何用dataclass优化配置管理并实现热更新

微信群消息监控系统进阶&#xff1a;如何用dataclass优化配置管理并实现热更新 在开发长期运行的微信消息监控系统时&#xff0c;配置管理往往是后期维护的痛点。许多开发者初期会选择简单的字典或JSON文件存储配置&#xff0c;但随着功能迭代&#xff0c;硬编码的配置项、散落…...

3步告别卡顿:用鸣潮工具箱实现流畅游戏体验

3步告别卡顿&#xff1a;用鸣潮工具箱实现流畅游戏体验 【免费下载链接】WaveTools &#x1f9f0;鸣潮工具箱 项目地址: https://gitcode.com/gh_mirrors/wa/WaveTools 你的游戏还在卡顿吗&#xff1f;试试这个免费解决方案 你是否曾经在《鸣潮》的激烈战斗中遭遇突然的…...

ScintillaNET:打造专业级代码编辑器的终极Windows Forms解决方案

ScintillaNET&#xff1a;打造专业级代码编辑器的终极Windows Forms解决方案 【免费下载链接】ScintillaNET A Windows Forms control, wrapper, and bindings for the Scintilla text editor. 项目地址: https://gitcode.com/gh_mirrors/sc/ScintillaNET ScintillaNET是…...

CCF-CSP 39-2 水印检查(watermark)【C++】

题目 https://sim.csp.thusaac.com/contest/39/problem/1https://sim.csp.thusaac.com/contest/39/problem/1 思路参考&#xff1a; 80分 暴力求解&#xff0c;遍历所有可能的k&#xff0c;检验是否满足条件&#xff0c;可得80分 时间复杂度&#xff1a;O(L*n^2)&#xff0…...

别再被MPU6050的偏航角坑了!手把手教你用MPU9250(或外接HMC5883L磁力计)彻底解决零飘问题

彻底解决MPU6050偏航角零飘&#xff1a;硬件升级与磁力计融合实战指南 在无人机、平衡车和机器人姿态控制领域&#xff0c;MPU6050曾是许多开发者的首选惯性测量单元(IMU)。这款经典的六轴传感器以低廉的价格和稳定的性能赢得了市场&#xff0c;但它的一个致命缺陷让无数工程师…...

Youtu-Parsing镜像免配置:预置outputs目录权限+日志轮转自动配置

Youtu-Parsing镜像免配置&#xff1a;预置outputs目录权限日志轮转自动配置 1. 引言&#xff1a;告别繁琐配置&#xff0c;专注文档解析 如果你用过一些AI模型&#xff0c;肯定遇到过这样的麻烦&#xff1a;好不容易把服务跑起来了&#xff0c;结果发现生成的图片没地方保存&…...