软件系统

Firefox浏览器最佳调试插件FireBug

LensNews

Firefox+FireBug是萨龙龙认为最佳的前端开发调试工具,在前端开发中起到事半功倍的作用。

萨龙网络最新的原创新闻类主题LensNews上线有一段时间了,期间修复了很多问题,也收到很多用户的反馈意见。说的比较多的字体的大小问题,这次更新也只添加了文章正文的字体选项,因为要添加的选项太多,而且主题也提供了自定义CSS编辑器,所以教大家如何修改添加自定义CSS。

添加CSS代码首页得获取元素,通过Firefox+FireBug就很方便的可以查看。

一、安装Firefox+FireBug

1、Firefox浏览器就到官网下载安装

2、打开Firefox浏览器,点击右上角最右侧的按钮,再点击获取组件,进入附加组件管理器,如下图:
Firefox浏览器最佳调试插件FireBug
3、点击左侧菜单中的扩展,然后在右侧的输入框中输入FireBug进行搜索并安装,需要重启浏览器,如下图:
Firefox浏览器最佳调试插件FireBug

二、FireBug的使用

如下图,按照步骤一步一步来:

1、点击FireBug按钮,弹出面板

2、点击此按钮来查看页面中的元素,点击按钮后鼠标放在页面上会出现元素被选项的框,根据需要选择你要修改的元素

3、选择要修改的标题,查看时一般会选择到h3标题中的a元素

4、选择好的h3标题元素

5、此时在右侧面板样式中就可以看到h3标题元素的样式
Firefox浏览器最佳调试插件FireBug

三、CSS代码

通过上一步我们已经获取到要修改的元素,现在h3标题大小为14像素,如果要加大两号,代码如下:

  1. .postlist h3 {
  2.     font-size16px;
  3. }

如果多个元素的字体大小都需要修改成16px,在元素后面添加英文逗号(最后一个元素后面不用),代码如下:

  1. .postgrid h3,
  2. .postlist h3 {
  3.     font-size16px;
  4. }

最后把CSS代码添加到主题选项——代码——自定义CSS代码的输入框中,保存选项即可,这样想怎么修改字体或其它样式都非常的方便。

(7)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

关键词:,
LensNews

热评文章

发表回复