zoukankan html css js c++ java

博客园主题

页面定制CSS代码

  1 /*标题h1 h2 h3样式*/
  2 #cnblogs_post_body {
  3     color: black;
  4     font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif;
  5     font-size: 14px;
  6 }
  7 
  8 /*标题2*/
  9 #cnblogs_post_body h2 {
 10     color: #ffffff;
 11     padding-left: 15px;
 12     background-color: #00BFFF !important;
 13     text-shadow: 2px 2px 3px #222222;
 14     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 15     margin-bottom: 5px;
 16 }
 17 /*标题3*/
 18 #cnblogs_post_body h3 {
 19     font-size: 16pt;
 20     color: white;
 21     background-color: #00BFFF;
 22     border-left: red 10px solid;
 23     padding-left: 16px;
 24     margin-top: 20px;
 25 }
 26 
 27 
 28 
 29 
 30 
 31 body {
 32 color: #000;
 33 background: url("http://images.cnblogs.com/cnblogs_com/sunbines/1216966/o_459873-20150919175458742-1697781612.jpg") fixed;
 34 background-size: cover;
 35 background-repeat: no-repeat;
 36 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
 37 font-size: 12px;
 38 min-height: 100%;
 39 }
 40 
 41 
 42 
 43 
 44 
 45 body 
 46 { 
 47    text-align:center; 
 48 }
 49 #home 
 50 { 
 51    margin: 0px auto; 
 52    text-align:left; 
 53    max-1220px;
 54 }
 55 
 56 
 57 
 58 
 59 
 60 .catListTitle {
 61 font-weight: bold;
 62 line-height: 1.2;
 63 margin-top: 21px;
 64 margin-bottom: 10.5px;
 65 border-left:10px solid #008000;
 66 padding: 10px 0 10px 14px;
 67 text-align: left;
 68 font-family: 微软雅黑;
 69 }
 70 #profile_block {
 71 font-family: 微软雅黑;
 72 }
 73 #navigator {
 74 font-family: 微软雅黑;
 75 }
 76 *{
 77 font-family: 微软雅黑;
 78 }
 79 
 80 
 81 
 82 
 83 
 84 
 85 
 86 /* 个性签名 */
 87 #MySignature {
 88     box-shadow: 8px 1px 10px #989898;
 89     padding: 10px;
 90     text-shadow: 1px 1px 1px #FFF;
 91     font-size: 15px;
 92     border-left: solid 5px #55895B;
 93     background: #F3F3F3;
 94     border-radius: 10px 10px 50% 10px;
 95     line-height: 2.4;
 96     margin: 40px 0;
 97 }
 98 
 99 #MySignature a {
100     text-decoration: none;
101     color: #4183c4;
102     font-weight: bold;
103 }
104 
105 #MySignature a:hover {
106     text-decoration: underline;
107     color: #f60;
108 }
109 
110 #MySignature span {
111     color: #f60;
112 }

博客侧边栏公告（支持HTML代码）（支持JS代码）

 1 <script language="javascript" type="text/javascript">
 2 
 3 // 生成目录索引列表
 4 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
 5 // modified by: zzq
 6 function GenerateContentList()
 7 {
 8     var mainContent = $('#cnblogs_post_body');
 9     var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
10 
11     if(mainContent.length < 1)
12         return;
13  
14     if(h2_list.length>0)
15     {
16         var content = '<a name="_labelTop"></a>';
17         content += '<div id="navCategory">';
18         content += '<p style="font-size:18px"><b>目录</b></p>';
19         content += '<ul>';
20         for(var i=0; i<h2_list.length; i++)
21         {
22             var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
23             $(h2_list[i]).before(go_to_top);
24             
25             var h3_list = $(h2_list[i]).nextAll("h3");
26             var li3_content = '';
27             for(var j=0; j<h3_list.length; j++)
28             {
29                 var tmp = $(h3_list[j]).prevAll('h2').first();
30                 if(!tmp.is(h2_list[i]))
31                     break;
32                 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
33                 $(h3_list[j]).before(li3_anchor);
34                 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
35             }
36             
37             var li2_content = '';
38             if(li3_content.length > 0)
39                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
40             else
41                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
42             content += li2_content;
43         }
44         content += '</ul>';
45         content += '</div><p>&nbsp;</p>';
46         content += '<p style="font-size:18px"><b>正文</b></p>';
47         if($('#cnblogs_post_body').length != 0 )
48         {
49             $($('#cnblogs_post_body')[0]).prepend(content);
50         }
51     }   
52 
53     var qqinfo =  '<p style="color:navy;font-size:12px"></p>';
54     $(mainContent[0]).prepend(qqinfo);
55 }
56 
57 GenerateContentList();
58 </script>

博客侧边栏公告（支持HTML代码）（支持JS代码）

<script language="javascript" type="text/javascript">

// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory">';
        content += '<p style="font-size:18px"><b>目录</b></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<p style="font-size:18px"><b>正文</b></p>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }   

    var qqinfo =  '<p style="color:navy;font-size:12px"></p>';
    $(mainContent[0]).prepend(qqinfo);
}

GenerateContentList();
</script>

页首Html代码

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>   
<link href="http://files.cnblogs.com/files/ning-wang/marvin.nav.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/ning-wang/marvin.nav.js"></script>

页脚Html代码

 1 <style>
 2 #back-top {
 3      position: fixed;
 4      bottom: 10px;
 5      right: 5px;
 6      z-index: 99;
 7 }
 8 #back-top span {
 9       50px;
10      height: 64px;
11      display: block;
12      background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
13 }
14 #back-top a{outline:none}
15 </style>
16 <script type="text/javascript">
17 $(function() {
18     // hide #back-top first
19     $("#back-top").hide();
20     // fade in #back-top
21     $(window).scroll(function() {
22         if ($(this).scrollTop() > 500) {
23             $('#back-top').fadeIn();
24         } else {
25             $('#back-top').fadeOut();
26         }
27     });
28     // scroll body to 0px on click
29     $('#back-top a').click(function() {
30         $('body,html').animate({
31             scrollTop: 0
32         }, 800);
33         return false;
34     });
35 });
36 </script>
37 <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

查看全文

相关阅读:
node连接数据库（express+mysql）
Apache与Tomcat有什么关系和区别
 tomcat部署简单的html静态网页
 Vue项目webpack打包部署到服务器
 windows下vue+webpack前端开发环境搭建及nginx部署
 DIV 边框重叠像素变粗解决办法
 基于iscroll实现下拉和上拉刷新
 css图片居中(水平居中和垂直居中)
nodejs分页类
 事件--键盘事件

原文地址：https://www.cnblogs.com/sunbines/p/10658747.html