Blog custom style and script code

Others 2019-10-03 19:56:42 views: null

Make a copy of it, and sometimes add a new style and add a small function fear jumped brought back.

CSS：

/*公用*/
body {
    font-size: 15px;
    padding: 0;
    margin: 0;
    font-family: "微软雅黑", "宋体", Arial;
    background: #205424 url('http://images.cnblogs.com/cnblogs_com/zhangmingzhao/1006791/o_timg.jpg') no-repeat top center fixed;
    min-width: 1200px;
}

#home {
    /*不透明度*/
    opacity: 0.85;
    filter: alpha(opacity=95);
    box-shadow: 0 0 10px #000;
    margin: 40px auto;
    width: 1200px;
    background: #fff;
    overflow: auto;
    border: solid 1px #fff;
}

/*段落*/
.postBody p,
.postCon p {
    margin: 7px 0;
    line-height: 24px;
}

h1 {
    margin: 0;
}

h3 {
    font-size: 15px;
    font-weight: bold;
}

/*超链接*/
a {
    color: #464646;
    text-decoration: none;
}

#BlogPostCategory a {
    color: #205424;
    text-decoration: underline;
}

/* #BlogPostCategory a:hover {
    text-decoration:underline;
  } */
p a {
    color: #bd6464;
    text-decoration: underline;
}

/* #post_view_count {
    display: none;
  }
  
  #post_comment_count {
    display: none;
  } */

a:hover {
    text-decoration: underline;
}

/* a:visited,a:hover {
    color:#464646;
  } */
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

image {
    border: none;
}

#header {
    padding: 20px;
}

/*博客标题*/
#blogTitle,
#blogTitle a {
    font-weight: bold;
    color: #666;
}

#blogTitle .title {
    margin-top: 10px;
    height: 120px;
    line-height: 120px;
    font-size: 36px;
    padding-left: 120px;
    background: #fff url('http://images.cnblogs.com/cnblogs_com/zhangmingzhao/1006791/o_2.jpg') no-repeat;
}

.headermaintitle {}

#blogTitle,
#blogTitle a:hover {
    text-decoration: none;
}

/*子标题*/
.subtitle {
    padding-left: 30px;
    font-size: 14px;
    color: #999;
    font-weight: normal;
    margin: 10px 0;
}

/*导航栏*/
#navigator {
    font-size: 16px;
    height: 48px;
    background: #55895B;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

#navList li {
    margin: 0;
    line-height: 48px;
    display: inline-block;
    float: left;
}

#navList li:hover {
    background: #6DA47D;
}

#navList li a {
    padding: 0 30px;
    text-decoration: none;
    line-height: 48px;
    border: 0;
    color: #fff;
    display: -moz-inline-box;
    display: inline-block;
}

.blogStats {
    height: 48px;
    color: #fff;
    line-height: 48px;
}

#main {
    padding: 20px;
}

/*左边*/
#sideBarMain {
    padding: 0 10px 0 0;
    background: #fff;
    margin: 0 0 20px 0;
    width: 190px;
    font-size: 12px;
    line-height: 22px;
}

#sideBarMain a {
    color: #666;
}

#leftcontentcontainer {
    color: #666;
}

.newsItem {
    color: #666;
}

/*公告*/
#profile_block {
    margin-top: 0px;
    line-height: 24px;
    text-align: left;
}

/*主面板*/
#mainContent {
    margin-top: 0px;
    padding-top: 0px;
    padding-right: 0px;
    background: #fff;
    padding-bottom: 0px;
    float: right;
    width: 960px;
    padding-left: 0px;
}

/*每日文章列表*/
.day {
    background: #fff;
    padding: 0;
    margin: 0 0 20px 0;
}

/*博客标题*/
.postTitle a {
    color: #464646;
}

.postTitle {
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #464646;
    background: url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
    padding-left: 30px;
}

.dayTitle {
    display: none;
}

/*摘要*/
.c_b_p_desc {
    padding: 10px;
    line-height: 24px;
    color: #888;
}

.c_b_p_desc a {
    color: #888;
}

.c_b_p_desc a:hover {
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}

/*右侧图片*/
.desc_img {
    margin-left: 10px;
    border: solid 1px #fff;
    box-shadow: 0 0 10px #aaa;
}

/*博文页*/
#topics .post {
    background: #fff;
}

.postCon {
    padding: 10px 20px 0 20px;
}

.postDesc {
    margin: 0 30px;
    margin-bottom: 2px;
    padding: 8px 0px;
    font-size: 12px;
    color: #aaa;
    background: #fff;
    text-align: right;
}

.postDesc a {
    color: #AAA;
}

.postBody {
    padding: 0;
}

/*google搜索框*/
#google_q,
#q {
    height: 22px;
    width: 120px;
    border: solid 1px #ccc;
    box-shadow: inset 0 0 3px #ddd;
    border-radius: 4px;
}

