css打造自己的博客园

浏览数：16 / 时间：2015年06月09日

现在互联网上提供的社区、博客、免费空间的网站有很多。像交友类的社区网站有myspace、facebook，国内的则有校内、亿聚、占座等，而博客则有像博客中国、新浪博客、博客园等。我学习web前端技术也有一定的时间了，最近在博客园这个国内著名的开发网站上注册了一个帐户。昨天刚考完试，今天周末，有一把时间供自己挥霍。就开始自己整整博客。
    当然，自我臭屁一下，作为一个学css的csser。拿模板来对付自己也有点太不负责了吧。好，那我就自己设计一下自己的博客页面吧。
    说干就干，具体的小步骤如下：
    1：打开自己的博客，在“管理”-“博客设置”中勾选“禁用模板默认CSS”复选框；
    2：用firefox的插件firebug查看一下自己的博客首页的html文件结构（此步骤可选），查看页面源代码；
    3：在文本编辑器（如：Dreamweaver,Expresion Web,Editplus）中打开源文件，针对html设置css样式；
    4：css样式写完后，预览，直到自己满意为止。然后将css代码copy到“管理”-“博客设置”中“通过CSS定制页面”的文本框中；
    5：预览，自己的页面就呈现在你面前了。
    可是，还有一个最大的问题是，一张页面中完全不用图片做背景或是设置其它的样式那多不爽啊。我遇到的问题是自己的在css设置的背景图片一个都没显示出来。所以页面的质量也就大打折扣了。心想：应该要上传以个图片文件夹然后让css文件读取这个文件夹，图片就出来了。可是找了半天都没有找到上传图片的按钮。
    最后找到了一个笨办法：将用到的背景图片上传到相册里。这样图片就会存在于网络服务器上而不是本机上，然后在css文件中引用绝对路径。这样，背景图片也就能顺利显示了，自己的页面也就能够完整地呈现在面前了。
    博客园的个人主页的html主要分为5大块：top,leftmenu,rightmenu,main,footer。其中主内容区的三大块leftmenu,rightmenu,main水平方向并列显示，可以设置它们分别向左、向右、向左浮动，再在footer添加清除浮动，这样页面的基本布局就差不多出来了。