无限策划系列建站教程不走传统的教程路子,以实用出发,以最快的最易懂的法子让你迅速上手。

工欲善其事,必先利其器!

工具准备:firefox——一款不同于ie的浏览器

下载地址:http://www.mozillaonline.com(有中文版的)

重要插件:firefox插件firebug(也有中文版)

插件安装:安装好firefox后,打开firefox,用其访问https://addons.mozilla.org/zh-CN/firefox/addon/1843,即可看到firebug及相关介绍;点击“安装到firefox”,按提示安装即可。

安装好firebug会提示重启firefox,重启后可在浏览器右下角看到一个蟑螂形状的图标。

点击它或者按 F12 都会在浏览器底部出现一个操作框:

其左边是网页的html代码,右边默认为网页的css。当然,它的功能不仅仅是用来看css,还有其它功能,但我们现在主要用这块就可以了,其它你有空再研究吧。

firebug只是一个调试工具,它所针对的只是页面的缓存。在firebug里的任何操作在刷新页面后都会完全消失。在firebug里你可以随便点击随便修改,这不会对你的网站产生任何影响。要不信你就打开g.cn,再调出firebug随便点点改改看吧。

现在举个简单的例子,以下图看:

在上面蓝色加黄色的地方为下面左边<div id="divMain"></div>这个模块里包含的东西所在的位置。id="divMain"是一个标签,它对应css里的#divMain(见右边红圈)。其中黄色部分表示在右边红圈里的margin:0.618em 0;,也就是这个div模块和其它模块的距离。至于最右边的蓝色加粗的style.css (第 39 行)表示这个css代码所在的文件和文件里的位置,至于这个文件的具体地址,右击点复制地址再黏贴出来就看到了(当然可以选在新窗口打开)。

随便改改吧,让好奇心泛滥点。双击右边还可以加一行css,试下加个color颜色,是不是觉得有点意思呢。

至于这些css具体是啥意思,这里就不说了。先随便打开任意网站,改padding、margin、color、background等等等等(firebug输入一个单词会自动给出对应的css代码全名,只要有就会出现,所以别担心不知道输入啥,再不行把26个字母都过一遍,总有货的),把这些操作逐渐熟悉吧,让好奇占第一位,才能有下一步的解答。否则,没兴趣的话也就不用继续学了 ^_^