css打造自己的博客园
现在互联网上提供的社区、博客、免费空间的网站有很多。像交友类的社区网站有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添加清除浮动,这样页面的基本布局就差不多出来了。