zoukankan      html  css  js  c++  java
  • 博客园模板CSS修改心得及方法。

    经过不断改进,现在这个风格,个人感觉还是比较满意的。

    下面把心得和方法贴出来,供以后查看,或其他新手查看。(由于本人是第一次弄关于CSS的东西,所以肯定很粗浅,高手就仅当娱乐,或直接绕道吧。)

    从整体结构层次上:

    首先,博客园有一套顶级的CSS样式,

    然后,选择了一个模板的CSS样式。这个模板继承了博客园的CSS样式,然后重写其中的一些类,达到模板的风格效果。

    最后,在模板CSS样式的基础上,我们自己在重写一些类,达到自己想要的效果。自己写的代码就贴在(通过CSS定制页面风格)里面。

    跟C++里面的继承基本一样。  自己样式:模板样式:顶级样式。

    从具体的实现上:

    我们不需要去看顶级样式,因为顶级基本是个白板,都会被模板覆盖掉的。

    直接去选一个模板,然后查看博客源文件,找到模板的CSS文件地址,然后打开,模板的实现都在这里。我选的是http://www.cnblogs.com/Skins/LessIsMore/style.css

    然后,看自己的界面,修改不满意的地方。具体操作:先打开源文件,查找到需要修改的地方,前面有个class="XXX",其中的XXX就是需要修改的类名。然后自己重写这个类即可。重写方法,如:body{background-color:#F3F8FC;}为修改整体背景颜色。另外一个查找类名的方法是看博客园的文档,下载地址:http://skintemplate.cnblogs.com/

    重写的内容,自己不会写,没太大关系,用最高效的复制粘贴大法。看别人谁的好看,或是自己其他地方的好看,直接打开css文件,查到该类实现的地方,然后复制过来,就可以。

    下面是我自己写的所有的代码:

     /*整体背景*/
    body{background-color:#F3F8FC; }
    /*左边链接风格*/
    .catListPostCategory ul li,.catListPostArchive ul li,.catListImageCategory ul li,.catListComment ul li,.catListView ul li,.catListFeedback ul li,.catListEssay ul li,.catListLink ul li,.newsItem ul li{ margin-top:1px; margin-left:3px;}
    .catListPostCategory ul a,.catListPostArchive ul a,.catListImageCategory ul a,.catListComment ul a,.catListView ul a,.catListFeedback ul a,.catListEssay ul a,.catListLink ul a,.newsItem a{ text-decoration:none;color:#3b5999;}
    .catListPostCategory ul a:hover,.catListPostArchive ul a:hover,.catListImageCategory ul a:hover,.catListComment ul a:hover,.catListView ul a:hover,.catListFeedback ul a:hover,.catListEssay ul a:hover,.catListLink ul a:hover,.newsItem a:hover{ text-decoration:underline;}
     /*导航栏*/
    #navigator{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/r_navbg.gif) repeat-x;}
    /*左边分类标题*/
    .catListTitle{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x; padding:2px 5px 1px 5px;}
    /*右边正文标题背景*/
    .postTitle{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x;padding:2px 5px 1px 5px; margin-top:10px;}
    /*输入框*/
    .input_my_zzk,.comment_textarea,.author,.url{background-color:#F3F8FC}
    /*按钮*/
    .comment_btn,.btn_my_zzk{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x;}
    /*隐藏公告这两个字*/
    .newsItem{padding-top:15px;padding-left:5px;padding-right:5px;}
    .newsItem .catListTitle{display:none;}
    /*右边正文标题字*/
    .postTitle a{font-size:15px; font-weight:bold; text-decoration:none;}
    
  • 相关阅读:
    第一只猫环境准备
    高阶Promise--async
    操作系统源码编译心得
    闭包的应用场景
    全栈微信小程序商城 学习笔记10.1 对更新收货地址接口做权限控制
    全栈微信小程序商城 学习笔记9.1 新建登录接口
    全栈微信小程序商城 学习笔记8.5 product分类商品接口编写
    全栈微信小程序商城 学习笔记8.4 category分类接口编写
    全栈微信小程序商城 学习笔记8.3 product最近新品接口编写
    全栈微信小程序商城 学习笔记8.2 theme详情接口编写
  • 原文地址:https://www.cnblogs.com/aoyihuashao/p/1626657.html
Copyright © 2011-2022 走看看