快捷导航
蚂蚁部落 网站首页 实例代码 谷歌工具 查看内容

谷歌开发者工具调试CSS样式

2018-4-12 16:07| 发布者: admin| 查看: 69| 评论: 0|来自: 蚂蚁部落

通过谷歌开发者工具可以在线编辑HTML代码,具体参阅谷歌开发者工具在线编辑HTML代码一章节。

当然也可以在线编辑或者添加CSS样式,下面结合图示做一下介绍。

一.修改CSS代码:

鼠标悬浮于要修改CSS代码的元素之上,然后鼠标右击,点击检查:

a:3:{s:3:\"pic\";s:43:\"portal/201804/12/170248ed8k4rksw1kkeh4z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击检查,打开谷歌开发者工具,当前元素呈现变色显示,并且会定位于相应css代码处:

a:3:{s:3:\"pic\";s:43:\"portal/201804/12/170454it9c01yzy2ib4rj6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然后点击右侧的CSS代码进行修改即可,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201804/12/170624yiqmiimagmo4euox.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

将block修改为了inline。

二.添加CSS代码:

很多时候修改现有的CSS代码是不够的,需要添加CSS代码:

(1).修改引入的CSS文件:

右击引入的CSS文件,然后点击open sources in panel,弹出如下界面:

a:3:{s:3:\"pic\";s:43:\"portal/201804/12/171238u23x273lt7ll3lx8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然后你就可以在上面随意的编辑修改了。

(2).修改页面内部样式表:

这个就将其当做HTML代码处理即可,右击弹出如下界面:

a:3:{s:3:\"pic\";s:43:\"portal/201804/12/171628ohm549s41h1m3k1h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然后弹出如下界面:

a:3:{s:3:\"pic\";s:43:\"portal/201804/12/171704mp9f0s92535p9zig.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然后就可以愉快的修改CSS代码了。

三.添加样式类:

可以编辑HTML代码的方式来添加样式类,谷歌也提供另一种方式:

选中指定的元素,然后点击.cls按钮,在弹出框中写入class名称即可:

a:3:{s:3:\"pic\";s:43:\"portal/201804/12/172153pylcb1mckgmc0ydd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

这时候,再点击右侧的加号(+),即可为此样式类编写css代码了:

a:3:{s:3:\"pic\";s:43:\"portal/201804/12/172231ifzlzmroaozl57rx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-21 10:04 , Processed in 0.094231 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部