/*搜索按钮*/
.btn_my_zzk {
    font-family: 'Microsoft Yahei';
    border: none;
    height: 26px;
    width: 60px;
    padding: 1px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    background: #55895B;
    border-radius: 4px;
    color: #fff;
}

.btn_my_zzk:hover {
    background: #6DA47D;
}

/*评论按钮*/

#btn_comment_submit {
    border: none;
    height: 48px;
    width: 120px;
}

/*评论按钮*/
.comment_btn {
    font-family: 'Microsoft Yahei';
    border: none;
    height: 48px;
    width: 120px;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    background: #55895B;
    color: #fff;
}

#btn_comment_submit:hover {
    background: #6DA47D;
}

/*评论标题*/
.feedback_area_title {
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #55895B;
    border-bottom: solid 6px #55895B;
}

.feedbackListSubtitle {
    font-size: 12px;
    color: #888;
}

.feedbackListSubtitle a {
    color: #888;
}

.comment_quote {
    background: #FCFAAC;
    padding: 15px;
    border: 1px solid #CCC;
}

#commentform_title {
    color: #55895B;
    background-image: none;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    padding: 10px 20px 10px 10px;
    font-size: 24px;
    font-weight: bold;
    border-bottom: solid 6px #55895B;
}

/*评论框*/
#comment_form {
    margin: 10px 0;
    padding: 0;
}

.commentform {
    margin: 10px 0;
    padding: 10px 20px;
    background: #fff;
}

/*评论输入域*/
#tbCommentBody {
    font-family: 'MIcrosoft Yahei';
    margin-top: 10px;
    width: 940px;
    max-width: 940px;
    min-width: 940px;
    background: white;
    color: #333;
    border: 2px solid #fff;
    box-shadow: inset 0 0 8px #aaa;
    padding: 10px;
    height: 120px;
    font-size: 14px;
    min-height: 120px;
}

/*评论条目*/
.feedbackItem {
    font-size: 14px;
    line-height: 24px;
    margin: 10px 0;
    padding: 20px;
    background: #F2F2F2;
    box-shadow: 0 0 5px #aaa;
}

.feedbackListSubtitle {
    font-weight: normal;
}

/*分类页*/
.entrylist {
    padding: 10px 20px;
    background: #fff;
}

.entrylistItem {
    margin: 10px 0;
    padding: 10px;
}

.entrylistPosttitle {
    font-size: 18px;
    font-weight: bold;
    background: url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
    padding-left: 30px;
}

.entrylistPostSummary {
    padding: 10px;
}

.entrylistItemPostDesc {
    font-size: 12px;
    color: #999;
    padding-left: 40px;
}

/*尾部*/
#footer {
    font-size: 12px;
    margin: 20px;
    padding: 12px;
    text-align: center;
    background: #55895B;
    color: #DDD;
    font-size: 14px;
}

/*文章内图片*/
#cnblogs_post_body p img {
    margin: 10px;
}

/*顶一下*/
.diggnum {
    font-size: 28px;
    color: #6DA47D;
    font-family: 'Microsoft Yahei';
}

#div_digg .diggnum {
    line-height: 100px;
}

.diggit {
    float: left;
    width: 340px;
    height: 256px;
    background: url('http://images.cnblogs.com/cnblogs_com/zhien-aa/859075/o_215836877z8yhb8xbfydgb.gif') no-repeat;
    background-position: 0 0;
    text-align: center;
    cursor: pointer;
}

.diggit:hover {
    background-position: -128px 0;
}

/*踩一下（园友反映，这个有点“邪恶”，呵呵，其实是我没来得及设计这个背景图片，就暂时把它隐藏了……可以去掉这句话）*/
.buryit {
    display: none;
}

.diggword {
    display: none;
}

/*green_channel*/
#green_channel {
    text-align: right;
    background: #6DA47D;
    padding-left: 20px;
    font-weight: normal;
    font-size: 15px;
    width: 920px;
    border: none;
    color: #fff;
    padding: 20px;
    border-radius: 4px;
}

/*最新评论*/
#myposts .PostList {
    font-size: 14px;
    line-height: 24px;
    margin: 10px 0;
    padding: 20px;
    background: #F2F2F2;
    box-shadow: 0 0 5px #aaa;
}

#myposts .postTitl2 a {
    color: #6DA47D;
}

#profile_block {
    display: none;
}

#live2dcanvas {
    border: 0px !important;
}

/* 头像飘动效果 */
.flag {
    animation: wave ease-in-out infinite;
}

.flag>li {
    height: 100%;
    float: left;
    background-image: url("http://5b0988e595225.cdn.sohucs.com/images/20181030/4ec6dab584504596afd540fe7cc17e42.jpeg");
    background-size: auto 100%;
    animation: flag ease-in-out infinite;
}

js + next sidebar Code:

