创建vue项目，页面四周都有白边，无法铺满整个页面

最新推荐文章于 2024-04-18 20:20:27 发布
最新推荐文章于 2024-04-18 20:20:27 发布
阅读量4.9k 收藏 4
点赞数 12
分类专栏： 项目问题记录 文章标签： html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60967241/article/details/124459408
版权

创建了vue项目，但是发现每个页面四周都有白边，不能铺满整个页面窗口，如图所示

然后查看页面的elements元素，发现body里的样式里，默认设置了margin：8px,如下图所示。

 

然后在创建的vue项目里找到 index.html 页面（我的在public文件夹里），然后在body标签里设置margin属性，如图所示

 把原来默认的属性覆盖掉，之后就没有显示白边了，可以铺满整个页面

爱吃洋芋的土豆
关注
  • 12
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 白边 项目_Cesium+Vue应用【转载】
weixin_35763787的博客
02-11 339
VUE中搭建cesium基于Webpack将Vue-cli脚手架与Cesium库整合Node.Js和Webpack安装等就不累述了，直接初始化一个Vue项目安装Cesium环境npm install cesiumWebpack配置使用过Cesium的同学都知道它是一个非常复杂的库，很难去直接打包我们无法通过在main.js中像引入Vue那样直接进行引入Cesium手动复制Cesium编译好的静态文...
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
尝试解决vue网页的偏移/白边
weixin_69988447的博客
03-18 623
自己找的方法，不知道会不会有隐患，非学习目的慎用
Vue3去除body默认样式，去除白边
最新发布
2301_80272947的博客
04-18 491
在项目src目录下新建styles文件夹，在styles下新建reset.scss 的文件将下面的代码复制进去。然后在 项目根目录找到index.html，在里面添加代码。在进行Vue3搭建时，默认样式会出现白边。
解决vue页面四周有白边的问题
liuxy_236的博客
12-19 6828
在export default的代码中添加如下代码，设置body的属性margin:0和padding:0 beforeRouteEnter(to, from, next) { // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题 document.querySelector('body').setAttribute('style', ...
vue——去除白色边框
zhiqingxue的博客
12-07 3104
Vue去白边
vue的边距怎么设置_Vue项目，最近在做一个网站项目，遇到一个body页面布局四周留白的问题，以下是解决方法：...
weixin_39664995的博客
12-18 2134
最近在做一个网站项目，遇到一个body页面布局四周留白的问题，以下是解决方法：1、需求负责人在查看效果时，发现body页面布局的四周留有空白，认为影响美观，让其去掉四周留白。2、项目环境项目中使用的是 vue + vue cli + element ui 搭建3、解决过程3.1 这是页面渲染出来的效果，四周有明显的留白，并且图片两侧的留白有两层；image.png3.2 打开F12控制台后，发现...
vue项目如何刷新当前页面的方法
08-27
在 Vue 项目中，刷新当前页面有多种方法，但是这些方法都存在一些问题： 1. 使用 Vue-Router 重新路由到当前页面，页面是不进行刷新的。 2. 采用 `window.reload()` 或者 `router.go(0)` 刷新时，整个浏览器进行了...
vue项目添加多页面配置的步骤详解
10-16
本文将详细介绍如何在已有的Vue项目中添加多页面配置，无需调整现有目录结构。 首先，我们需要理解为什么要进行多页面配置。在初始创建Vue项目时，通常只有一个默认的入口文件（如`src/main.js`），它对应的HTML...
Vue-cli创建项目从单页面到多页面的方法
08-29
下面将介绍如何将Vue-cli创建的单页面项目转换为多页面项目。 首先，需要下载依赖项glob，使用命令`npm install glob --save-dev`。然后，需要修改三个文件：`webpack.base.conf.js`、`webpack.dev.conf.js`和`...
基于Vue.js的SSM项目Furn前端页面源码
03-25
本项目是基于Vue.js框架开发的SSM项目Furn的前端页面源码。主要采用JavaScript语言，整合了Vue.js、HTML和CSS技术。 技术构成： - JavaScript：核心逻辑与交互实现 - Vue.js：前端框架，用于构建响应式、组件化的...
vue学习笔记 vue页面四周留有空白问题
xjcwzp的专栏
07-12 2146
参考：vue组件顶部留有空白问题 vue3新建项目后，发现页面四周有留白 解决办法： 修改index.html样式 添加样式 <style> body{ margin:0; padding:0; } </style> index.html 如下 <!DOCTYPE html> <style> body{ margin:0; padding:0; } </style&gt
去除vue自带的边距
qq_66061193的博客
03-29 1831
新建一个vue项目的时候，都会自带一个外边距，如何消除外边距呢？首先找到public下的index.html。插入以下代码，就可以消除边距啦~
vue在ios返回上一路由白屏
你蠢哭我咯的博客
06-04 6185
原文链接 问题描述： 进入A页面——&gt;B页面——&gt;ios自带的返回——&gt;白屏出现——&gt;手动点击白屏处——&gt;问题解决 原因是，经过排查，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩 解决的理论：用于最重要的html 容器是container，然而因...
vue2.0组件边界情况处理
叶子树的博客
11-16 370
访问元素 & 组件 访问根实例 在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问。例如，在这个根实例中： // Vue 根实例 new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } } }) 所有的子组件都可以将这个实例作为一个
vue竖向滚动背景颜色不能填满 滚动后页面下方出现空白问题解决
huaiyingdetective的博客
03-13 5620
一开始只能让无滚动条页面竖向背景颜色填充满，通过： App.vue <template> <div id="app"> <!-- 路由的出入口，路由的内容将被显示在这里 --> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style>.
vue中页面铺不满的问题，以及怎样修改element-ui样式
weixin_48687415的博客
12-16 2592
怎么解决vue中，html，body铺不满屏幕的问题，就是对于撑开的部分html，body没有覆盖掉，这样可以通过新建一个css文件， 设置html，body的宽高，然后在引入，需要的文件中
vue实现动态获取左侧导航宽度，右侧内容动态改变margin值
可可爱爱的你吖的博客
08-26 3496
vue实现动态获取左侧导航宽度，右侧内容动态改变margin值
写一个vue前端登录页面的背景图片铺满整个屏幕的代码
09-04
### 回答1： <template> <div class="login-background"> <img src="background.jpg" alt="Background" style="width:100%;height:100vh;object-fit:cover;"> </div> </template> ### 回答2： 在Vue前端项目中，可以使用以下代码实现登录页面背景图片铺满整个屏幕的效果。 1. 在Vue组件的样式文件中，添加如下样式代码： ```CSS <style scoped> .login-container { background-image: url('../assets/login-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; height: 100vh; } </style> ``` 2. 在Vue组件的模板中，将登录页面的内容包裹在一个具有类名`login-container`的容器内: ```HTML <template> <div class="login-container"> <!-- 登录页面的内容 --> </div> </template> ``` 3. 将登录页面的背景图片`login-bg.jpg`放置在项目的`assets`目录下。 以上代码实现了将背景图片铺满整个屏幕，并居中显示在登录页面上。其中，`background-image`属性用于设置背景图片的URL，`background-repeat`属性用于设置背景图片的重复方式，`background-size`属性用于设置背景图片的大小，`background-position`属性用于设置背景图片的位置，`display: flex`通过flex布局使得登录页面内容垂直水平居中，`height: 100vh`用于设置容器的高度为整个屏幕的高度。 ### 回答3： 在Vue前端登录页面中，可以使用以下代码实现背景图片铺满整个屏幕： 在HTML模板中添加如下代码： ```html <template> <div class="login-container"> <!-- 页面内容 --> </div> </template> ``` 在CSS样式中添加如下代码： ```css <style> .login-container { /* 设置页面高度为100% */ height: 100vh; /* 设置背景图片，并设置其大小和位置 */ background-image: url(背景图片的URL); background-size: cover; background-position: center; } </style> ``` 在以上代码中，`.login-container` 类用于设置登录页面容器的样式。通过将容器的高度设置为`100vh`来使其占满整个屏幕。`background-image`属性用于设置背景图片的URL地址，`background-size`属性将背景图片的大小设置为铺满容器，`background-position`属性用于调整背景图片的位置居中。 请将代码中的`背景图片的URL`替换为你想要使用的背景图片的URL地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值