您的位置:彩世界app > 新闻 > Lepton博客园页面改版

Lepton博客园页面改版

2019-12-25 07:49

我大部分时间用手机阅读,博客,新闻,各参考说明 PDF 和 电子书等等,除此之外就是纸质书,所以,渴望自己的博客也能有较好的移动设备阅读体验。之前一直忍受着博客园的 HTML,也用自己的方法,JS,更改某某模板那些神奇的 table 结构。某君批评博客园技术不行的博文里面,我也曾经口出狂言,说你们博客园搞不定就开源让我们来做。年少轻狂无知,多多得罪请见谅。

彩世界app,2017年9月24日11:04:12

但这次真的受不了,决定用 bootstrap 改。因为博客园允许我们插入 JS,分别在所谓的页头和页脚(就是 HTML body 内顶部,和最低部),也允许不用模板的 CSS,用自己写的,那么,我就动手了。

博客皮肤: BlueSky

修改的内容都在这里:

页面定制css代码:

*{
    margin: 0px;
    padding: 0px
}

/*隐藏广告显示*/
#ad_t2, #cnblogs_c1, #cnblogs_c2, #under_post_news, #under_post_kb
{
    display: none;
}

#main
{
    z-index: 10;
}

#header{
    display: none;
}

.hide,.fn-hide{
    display:none;
}

.box{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

a{
    text-decoration: none;
    color:inherit;
}
a:link {
   text-decoration: none;
}




/*返回*/
/*#backtop{
    position:fixed;
    bottom:135px;
    right:20px;
    width:36px;
    height:36px;
    cursor: pointer;
    background-color:#00ACF0;
    display:none; 
    text-align: center;
}*/

#div_digg
{
    /*display: none;*/
}

#buttomright {
    position:fixed;
    bottom:15px;
    right:0px;
    /*vertical-align: middle;*/
    text-align: right;
}

#buttomright ul{
    width:36px;
    float:right;
}

/*设置右下角图标白色*/
#buttomright ul li, #buttomright ul a{
    text-decoration: none;
    color: #ccc;
}

#buttomright li{
    float: left
    width:36px;
    height:36px;
    cursor: pointer; 
    text-align: center;
    /*background-color:rgb(216, 216, 216);*/
    /*background-color: black;*/
    margin-bottom:0px;
    /*border-bottom: 1px solid red;*/
    /*padding:10px;*/
    /*margin: 0px;*/

}

.backtopclass{
    display:block;
    font-size:30px;
    /*margin-top:8px;*/
    padding: 10px;
}

#backtop{
    display:none;
}


.yinc{
    display:none;
}

/***********************************头部CSS**************/
#head{
    background-color: #fff;
    color: #fff;
    height: 80px;
    line-height: 80px;
    width: 100%;
    min-width: 1200px;
    z-index: 200;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,.1);
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
}

.headLeft{
    float:left;
    margin-left:20px;
    height:80px;
}

.headRight{
    position: relative;
    float:right;
    margin-right:20px;
    height:80px;
}

/*  logo           */
#logo{
    width:auto;
    float:left;
    margin-left:18px;
}

#logo p{
    font-size:32px;
    color: #777;
    text-shadow: 0 1px #DDD;
    transition: color .3s;
    height: 40px;
    line-height: 40px;
    margin-top:6px;
}

#logo em{
    color:#ccc;
    font-size:11px;
    display:block;
    height: 20px;
    line-height: 20px;
    font-style: normal;
}

/* 导航 */
#navlist {
    margin-top:0px;
    width:auto;
    margin-left:20px;
    margin-right:auto;
    height: 75px;
    display:block;
    padding:0px 10px;
    font-size:14px;
    float:left;
}

#navlist li {
    float: left;
}

#navlist li a {
    display: block;
    padding: 0 30px;
    height: 75px;
    font-family: "微软雅黑";
    float: left;
    text-align: center;
    transition-duration: 0.3s;
    color:#333;
    text-decoration: none;
    line-height: 75px;
    font-size: 16px;
    font-weight: bold;
}



#navlist a:hover{
    color:#00ACF0;
    border-bottom: 4px solid pink;
}

/*#navlist a:active {color: #0000FF}*/



#nav_current{
    color:#333;
    border-bottom: 2px solid #00ACF0;
}
#nav_current *{
    position:relative;
} 

/*  顶区  */
.headRight li{
    display:block;
    float:left;
    margin-left:12px;
    margin-right:12px;
    height:40px;
    line-height:40px;
    font-size:15px;
}

.userinfoshow{
    float:left;
    height: 40px;
    margin-top: 20px;
}

.userinfoshow i{
    color: #ccc;
}

#tologin a{
    color:#00ACF0;
}

#lnkname{
    position: relative;
    z-index: 800;
}

.userico{
    margin-right:5px;
    font-size:18px;
}

#lnkname i{
    color:#ccc;
}

