浏览器调试css后，如何快速保存自己的修改？

最新推荐文章于 2024-11-26 23:41:50 发布

MillionMile

最新推荐文章于 2024-11-26 23:41:50 发布

阅读量9.9k

点赞数 1

分类专栏：实用前端文章标签： css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/weixin_38125045/article/details/107815200

版权

实用同时被 2 个专栏收录

8 篇文章

订阅专栏

3 篇文章

订阅专栏

有时候样式不合心意，想要直接在浏览器中调试一下，直接看清效果。调试是方便了，可是刚才改了哪些样式？东找找西找找，是不是还有什么遗漏的？下面来提供一种方便保存自己修改css的内容，告别记忆时代。

以下调试视图基于 QQ浏览器对www.baidu.com进行，Google浏览器亦可实现同样操作

1. F12进入到调试模式，选中Elements选项卡
在这里插入图片描述

2. 点击调试页面上左上角的“选择元素”图标后，点击自己所要修改的元素，比如我要修改“百度一下”按钮，操作如下图所示
在这里插入图片描述

3. 根据下图步骤，对“百度一下”按钮做出对应的修改
在这里插入图片描述

4. 还有其他要修改的元素，重复2~3步即可
在这里插入图片描述

5. 怎么找到刚才修改的样式？点击一下下图所示位置即可
在这里插入图片描述

6. 你可以将该css直接复制到自己的代码上，也可以直接save as保存到本地文件中
在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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