博客园美化样式重整

重新美化了一下博客,以前的都没用了

文章链接  -设计自己的博客园效果

body {
    background-image: url('http://www.cnblogs.com/skins/BlueSky/images/bg.gif');
    background-repeat: repeat;
    background-color: #FFFDFA;
}
.clear {

    clear: both;
}

html {
    color: #000;
    overflow-y: scroll;
    background: #fff;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, lengend, button, input, textarea, form, th, td {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}
 body, button, input, select, textarea {
    font: 12px/1.5 Tahoma, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
address, cite, dfn, em, var {
    font-style: normal;
}
code, kbd, pre, samp, tt {
    font-family: "Courier New", Courier, monospace;
}
small {
    font-size: 12px;
}
ul, ol {
    list-style: none;
}
a:link, a:visited {
    text-decoration: none;
    color: #000000;
}
a{
        cursor: pointer;

}
a:hover {
    text-decoration: underline;
}
abbr[title], acronym[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
q:before, q:after {
    content: '';
}
:focus {
    outline: 0;
}
legend {
    color: #000;
}
fieldset, img {
    border: none;
}
button, input, select, textarea {
    font-size: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
img {
    -ms-interpolation-mode: bicubic;
}
/*html5*/
article, aside, dialog, footer, header, hground, section, footer, nav, figure, menu {
    display: block
}

#navigator,#blogTitle,#main,#footer{width: 1300px;
    position: relative;
    margin: 0 auto;}

#header{
    height: 40px;
    width: 100%;
    background-color:#2175bc;

}
#main{
    margin-top: 60px; 
    margin-bottom: 0px;
    
}
#mainContent{
    width: 1000px;
    background: white;
    box-shadow: 0px 0px 8px #999;
    -moz-box-shadow: 0px 0px 8px #999;
    -web-kit-shadow: 0px 0px 8px #999;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -web-kit-shadow: 6px;
    float: left;
    display: inline-block;
overflow: auto;
}
#sideBar{
    width: 200px;
    padding: 32px;
    display: inline-block;
    overflow: hidden;
    color: #2D2D2D;
}
#footer{
display:none;

}


#navigator{
    top: 8px;
}
#navList li{
    float: left;
    margin-right: 25px;
    display: inline;
}
#navList li a{
    font-size:15px;
    text-decoration: none;
    color: #FFF;
    padding: 10px;
    background-color: #2175bc;
}
#navList li a:hover{
    background-color:#2586d7;
    margin-top:-2px;
    padding-bottom:12px;
    color: #fff;
    opacity:1; 
    }

.blogStats{
    color: #CACACA;
    font-size: 12px;
    text-align: right;
}
#Header1_HeaderTitle{
    color:white;
}

#Header1_HeaderTitle:hover{
    text-decoration: none;
}

.day{background:white; padding:32px;}
.postTitle,.postTitl2,.entrylistPosttitle{
    font-size: 20px;
    padding-right: 64px;
    padding-left: 10px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #2175bc;
}
.postTitle a,.postTitl2 a,.entrylistPosttitle a{
    color: #333;
}
.postTitle a:link, .post-title a:visited,.postTitl2 a:link,.postTitl2 a:visited,.entrylistPosttitle a:link,.entrylistPosttitle a:visited{color:black;}
.postTitle a:hover,.postTitl2 a:hover,.entrylistPosttitle a:hover{color:##3399ff;text-decoration:none;}

.postBody,.postCon,.entrylistPostSummary{clear:both; margin-top:26px;}
.postBody,.postCon,.entrylistPostSummary{font-size:14px;color:#444;line-height:1.8;}
.postCon h1, .postCon h2, .postCon h3, .postCon h4, .postCon h5, .postCon h6{
    font-weight:bold;
    line-height:1.8;
}
.postBody h1,.postCon h1{font-size:20px;}
.postBody h2,.postCon h2{font-size:18px;}
.postBody h3,.postCon h3{font-size:16px;}
.postBody h4,.postCon h4{font-size:14px;}
.postBody h5,.postCon h5{font-size:14px;}
.postBody h6,.postCon h6{font-size:14px;}
.postBody dd,.postCon dd{padding-left:2em;}
.postBody ul,.postCon ul{list-style:none;margin-left:20px;}
.postBody ul li,.postCon ul li{list-style:inside disc;}
.postBody dt,.postCon dt{ font-weight:bold; padding:6px 0; clear:both}
.postBody ol,.postCon ol{list-style:none;margin-left:20px;}
.postBody blockquote,.postCon blockquote{width:90%;margin:0 auto;padding:6px 0 6px 45px;color:#666;
    background:white url(/images/blockquote.gif) top left no-repeat;}
.dayTitle,.postDesc{ font-size:12px; color:#999999;}
.postDesc,.postDesc2,.entrylistItemPostDesc{
    border-bottom: 1px dashed #E8E7D0;
    text-align: right;
    margin: 20px 0px;
    padding:5px 0px;
}
.dayTitle{
    border:1px solid #cccccc;
    position: relative;
    top: -20px;
    width: 100px;
    left: -20px;
    padding-top: 3px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 8px;
}

.dayTitle a{
     color:#333;
 }

.topicListFooter{
    padding: 32px;
}
#sideBarMain div{margin-bottom:26px;}
#sideBarMain div div{margin-bottom:5px;}
#sideBarMain h3{
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #D4D4D4;
    padding-bottom: 10px;
    margin-top: 20px;
}

#blog-comments-placeholder,#divRefreshComments,.commentform,#AjaxHolder_UpdatePanel1{padding: 0 32px;}

.post{padding: 32px;}

.feedbackItem{
    border: 1px solid #E3E3E3;
    padding: 5px;
    margin-bottom: 10px;
    background-color: #F6F6F6;
}
.blog_comment_body{
    color: #929292;
    padding-top: 10px;
}
.forFlow p{margin-bottom:18px;}
.forFlow img{
     margin-bottom: 20px;
}

.PostList,.entrylistItem{
    margin:20px;
}

.entrylistTitle,.PostListTitle{
    display:none;
}


#blogTitle{
    display:none;
}

.cnblogs_code img{
margin:0;
float:left;
}

.cnblogs_code_toolbar {
margin-top: 0px;
}

.code{
padding:0 10px;
}

h4{
font-size: 16px;
background-color: #F60;
margin: 0 -32px;
padding: 0 32px;
color: white;
}

#myposts .myposts_title{font-size: 16px;margin-top: 20px;text-align: center;}

#myposts .postTitl2 {border-left: none;padding-left: 0px;padding-right: 0px;}

#myposts .postTitl2 a{    font-size: 16px;}

#myposts .postDesc2 {margin: 20px 0 20px 5px;}

#cnblogs_post_body{font-size: 14px;}
#green_channel{
widthL100%;
}

