CSS如何调试?

html-css016

CSS如何调试?,第1张

1.我们以谷歌浏览器为例,来讲讲怎么调试CSS。先打开谷歌浏览器,看截图里的红色箭头,点击“工具”,点击“开发者工具”,就打开调试工具了,也可以按下快捷键F12来打开调试工具;

2.打开的调试工具如下图所示:

3.我们就以百度的首页为例,看看调试效果。看截图,点击那个“抓取元素”的按钮,来获取要审查的元素;

4.看截图,出现下面的界面后,点击“style”,单击那个对勾,就可以看到效果了;

5.我去掉一些样式之后,就出现了下面的效果,看截图;

1、在浏览器中打开要调试的网页,使用快捷键F12。

2、在弹出的工具窗口中,默认是在Dom Explorer功能,列出网页的源代码和CSS样式列表。

3、使用元素定位功能选择页面中的一个元素同时也定位到源代码中位置,比如百度首页的"网页"元素。

4、对定位到的文字修改CSS样式,添加inline style,比如把字体变红色。也可以手工修改其他已经存在的样式。

5、查看元素已经应到到的CSS样式,点击"computed"菜单。

6、查看元素的布局信息,点击"Layout"菜单。