Hello Blog之界面设置(HTML/CSS)

初来乍到,先作博客UIhtml

博客园给了官方模板:http://skintemplate.cnblogs.com/  不过太古老了不符合审美。字体

百度一下决定用下 http://www.cnblogs.com/yescoolfan/p/3462350.html 字体比较漂亮并且简洁。复制CSS代码。url

打开个人主页,按F12打开firefox代码查看器。firefox

第一步,先换背景。htm

  定位到CSS中的属性:background: #205424 url('http://mat1.gtimg.com/www/mb/theme/qqfs/one_lhj/wrapBg.jpg') no-repeat top center fixed;blog

  原图尺寸2000×940,这里能够考虑下载一张图上传到博客相册,而后从新设置url连接便可。图片

  四个属性:博客

    no-repeat:下拉时是否重复图片;模板

    top:图片是否认格显示(如不选则图片根据内容高度自动居中);后台

    center:左右居中;

    fixed:图片是否随下拉而滚动。

  最终代码: background:#fbf5dc url('http://images.cnblogs.com/cnblogs_com/flyme1993/978927/o_background.jpg')  no-repeat top center;

  因为想展现整个图,因此取消了fixed属性,为了颜色连贯,用取色器取了图片下方到颜色#fbf5dc做为其余背景。

第二步,增长副标题。

  查阅http://www.cnblogs.com/asxinyu/p/Bolg_Category_StyleSetting_2.html过程当中得知副标题是在后台设置。

  加入副标题后,经过调整CSS中的h2属性,改变了字体等格式。

第三步,试图更改侧边栏控件顺序。

  想把随笔分类放到最上面,可是查阅代码发现,侧边栏彷佛只能改公告,控件顺序是排定的。

整体说已经符合审美了,暂且如此,之后有兴趣再继续美化~

相关文章
相关标签/搜索