#green_channel img {
    margin-top: 0;
    margin-bottom: 0;
}

#cnblogs_post_body img { max-width: 650px; }

.commentbox_main img{
    margin-top: 0;
    margin-bottom: 0;
}


/*底部*/


/* **********************
 * 评论
 * **********************/

#comment_form_container .comment_textarea {
  width: 100%;
}

.comment_vote {
  padding-right: 2px;
  font-size: 14px;
  margin-top: 10px;
}

.comment_vote a.comment_digg {
  color: #f80;
}

.feedbackItem {
  margin: 20px 0 25px;
  background: #fff;
  padding: 10px 15px;
}

.feedbackCon {
  font-size: 13px;
  border-bottom: 0;
  padding: 10px 5px 0 5px;
  text-align: justify;
}

div.commentform input.author  {
    background-image: url(//static.cnblogs.com/images/icon_form.gif);
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    padding: 4px 4px 4px 30px;
    width: 100px;
    font-size: 13px;
}




/* **********************
 * 文章评价
 * **********************/
/* **********************
 * 点赞,评论优化
 * **********************/

#div_digg {
  position: fixed;
  right: 30px;
  bottom: 50px;
  background: #fff;
  padding: 20px 20px 15px;
  border-radius: 5px;
  border: 1px solid #888;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
 
  #div_digg {
    width: auto;
    padding: 0;
    right: -25px;
    bottom: 3px;
    box-shadow: none;
  }
  
}

.zdy{

padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    color: #000;
    font-size: 20px;
}


/******下一页******/


#nav_next_page{
display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px; 
    background-color: #337ab7;
    border-color: #2e6da4;
}
#nav_next_page a{
text-decoration: none;
    color: #fff;
}

 
#homepage1_HomePageDays_homepage_bottom_pager>div.pager a ,
#homepage_top_pager>div.pager  a{
display: inline-block; 
    margin-bottom: 0; 
    font-weight: 400; 
text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #337ab7;
    border-color: #2e6da4;
}
  
#homepage1_HomePageDays_homepage_bottom_pager>div.pager a:hover,
#homepage_top_pager>div.pager  a:hove{
text-decoration: none;
}
Css
<script src="https://blog-static.cnblogs.com/files/whatarey/jq22.js" type="text/javascript"></script>
<div align="center">您是第
<a href="http://www.amazingcounters.com">
<img border="0" src="http://cc.amazingcounters.com/counter.php?i=3223365&c=9670408" alt="AmazingCounters.com">
</a>位吃瓜群众
</div>
<script src="https://blog-static.cnblogs.com/files/whatarey/headBand.min.js" type="text/javascript"></script>

<script>   

$('.Cgraintest').headBand({'background':'#ffcc00','height':"10"}); 

$(document).ready(function(){
$('.Cgraintest').headBand({'background':'#ffcc00','height':"10"});
    var a_index = 0;
    $("body").click(function(e){
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_index]);
        a_index = (a_index + 1) % a.length;
        var x = e.pageX,y = e.pageY;
        $i.css({
            "z-index": 99999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({"top": y-180,"opacity": 0},1500,function() {
            $i.remove();
        });
    });
});

 
console.log("看见这里了,不点个赞再走嘛?");
</script>

嗯,觉得我的样式好看就尽管Copy~~~前提是点个赞哦!!!

页首

<script src="https://blog-static.cnblogs.com/files/whatarey/jq22.js" type="text/javascript"></script>
<div class="Cgraintest"></div>

页眉,页脚

<p class="zdy">
<a  href="https://www.cnblogs.com/whatarey/">Cgrain</a></br>
<a  href="https://music.163.com/#/song?id=29772412"  target="_blank" rel="nofollow">  拜拜我的少年时代</a>-
<a  href="https://music.163.com/#/artist?id=1007170"  target="_blank" rel="nofollow"> 陈粒</a>
</p>

猜你喜欢

转载自www.cnblogs.com/whatarey/p/10472954.html
今日推荐