个人博客调试

零、前言

个人博客已经搭建完成，有一点不太满意的地方是博文占用的宽度太窄了，怎么调试页面的外观成了一个问题。能影响页面外观的是css文件，本博文就是记录自己修改css的过程。

一、先说一下踩的坑

由于之前从没调试过css文件，这次耗费的时间比较长，方法也比较笨，个人博客的css文件在\static\css_js目录下，extra.css、font-awesome.min.css、jquery.fancybox.css、main.css，总共四个css文件，一开始，我也不知道哪个是控制网页外观的，然后看了一下Blog/templates/base.html文件的内容,发现<div>中的class大多是在main.css中出现，于是开始笨笨的在main.css文件中挨个尝试各个参数，找了很久很久才找到一丁点的线索，是哪个参数在控制网页的哪一部分，看的头晕眼花。

二、步入正途

休息片刻后我想到之前练习爬虫的时候有用谷歌浏览器查看网页元素，作为一个强大的浏览器，谷歌浏览器一定有相关的功能可以快速锁定网页的哪一部分是怎么被css所控制的。这样想过之后，才开始慢慢在元素查找页面（Elements）和网页之间来回点，终于发现网页各个框架的位置是受class的名字控制，在main.css文件中直接搜索class的名字即可快速找到对应的参数。
回过头来，才发现base.html文件内原本就有class的名字，如果一开始就知道class是控制网页布局的，也就不用费这么长时间折腾了。
用谷歌浏览器可更直观的查看网页的布局及相应的class。

三、总结

• 用谷歌浏览器访问博客网址
• 按F12查看网页元素
• 在网页和Elements页面来回试探，找出各个位置对应的网页源代码的class名字
• 在main.css文件中搜索class的名字，找出正确的位置，修改参数看网页是否会发生变化
• 修改各个class的参数调整网页页面，直到达到自己满意的效果

另外，网页各框架的宽度width可以用百分比（例如90%）来表示，使网页适用于不同桌面分辨率的电脑上（待验证）？