首页 文章资讯 Code Cola,CSS样式可视化Chrome插件,即时修改浏览器网页效果

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

发布者 : may

1353

2020-01-05

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


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


Code Cola 插件

Code Cola

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

下载


扩展功能


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


下载安装


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


使用方式


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



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




3、字体更改。


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


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



4、更改页面背景。


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




5、其他元素更改。


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




6、撤销更改。


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


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


Code Cola 插件

Code Cola

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

下载

分享

全部评论

    展开更多评论

    扩展迷QQ交流群

    错误提示保存失败
    成功提示保存成功
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“插件”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功
    下载遇到问题?请添加QQ群:398095333
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“脚本”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功