html样式调整器,Code Cola,CSS样式可视化Chrome插件,即时修改浏览器网页效果

Code Cola是一个能够查看网页代码样式的可视化CSS样式chrome扩展插件。

在浏览原生网页的时候,是无法对网页设计就行修改的,但也会遇到需要调整当前网页布局、更改展示样式的情况,这种时候就可以借助这款chrome扩展插件——Code Cola。

6c82b9a3d5d97454ec6e6309211f08ef.png

Code Cola是一个可视化编辑在线页面css样式的chrome插件。

下载

扩展功能

Code Cola扩展程序提供给用户查看网页版块中所有元素的功能,并支持通过配置到服务器上的文件进行在线编辑。包括网页颜色、网页背景、网页遮罩、文字阴影、字体字号行高等,修改后能在浏览器内实时展示修改效果,但这并不是直接修改原网页,而是对当前页面进行即时展示处理。

下载安装

通过当前页面下载Code Cola离线安装包,打开扩展程序内的开发者模式,将解压后的crx文件拖拽至扩展程序管理,选择添加扩展,即可安装。

使用方式

1、扩展程序安装完毕后,打开任意网页,点击浏览器工具栏的扩展图标,则会弹出Code Cola窗口,通过这个窗口可以查看整个网页样式代码。

d860bf95a824547c33a5388978669593.png

2、可以通过移动鼠标来进行版块的选择,选中的版块则会加上蓝色的蒙层,点击则可以对当前选中版块进行样式更改。

04a35a68fe18923940b62ca795ef05c6.png

3、字体更改。

简单说明下字体更改功能,首先选中需要调整的字体版块,然后选中“字体”栏,点击下拉展开所有字体样式,点选目标字体,之前通过蓝色蒙层选中的区域就会变成调整后的字体。

字体、行高、字色、字形都可以这样同理设置。

94dc372b732d309d93795a9ef548ba26.png

4、更改页面背景。

如需更换页面背景,可以通过背景——选择文件,来自定义当前页面的背景图片。

58b06286c0cc68644419751ac5fbbe00.png

5、其他元素更改。

除了上诉提到的几个功能外,Code Cola扩展还支持对齐方式、文字阴影、文字描边、线性渐变、透明度、盒阴影、遮罩、反射、变形、边框、圆角、布局进行设置。都是通过对对应参数的调整来进行更改的。

25125395b6ff315634511001bdfd843c.png

6、撤销更改。

你也可以随时关闭效果,点击“关闭”功能,就会恢复为原网页的效果。

通过Code Cola扩展可以即时修改网页HTML与CSS的样式代码,实现文字样式背景颜色、边框效果等基础元素的自定义。

6c82b9a3d5d97454ec6e6309211f08ef.png

Code Cola是一个可视化编辑在线页面css样式的chrome插件。

下载

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值