编程新手之修改页面样式

来源：互联网 2023-03-16 19:08:23 112

在我们刚开始工作的时候,后台程序员有时候也会兼职前端编写,有时候我们要修改某处字体的大小,某个输入框的位置,不知道具体是哪一个在起作用,或者说找起来比较麻烦,这个时候我们就可以通过前端浏览器来定位我们要修改的元素

工具/原料

火狐浏览器(已经安装了FireBug)
eclipse

方法/步骤

首先我们要打开我们的eclipse以及浏览器

编程新手之修改页面样式

在浏览器上通过按F12来打开debug,切换到HTML处('控制台':可以看到我们发出的请求路径,'HTML'看到页面代码,'CSS':本页面所引用的.css文件,'脚本':引用的.js文件...)

编程新手之修改页面样式

通过点击上图红圈部分的按钮(小甲虫旁边的那个)来获取页面上的元素.(通过直接点击来获取,比如我要获取此处的样式).

编程新手之修改页面样式

在图片的右边有一个样式的选项,这里就可以看到当前选择的样式的代码.我们可以看到在样式下有一个element.style 这里面包含的样式是直接写在这个div上的.(可以直接在图片中对应的div处得到验证)这里我给字体改变了一下颜色(红色),看看效果(这种修改只会在本页面有效,刷新以后我们修改的东西就不存在了)

编程新手之修改页面样式