zoukankan      html  css  js  c++  java
  • 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文件的结构,这样就可以写出各种漂亮的页面出来了。这让我想起了一个很著名的css网站——css禅意花园(www.csszengarden.com)。
        博客园的个人主页的html主要分为5大块:top,leftmenu,rightmenu,main,footer。其中主内容区的三大块leftmenu,rightmenu,main水平方向并列显示,可以设置它们分别向左、向右、向左浮动,再在footer添加清除浮动,这样页面的基本布局就差不多出来了。
       

  • 相关阅读:
    双飞翼布局和圣杯布局的对比
    阿里云centos+java环境搭建
    Android零散知识点积累
    [转]linux shell 流程控制(条件if,循环【for,while】,选择【case】语句实例
    [转]linux shell 获取当前正在执行脚本的绝对路径
    [转+整理]linux shell 将字符串分割成数组
    [转]linux shell 数组建立及使用技巧
    linux shell 入门
    jquery 字符串转为json
    JQuery插件开发入门
  • 原文地址:https://www.cnblogs.com/okilon/p/3640170.html
Copyright © 2011-2022 走看看