修改模板神器:火狐Firefox审查元素工具的使用方法


网站建设初期,我们拿到的模板往往不尽人意,需要做一些调整。而面对一大堆密密麻麻的代码,很多小伙伴又不知道从哪里下手。本文就来谈谈如何利用 Firefox 火狐浏览器自带的查看元素工具来调整 CSS 样式。这里以调整 WP 模板的 logo 位置来举例:  1、用火狐浏览器打开要修改的模板网站,鼠标指在 logo 处右键→下拉菜单中点击“查看元素”(也可按F12快捷键打开)。  2、把鼠标在下方工具框区域上下移动及适当点击,观察 logo 及周围颜色的变化。    3、确定大体位置,把鼠标移动到工具栏右侧的工具框,挨个勾选方框里的“√”,当勾选到第三个“√”时 logo 发生了位移;把钩打回来,logo 又恢复原位。说明就是这组代码在控制 logo 。    4、修改这些参数的值,直至满意。  5、打开CSS样式表文件(WordPress 一般是 /wp-content/themes/ 模板文件夹 /style.css),用 Dreamweaver 打开,查找这个 class 名称 .logo-site { ,把数据修改为理想的值,保存。  网页其他样式如字体字号、颜色、边距边框等都是用这种方法调整。为提高效率建议在本地测试好了再上传。  Google谷歌Chrome、360 等很多浏览器都有此功能(IE、