.login_namez{
    color:#00ACF0!important;
}

.lnkname_xl{
    position: absolute;
    display: none;
    z-index: 10000;
    top: 80%;
    left: -10px;
    background-color: #FFF;
    font-size: 12px;
    width: 132px;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #DDD;
    overflow: hidden;
    padding-bottom:10px;
    padding:0px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: display .5s;
}

.lnkname_xl.slideDowns{
    display: block;
}

.lnkname_xl a{
    display: block!important;
    height:36px!important;
    line-height:36px!important;
    padding-left:15px;
    color: #999;
    font-size: 13px;
    font-weight: 500;
}

.lnkname_xl a:hover{
    background-color: #F6F6F6;
    color:#00ACF0;
}

.ylogin a:hover,.nlogin a:hover{
    color:#00ACF0;
}

.lnkname_xl a:last-child{
    margin-bottom:5px;
}

.login_namez  .fa-chevron-down{
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform-origin: 50% 50% 0;
    transition: transform .2s ease-in 0s;
}

.login_namez.chevdown .fa-chevron-down{
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform-origin: 50% 50% 0;
    transition: transform .2s ease-in 0s;
}

/* 搜索*/
#search{
    position: relative;
    float: left;
    height: 40px;
    margin-top:20px;
    width: 50px;
    z-index:15;
}

#searchContent{
    position:absolute;
    height:inherit;
    right:0px;
    top:0px;
    transition: width .5s;
    overflow: hidden;
    z-index:5;
    border-radius: 10px;
}

#search input{
    width:100%;
    height:40px;
    line-height:40px;
    border:1px solid #EEE;
    border-radius: 20px;
    display:block;
    color:#666;
    padding:0px 24px 2px 10px;
}

.searchicobox{
    margin:2px;
    border-right:1px solid #EEE;
    border-left:1px solid #EEE;
    height:36px;
}

#search  .iconfont{
    position: absolute;
    display: block;
    font-size: 24px;
    color: #d4dce2;
    line-height: 40px;
    text-align: center;
    transition: color .2s;
    z-index:15;
    width: 25px;
    height:38px;
    cursor:pointer;
    top:1px;
    left:0px;
    right:0px;
    margin:auto;
    border-radius: 6px;
    background-color: #FFF;
}

.search-hd{
    width:0px;
}

.search-hd.on {
    width: 320px;
}

/* 订阅、关注  */
.dingy .iconfont{
    font-weight: 600;
    font-size: 18px;
    color: #ccc;
}

.guanz .iconfont{
    font-weight: 600;
    font-size: 22px;
    color: #ccc;
}

.guanz .iconfont.editico{
    font-size: 19px;
    font-weight: 500;
}

.faCancel{
    font-size:12px;
}

/*相册页面设置*/
.list_title
{
    font-size: 30px;
    font-weight: bold;
}


/*******************侧边栏*****************************************/
/*侧边栏图片设置*/
#blog_img {
    width: 200px;
    border-radius: 20px;
}

/***************************************************************相册列表***************************************** */
#photolist{

}

#photolist #list{
    position: relative;
}

#photolist #list li{
    display:none;
}

.Photobox{
    overflow: hidden;
    width:400px;  /*335*/
    /*height:180px;*/
    text-align: center;
    border-radius: 4px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    background-color: #FBFBFB;
    padding:6px;
    margin-bottom:10px;
}

.dialog-box{
    display: block;
    position: relative;
}

.dialog-img{
    width:100%;
    height:100%;
    overflow-y: auto;
    text-align: center;
    background-color:#FFFFFF;
}

/*隐藏默认页面下一页时候顶部出现的页面*/
#homepage_top_pager {
    display: none;
}


/*blue-sky设置*/
body
{
    font-family: 'Comic Sans MS','微软雅黑';
}

#main {
    z-index: 10;
    background-image: url(http://127.0.0.1:4000/img/bg.gif);
    background-repeat: repeat;
    background-color: #FFFDFA;
}

#cnblogs_post_body h2
{
    font-family: 'Comic Sans MS','微软雅黑';
    font-size: 17px;

    margin: 15px 0 !important;
    padding: 5px 0 5px 20px;

    color: rgb(102, 102, 102);
    border-radius: 6px 6px 6px 6px;
    background: none repeat scroll 0 0 rgb(216, 216, 216);
}

#cnblogs_post_body code
{
    font-family: 'Comic Sans MS','微软雅黑';

    color: rgb(255, 0, 0);
    border-radius: 2px 2px 2px 2px;
    background: none repeat scroll 0 0 rgb(216, 216, 216);
}

h4
{
    color: #f01010;
    background-color: #fff;
}

em
{
    color: #f01010;
    background-color: #fff;
}


#author_profile_info
{
    display: none;
}

#green_channel
{
    display: none;
}
/*.feedbackManage {
    display: inline;
    float: right;
}
*/
/*显示隐藏侧边栏*/
/*默认隐藏侧边栏*/
#mainContent
{
    width:100%;
}

