• CnBlogs自定义博客样式


    弄了半个晚上的时间,总算马马虎虎搞好了博客的样式。

    整个博客是蓝色的基调,比较激情,我喜欢。

    比较郁闷的是,rightmenu 和 main都是position:absolute 布局的。要添加一个footer,还真是被恶心到不行,现在虽然做成了position:fixed的,但标签和随笔增多的时候,肯定会覆盖一部分内容。没有js权限, 暂时先放着吧。

    1. footer的代码:MyFooter部分直接插入了内联的Css样式,懒得修改了,过段时间肯定要把footer去掉。

    1 <div id="myFooter" style="position: fixed; bottom: 0px;  100%; height: 85px; background: none repeat scroll 0px 0px rgb(0, 120, 216);">
    2   <p id="myFootText">知识改变命运,码农拯救人生</p>
    3   <p id="myFootCopy">ohmygirl@2014</p>
    4 </div>

    2. 同时去掉了文章底部烦人的推广链接和广告banner。看着清净了不少,CSS代码为:

    1 /* advertise */
    2 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
    3     width:0;
    4     height:0;
    5     display:none;
    6     overflow:hidden;
    7 }

    3.文章底部的评论按钮的位置和大小都比较尴尬,位置太靠左,且可点击范围太小。这里一并贴出来:

     1 #RecentCommentsBlock li {
     2     margin: 0;
     3     width: 275px;
     4 }
     5 #RecentCommentsBlock li.recent_comment_body {
     6     border-radius: 0;
     7     margin: 0;
     8 }
     9 #RecentCommentsBlock li.recent_comment_title {
    10     border-radius: 5px 5px 0 0;
    11     margin: 3px 0 0;
    12 }
    13 #RecentCommentsBlock li.recent_comment_author {
    14     border-radius: 0 0 5px 5px;
    15     margin: 0;
    16 }
    17 .desc_img{
    18    width:75px;
    19    max-width:75px;
    20 }
    21 
    22 #blog-calendar{
    23     background:white;
    24 }
    25 
    26 /* comment */
    27 div.commentform{
    28     margin-bottom:100px;
    29 }
    30 #commentform_title {
    31     background: url("http://static.cnblogs.com/images/icon_addcomment.gif") no-repeat scroll 0 2px;
    32     color: #0078d8;
    33     font-size:14px;
    34 }
    35 div.commentform p{
    36     margin-bottom:10px;
    37 }
    38 .comment_btn {
    39     height: 35px;
    40     width: 90px;
    41     background: none repeat scroll 0 0 #0078d8;
    42     border: 0 none;
    43     border-radius: 5px;
    44     color: white;
    45     cursor:pointer;
    46 }
    47 .comment_btn:hover{
    48     background:#317ef3;
    49 }
    50 #commentbox_opt,#commentbox_opt + p {
    51     text-align:center;
    52 }
    53 #tbCommentBody{
    54     width:100%;
    55     resize:none;
    56 }
    57 #tbCommentAuthor,#tbCommentBody{
    58    border:1px solid #0078d8;
    59 }
    60 #tbCommentBody:hover{
    61    border:1px solid #fca021;
    62 }
    63 #comments > h3 {
    64     background: none repeat scroll 0 0 #0078d8;
    65     border-radius: 3px;
    66     color: white;
    67     padding: 8px;
    68     border:0 none;
    69     font-size:14px;
    70 }
    71 #comments{
    72     font-size: 13px;
    73 }
    74 #comments h4{
    75     margin-top:10px;
    76 }
    77 #comments h4 span {
    78     color: #6c6351;
    79     font-size: 12px;
    80 }
    81 .comment_actions {
    82     border-bottom: 1px dashed #0078d8;
    83     display: block;
    84     padding-bottom: 10px;
    85 }
    86 .blog_comment_body {
    87     color: #111;
    88     font-size: 13px;
    89     margin-bottom: 10px;
    90     margin-top: 10px;
    91 }
    92 #comment_nav {
    93     font-size: 14px;
    94     margin-top: 10px;
    95     text-align: right;
    96 }

    最后,博客主题部分的css代码为:

      1 /* header */
      2 #header{
      3     border:1px solid #044e97;
      4     background:#0078d8 repeat;
      5     box-shadow:0 0 5px;
      6 }
      7 h1{
      8     background: none;
      9     border-bottom:0 none;
     10 }
     11 #main{
     12     margin-top:5px;
     13     border-right:0 none;
     14     min-height:1040px;
     15 }
     16 #Header1_HeaderTitle{
     17     color:white;
     18     font-weight:bold;
     19     font-size:24px;
     20     text-shadow:1px 5px 1px #000;
     21 }
     22 #Header1_HeaderTitle:hover{
     23     color:#fca021;
     24 }
     25 #tagline{
     26     color:white;
     27 }
     28 p.date{
     29     background: none repeat scroll 0 0 #0078d8;
     30     border-bottom: 1px solid #aaa;
     31     border-radius: 5px;
     32     color: white;
     33     font-size: 14px;
     34     font-weight: bold;
     35     margin: 10px 10px 0 50px;
     36     padding: 10px;
     37 }
     38 .postFoot, p.postFoot{
     39     padding-bottom:2px;
     40     border-bottom:1px solid #0078d8;
     41 }
     42 .postTitle{
     43     padding:5px 0;
     44 }
     45 .postTitle a{
     46     font-size:15px;
     47     padding:2px 0;
     48 }
     49 .post h2{
     50     border-bottom: 1px dashed #0078d8;
     51     font-size: 1em;
     52     margin-top: 10px;
     53     padding: 0 0 10px;
     54 }
     55 .c_b_p_desc_readmore:hover{
     56     color:#faa123;
     57 }
     58 #cb_post_title_url{
     59     font-size:18px;
     60 }
     61 #MySignature{
     62     border: 1px dashed #0078d8;
     63     display: block;
     64     padding: 5px;
     65 }
     66 #green_channel{
     67     border: 1px dashed #0078d8;
     68 }
     69 
     70 /* right menu */
     71 #rightmenu{
     72     border:1px solid #0078d8;
     73     background:#0078d8;
     74     border-radius:10px;
     75 }
     76 #rightmenu ul{
     77     background:white;
     78 }
     79 #rightmenu li{   
     80     background: none repeat scroll 0 0 #3385ff;
     81     border: 1px solid #3385ff;
     82     border-radius: 5px;
     83     color: white;
     84     margin: 10px;
     85     padding: 5px;
     86     width: 150px;
     87 }
     88 #rightmenu li a{
     89     color:white;
     90     padding-left:10px;
     91 }
     92 #rightmenu li:hover{
     93     background:#317ef3;
     94 }
     95 #rightmenu h3{
     96     color:white;
     97     padding:2px 0 5px 10px;
     98     font-size:18px;
     99     border:0 none;
    100 }
    101 
    102 #blog-calendar{
    103     background:white;
    104 }
    105 div.commentform{
    106     margin-bottom:100px;
    107 }
    108 /* advertise */
    109 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
    110     width:0;
    111     height:0;
    112     display:none;
    113     overflow:hidden;
    114 }
    115 
    116 /* calendar */
    117 .Cal{
    118     border:0 none;
    119     width:100%;
    120     height:200px;
    121     font-size:14px;
    122 }
    123 .CalTitle{
    124     font-size:15px;
    125 }
    126 .CalTodayDay{
    127     background:#0078d8;
    128 }
    129 .CalTodayDay a u{
    130     color:#fc6700;
    131     text-decoration:none;
    132 }
    
  • 相关阅读:
    java
    EL表达式详解
    SVN的安装与配置
    javascript高级程序设计学习笔记
    java基础知识
    javascript高级程序设计学习笔记Chapter 5: Reference Types
    javascript模态,非模态窗体
    javascript执行顺序
    javascript的执行顺序2
    自动补全+汉字拼音双查(1)数据库
  • 原文地址:https://www.cnblogs.com/ohmygirl/p/blogStyle.html
Copyright © 2020-2023  润新知