05. Vuepress1.x CSS 样式覆盖：修改内容宽度

最新推荐文章于 2024-04-07 20:26:00 发布
最新推荐文章于 2024-04-07 20:26:00 发布
阅读量3.7k 收藏 4
点赞数 4
分类专栏： 《Vuepress 1.x 和 2.x》 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31213021/article/details/113185110
版权

目录

一、原始样式

二、修改

三、其它修改

一、原始样式

可以看见左右两侧的红框是空白的

开发者工具中可以看到页面的 .theme-default-content 限制了最大 width

二、修改

1、.vuepress 文件夹下创建 styles/palette.styl （这里使用 stylus）

2、重置取消 max-width 设置，classname 直接从 开发者工具 中复制 即可

3、注意：新建文件后一定要重启，刷新是无效果的

4、效果图如下

PS：其它样式覆盖也可以这样使用；

三、其它修改

修改一级标题颜色

AvatarGiser
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vant+vue初始化移动端项目，border样式重置：border.css
05-05
vant+vue初始化移动端项目，border样式重置：border.css
清除修改删除Vue自带的CSS样式
03-17
清除删除修改Vue自带的CSS样式，在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色，后来发现是Vue自带了默认的CSS样式导致的，只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。
Vuepress样式修改内容宽度
lvweizhu的专栏
09-07 1104
一般所在目录node_modules\@vuepress\theme-default\styles\wrapper.styl。2、调整宽度，截图中是已经调整好的，在我电脑上显示刚刚好。
vitepress系列-05-其他优化设置
最新发布
东东爱编码博客
04-07 438
root {
vue自定义全局css样式loading组件.zip
04-16
vue自定义全局css样式loading组件，1、不用gif图片，直接用css样式实现进度条效果 2、用js文件将组件vue进行封装，封装两个全局方便，打开和关闭 3、main.js引用定义的js文件，实现全局引用
vuepress-theme-bulma:VuePress的纯Bulma.css主题
05-16
Vuepress主题保加利亚 VuePress的Bulma.css主题 演示： : npm： ：//www.npmjs.com/package/vuepress-theme-bulma Buefy的演示： : 安装 npm install --save vuepress-theme-bulma 布菲工具 要使用buefy，请参见分支buefy-demo以及如何实现，请参见提交 配置 请参见示例 前题 请参阅
VuePress搭建博客教程(六)、vuepress配置head和自定义样式
JingLisen的博客
08-22 3489
VuePress搭建博客教程(六)、vuepress配置head和自定义样式 小景哥哥博客 一、创建public文件夹 在.vuepress目录下创建public文件夹，在public文件夹下存入两个文件Beauty.jpg和icon.jpg，分别用于主界面的图标和head的图标。 在config.js中引入icon.jpg的head图标： head: [ ["link", {rel: "icon", href: "/icon.jpg"}] ] 在docs下面的README.md主页文件中引入Be
Vuepress 在 markdown 中对多个 table 设置不同的宽度
前端技术
04-21 1615
markdown 文件中定义了 3 个 table ，在 table 外添加 div 和对应的 class。 // markdown 文件 <div class="table-01"> | 参数 | 说明 | 类型 | |:----:|:---:|:----:| |name|姓名 |String| |age|年龄 |Number| |salary|薪水 |Number| </div> <div class="table-02"> | 参数 |
vitepress 最详细教程之Home Page的配置
ox4f5da2的博客
02-12 2952
vitepress 教程之教大家配置一个好看的主页，全网最详细手把手从 0 开始，小白包教包会
VuePress初学之利用模板theme创建一个个人博客网站
孙君的空间站
12-24 2338
基本学习了和html还有CSS相关的知识，了解了Vue的部署，简单写了个页面发布在自己的云服务器上，现在想要搭建一个更精致的页面，通过搜索了解到还有一个VuePress这个东西，是一个静态网页发布器，基于Vue，学习试一下本文属于原创文章，转载请著名作者出处并置顶！！
如何解决vuepress部署出现样式问题
我的博客
03-25 5939
以前在安装hexo的时候出了样式问题，现在用vuepress也出现了相同的问题。 本地测试完全可以 然而打包之后就彻底乱了 即使是自己本地打包成dist之后也会出现相同的问题 有点困扰，应该是打包配置的问题 ...
vue-tailwindcss-cdn:Vue 3.x + Tailwind 2.x (cdn) :high_voltage:
05-29
Vue 3.x + Tailwind CSS 2.x （来自 CDN） :high_voltage: 这是一个用于快速原型制作HTML文件，其中包括： Vue 3.x 顺风 CSS 2.x 插件@tailwindcss/forms 插件@tailwindcss/typography 插件@tailwindcss/aspect-ratio 插件@tailwindcss/line-clamp 间变字体 不错的按钮:) 奖金 生产环境的入门模板 具有类似堆栈的（Vue 3.x + Tailwind 2.x + Inter var 字体）
blog:用Vuepress和Tailwindcss编写的网站
04-11
--- home: true heroText: Jen Looper title: Jen Looper tagline: [ {'title': 'Developer Advocate'}, {'title': 'Speaker and Author'}, {'title': 'Builder of Interesting Things'}] layout: HomeLayout ] ---
myCss:基于 vuepress 搭建的教程类网站，内容以 css + demo 为主。目前主要为 css 揭秘 阅读笔记，30秒理解的 css 翻译
05-13
说明 本站内容为 ： 阅读笔记， 中文翻译。 仅供学习使用。如若侵权，请及时联系 其中 css 揭秘，笔记风格如下： 标题 第一步，发布挑战： :::tip 描述挑战的内容，即要实现的效果 ::: 效果 第二步，基于 vuepress 的 Component 生成的例子。在 .vuepress/component 目录下。 接着一般会给出 css 揭秘官方 DEMO 思路 第四步，根据例子会给出核心思路，如下： 透明颜色可使用 rgba 或 hsla 通过 background-clip 修改背景裁剪位置，默认是 border-box。 border: 10px solid hsla(0, 0%, 100%, 0.5); background-clip: padding-box; 随书相关链接 规范 CSS 值与单位 CSS 文本装饰 CSS 文本（第四版） CSS 文本 CSS 字体
vuepress build 后样式，css丢失
大白的博客
01-16 2947
vuepress build 后样式，css丢失 base: ".", 这里加个. 就好了
vuepress 使用与主题自定义样式修改
热门推荐
小不点的博客
07-16 2万+
1.VuePress是什么？（直接上效果图） vuepress中文网：http://caibaojian.com/vuepress/guide/ 2.安装vuepress # 初始化 npm npm init -y # 安装 yarn global add vuepress # 或者：npm install -g vuepress # 新建一个 docs 文件夹 mkdi...
前端Vue页面布局内容区域如何设置宽度content内区
m0_49714202的博客
07-04 856
前端Vue页面布局内容区域如何设置宽度content内区
MarkDown的使用简介
小仙儿
11-20 3295
MarkDown的使用简介 1、MarkDown概述 1.1、什么是MarkDown MarkDown是一种轻量级标记语言，使用易读易写的纯文本格式编写文档。 2004年由约翰·格鲁伯创建。使用MarkDown编写的文档可以导出HTML、Word、图像、PDF、Epub等多种格式的文档。MarkDown编写的文档，后缀名为.md或.markdown。 当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。甚至一些软件也集成了MarkDown功能，比...
关于vuepress打包之后页面样式丢失问题两种解决方案
Blog_Bridge
03-02 2857
解决方案有两种，可以自行选择，vuepress的路由模式写的是history模式，所以解决方案主要是面向两种不同模式（hash / history）
一个.vue组件中deep修改的css会影响别的.vue组件吗
05-27
一般情况下，一个.vue组件中deep修改的css不会影响别的.vue组件。因为.vue组件通常都是通过组件作用域（scoped）来实现样式隔离的。也就是说，每个.vue组件的样式只会影响到当前组件内部的元素，而不会影响到其他组件或全局的样式。但是，如果你在使用deep选择器时使用了非常通用的选择器（比如 *），或者在.vue组件中使用了类似于 `:global` 这样的全局样式声明，则可能会对其他组件造成影响。因此，在编写.vue组件样式时，最好还是遵循组件作用域的原则，避免对其他组件造成不必要的影响。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值