#sideBar{
    display: none;
}

#con
{
    position: fixed;
    top: 100px;
    right: 10px;

    padding: 5px;

    cursor: pointer;

    color: white;
    border-radius: 10px;
    background-color: #00ACF0;
    /*z-index: 1;*/
}

/*评论列表*/
/*
    div(.feedback_area_title):评论列表
    div(.feedbackNoItems)
    div(.feedbackItem):一个评论占一个;
        div(.feedbackListSubtitle):查看评论博主;
            div(.feedbackManage):回复 引用 删除;
        div(.feedbackCon clearfix):评论内容;
            div(.body_right):评论博主图片;
            div(.blog_comment_body):评论内容;
            div(.comment_vote):支持 反对;
*/

/*回复 引用 删除右移*/
.feedbackManage {
    display: inline;
    float: right;
}

.feedbackItem {
    border: 1px solid #E3E3E3;
    padding: 5px;
    margin-bottom: 10px;
    background-color: #F6F6F6;
    border-radius: 10px;
}

/*评论图片*/
.feedbackCon img:hover
{
    -webkit-transform: rotateZ(50deg);
       -moz-transform: rotateZ(50deg);
        -ms-transform: rotateZ(50deg);
         -o-transform: rotateZ(50deg);
            transform: rotateZ(50deg);
}

.feedbackCon img {
    border-radius: 40px;
    -webkit-transition: all .6s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    margin: 5px 10px 0px;
}




/*#comment_3458397_avatar
{
    clear:both; 
}
/**/
/*.body_right img
{
    width: 50px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
*/
.feedbackCon {
    padding-bottom: 5px;
}


/*评论文字设置*/
.blog_comment_body {
    color: #929292;
    padding-top: 13px;
}


/*赞同、反对图标*/
#div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
    width: 125px;
    text-align: center;
    margin-top: 10px;
}

#div_digg .diggit {
    background: url("http://127.0.0.1:4000/img/zan.gif") no-repeat;
    margin-top: 32px;
    margin-left: -180px;
    line-height: 50px;
    width: 60px;
}

#div_digg .buryit {
    display: none;
}

彩世界app 1

博客园侧边栏公告:

![xingoo](http://upload-images.jianshu.io/upload_images/1936405-12d3c0e71ed48282.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<canvas id="myCanvas" style="width:100%;" height="100" width="700">当前浏览器不支持canvas,请更换浏览器后再试</canvas>

<script type="text/javascript">
    var _navigator = $('#navlist');
    var html = "";
    html += addNag("书单","http://www.cnblogs.com/miqi1992/p/5537908.html");
    html += addNag("ELK","http://www.cnblogs.com/miqi1992/p/5708568.html");
    html += addNag("Spark","http://www.cnblogs.com/miqi1992/p/5708589.html");
    html += addNag("CSDN","http://blog.csdn.net/u010994304");
    html += addNag("Zookeeper","http://blog.csdn.net/u010994304");
        html += addNag("系统结构","http://www.cnblogs.com/miqi1992/p/7562201.html");
    _navigator.append(html);
</script>

其实我插入的内容,不是 style 就是 script,全部放 HTML 底部吧。

页首html代码:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//at.alicdn.com/t/font_q6220h6ytyncow29.css" rel="stylesheet">   
<link href="https://files.cnblogs.com/files/miqi1992/animsition.min.css" rel="stylesheet"> 
<link href="https://files.cnblogs.com/files/miqi1992/animate.css " rel="stylesheet"> 
<script type="text/javascript" src="http://files.cnblogs.com/files/webqiand/layer.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/webqiand/jquery-browser.js?v=20170131151"></script>   <!-- 判断浏览器类别  -->
<script type="text/javascript" src="http://files.cnblogs.com/files/webqiand/animsition.min.js"> </script>
<script type="text/javascript" src="http://www.king-euro.com/uploads/allimg/191225/0J951IC-4.jpg"></script>
<script type="text/javascript" src="http://www.king-euro.com/uploads/allimg/191225/0J9516237-5.jpg"></script>

引入 CSS 、加载 prettify 和设置 media print:

页脚html代码

<script type="text/javascript" src="http://www.king-euro.com/uploads/allimg/191225/0J951E31-6.jpg"></script>
<script type="text/javascript">
  var fileref = document.createElement("link");
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", 'http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css')
  document.getElementsByTagName("head")[0].appendChild(fileref)
var prettify = document.createElement("script");
  prettify.setAttribute("src", "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css");
  document.getElementsByTagName("head")[0].appendChild(prettify);
</script>

<style media="print">
#sub, .LeftCell, #digg_block, #comment_form, #sideBar{
display:none;
}
</style>

本文由彩世界app发布于新闻,转载请注明出处:Lepton博客园页面改版

关键词:

  • 上一篇:没有了
  • 下一篇:没有了