<a href = "http://blog.csdn.net/major_zhang?viewmode=contents"><font size="3" color="red">csdn博客:http://blog.csdn.net/major_zhang</font></a>

<hr>

<a target="_blank" href="https://github.com/ZhangMingZhao1" style="text-decoration:none"><font size="3" color="red">我的Github</font><img width="200px" src="http://images.cnblogs.com/cnblogs_com/zhangmingzhao/1006783/o_20150130090123ad7e329845.jpg"></a>

<hr>
<a id="green_channel_follow" onclick="follow('4eb13d33-c2c8-443a-e57b-08d49c350eca');" href="javascript:void(0);"><font size="3" color="blue">博客园上关注我</font></a>
<hr>
<font size="3" color="red">有的文章里面的图片失效,这是因为首发写在csdn的博客上,现在csdn增加了图片防盗链，失效的图片请转到对应的我的csdn博客就好</font>

<script color="255,0,0" opacity='0.7' count = ’200‘ src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js"></script>

<script>
  var a = parseInt(document.getElementById('post_view_count').innerHTML);
 document.getElementById('post_view_count').innerHTML = a+100;
</script>

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js"></script>
  <script type="text/javascript">
    L2Dwidget.init();
  </script>

<script>
    const flag = document.querySelector('#flag')
    const image = new Image()
    image.src = 'http://5b0988e595225.cdn.sohucs.com/images/20181030/4ec6dab584504596afd540fe7cc17e42.jpeg'
    const flagWidth = 130
    const flagHeight = 180
    let imgWidth = ''
    let imgHeight = ''
    const imgRender = ({
        sliceCount = 70,
        amplitude = 20,
        period = 1.5,
        duration = 2,
    }) => {
        const style = document.createElement('style')
        const styleSplinter = []
        const sliceCountPerPeriod = Math.floor(sliceCount / period)
        const sliceWidth = imgWidth / sliceCount
        const formula = sliceCountPerPeriod + 'n+'
        const delay = (duration * period / sliceCount)
        for (let i = 0; i < sliceCount; ++i) {
            if (i < sliceCountPerPeriod) {
                styleSplinter.push(`
                .flag > li:nth-child(${formula + i}) {
                    animation-delay: -${delay * (sliceCountPerPeriod - i)}s;
                }
            `)
            }
            styleSplinter.push(`
            .flag > li:nth-child(${i}) {
                background-position: -${i * sliceWidth}px 0;
            }
        `)
        }
        styleSplinter.push(`
        @keyframes flag {
            0% { transform: translate3d(0, ${amplitude}px, 0); }
            50% { transform: translate3d(0, ${-amplitude}px, 0); }
            100% { transform: translate3d(0, ${amplitude}px, 0); }
        }
        @keyframes wave {
            0% { transform: translate3d(0, ${-amplitude}px, 0); }
            50% { transform: translate3d(0, ${amplitude}px, 0); }
            100% { transform: translate3d(0, ${-amplitude}px, 0); }
        }
        .flag {
            animation-duration: ${duration}s;
            animation-delay: -${delay * sliceCountPerPeriod}s;
        }
        .flag > li {
            animation-duration: ${duration}s;
            width: ${imgWidth / sliceCount}px;
        }
    `)
        style.innerHTML = styleSplinter.join('')
        flag.innerHTML = new Array(sliceCount + 1).join('<li></li>')
        document.documentElement.appendChild(style)
    }
    image.onload = () => {
        imgWidth = image.width
        imgHeight = image.height
        const ratio = image.width / image.height
        if (imgWidth > flagWidth) {
            imgWidth = flagWidth
            imgHeight = imgWidth / ratio
        }
        if (imgHeight > flagHeight) {
            imgWidth = imgHeight * ratio
            imgHeight = flagHeight
        }
        flag.style.width = imgWidth + 'px'
        flag.style.height = imgHeight + 'px'
        imgRender({
            sliceCount: 70,
            amplitude: 5, //振幅
            period: 1.5,
            duration: 2,
        })
    }
</script>

(That is, the dynamic picture image into small sections as possible, and then each of the cosine function to move up and down, left fixed containers need to add an integer multiple of a non-reverse movement cycle to.)

Guess you like

Origin www.cnblogs.com/zhangmingzhao/p/11620272.html
Recommended
Ranking
error: (-215:Assertion failed) !_img.empty() in function ‘cv::imwrite‘
Database migration between Navicat servers
Minimum number of rotation of the array: Array
balenaEtcher for mac (make a boot disk software) v1.5.67
Custom processing serialization and deserialization in jackson
Mu-en-mask system development software
Mastering Regular Expressions
Find mileage Java--
Web pages can not directly concern the public micro-channel number how to do? A key to arouse public concern number of micro-channel solutions
[CodeForces - 739B] Alyona and a tree Tree + [difference] + bipartite
Daily
More
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

Code World

© 2018 codetd.com