风格代码

css部分


    @media screen and (max-width: 768px) {
        .foot-3 {
            display: none;
        }
    }
    
    #footr {
        background: #3e434a
    }
    
    #header #blogTitle {
        background: url("https://img2020.cnblogs.com/blog/2305389/202102/2305389-20210217012728736-1711426551.png") no-repeat;
        height: 250px;
        top: 3px;
        left: 0;
        background-size: 100% 100%;
    }
    
    #blogTitle #Header1_HeaderTitle {
        font-size: 40px
    }
    
    #blogTitle h2 {
        font-size: 18px
    }
    
    #header {
        background-color: #e4e8f3
    }
    
    html body {
        background: 0;
        background-color: #e4e8f3
    }
    
    #blogTitle h2,
    #blogTitle h1 a {
        color: #169fe6;
        text-align: center
    }
    
    #header #blogTitle h2 {
        width: 435px;
        top: 21px;
        left: 0;
        text-shadow: none;
    }
    
    #blogTitle h1 {
        top: 32px;
        left: 0
    }
    
    .postBody #cnblogs_post_body p {
        line-height: 26px;
        margin: 0;
        padding: 0
    }
    
    #blogCalendar:hover {
        border: 1px solid #ff5e52
    }
    
    #blogCalendar {
        background-color: #fff;
        border: 1px solid #dedede
    }
    
    .totop {
        position: fixed;
        right: 50px;
        bottom: 50px;
        z-index: 999
    }
    
    .totop img {
        opacity: .6;
        filter: alpha(opacity=60)
    }
    
    .totop img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100)
    }
    
    #profile_block {
        display: none
    }
    
    #navigator.full {
        position: fixed;
        top: 0;
        z-index: 10000;
        width: 100%;
        background-color: #2778af;
        float: left
    }
    
    #footer {
        color: #ddd;
        padding: 20px 0;
        border-top: 1px solid #eaeaea;
        margin-top: 0;
        margin-bottom: 0
    }
    
    #footr {
        position: relative;
        height: 200px;
        width: 100%;
        background: #2a363c
    }
    
    #footr2 {
        width: 1200px;
        margin: auto
    }
    
    #foot1 {
        width: 33%;
        padding-top: 30px
    }
    
    #foot1 i {
        font-size: 20px;
        font-family: '微软雅黑', Arial, Helvetica, sans-serif;
        font-style: normal;
        color: #fff
    }
    
    #foot1 ul {
        list-style: none
    }
    
    .bing {
        height: 250px;
        text-align: center;
        line-height: 250px;
        overflow: hidden
    }
    
    .bing img {
        width: 888px;
        position: relative;
        top: -150px
    }
    
    .container {
        padding-bottom: 10px
    }
    /* 去掉背景黑板 */
    
    #header #blogTitle h1 {
        text-shadow: none;
        color: #7d8b8d;
        background: none;
        top: -20px;
        height: 105px;
    }
    /* 滚动部分 */
    
    .scroll {
        width: 290px;
        height: 300px;
        border: 1px solid #ccc;
        line-height: 26px;
        font-size: 12px;
        overflow: hidden;
    }
    
    .scroll img {
        width: 288px;
    }
    /* 侧边栏轮播图部分 */
    
    .qz img {
        width: 298px;
    }
    
    .qz p {
        text-align: center;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        margin-bottom: 10px;
    }
    
    .scroll {
        width: 298px;
        height: 300px;
        border: 1px solid #ccc;
        line-height: 26px;
        font-size: 12px;
        overflow: hidden;
    }
    
    .scroll img {
        width: 298px;
    }
    /* 搜索框 */
    
    #sidebar_search_box #widget_my_zzk {
        padding: 15px 0 21px 15px;
    }
    /* 页面宽度 */
    
    .no-navbar #main {
        max-width: 85%;
    }
    
    #main #mainContent {
        max-width: 100%;
        flex: 0 1 100%;
    }
    
    #home #blogTitle {
        width: 85%;
        background-size: 100%;
        height: 200px;
    }
    /* 侧边栏空隙 */
    
    .no-navbar #sideBar {
        margin: 0 0 0 20px;
    }
    
    .no-navbar #navList {
        width: 80%;
    }
    /* 底部css */
    
    .foot-1 {
        background-color: #0184b2;
        padding: 60px 0 20px 0;
        color: #c1c1c1;
        font: normal 15px/1.8 Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", Verdana, Tahoma, sans-serif;
        font-weight: inherit;
        box-sizing: border-box;
    }
    /* background-color: #030D28; */
    
    .foot-2 {
        padding-right: 10px;
        padding-left: 10px;
        margin-right: auto;
        margin-left: auto;
        width: 85%;
    }
    
    .foot-3 {
        margin-right: -10px;
        margin-left: -10px;
        width: 100%;
        margin: auto;
        text-align: center;
 
    }
    
    .foot-4 {
        width: 32%;
        display: inline-block;
        margin-left: 1%;
        height: 220px;
    }
    
    .title1 {
        position: relative;
        color: #e8e8e8;
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 30px;
        line-height: 1.2;
    }
    
    .title1:before {
        position: absolute;
        content: '';
        left: 0;
        bottom: -10px;
        width: 40px;
        height: 1px;
        background-color: #FF3657;
    }
    
    .post1 {
        line-height: 25px;
        margin: 0;
    }
    
    .dyh {
        display: inline-block;
        width: 13px;
        height: 12px;
        background: url("https://img2020.cnblogs.com/blog/2305389/202102/2305389-20210216225541865-128764072.png") no-repeat;
        margin: auto;
        background-size: cover
    }
    
    .foot-1 ul {
        list-style: none;
    }
    
    .neirong a {
        line-height: 33px;
        color: #c1c1c1;
        text-decoration: none;
    }
    
    .foot-1 a:hover {
        color: #FF3657;
        text-decoration: none;
    }
    
    .foot-1 a:visited {
        text-decoration: none;
    }
    
    .foot-1 a,
    a:link {
        text-decoration: none;
        transition: color ease 300ms;
        -moz-transition: color ease 300ms;
        -webkit-transition: color ease 300ms;
        -o-transition: color ease 300ms;
        -ms-transition: color ease 300ms;
    }
    
    .weixin img {
        height: 152px;
        border-radius: 7px;
    }
    
    .post2 {
        display: inline-block;
        left: 18%;
        position: relative;
        top: -43px;
    }
    
    .post3 {
        width: 200px;
        margin: auto;
        display: inline-block;
        margin-left: 15%;
        position: relative;
        top: 0px;
    }
    
    .post2 {
        margin-top: 0;
    }
    
    .post2 ul {
        margin-top: 0;
    }
    
    .foot-41 {
        position: relative;
        top: -121px;
    }
    
    .img2 img {
        height: 200px;
        margin-left: 60px;
        border-radius: 10px;
    }
    
    .copy {
        text-align: center;
        font-size: 13px;
        color: rgb(94, 93, 93);
    }
    
    .link-1 {
        text-align: left;
    }

侧边栏部分

 

<div class="scroll">
    <ul style="margin-top: -21px;">
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_21021612341714.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_21021612341313.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_21021612340812.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"><img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_2102161230191.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_2102161230242.jpg" alt="沙画"></a>
        </li>
        <li>
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_2102161230273.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_2102161230304.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_2102161233466.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_2102161233537.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_2102161233568.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_2102161233599.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_21021612340310.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_21021612340511.jpg" alt="沙画"></a>
        </li>
        <li class="margin-b-5 padding-5">
            <a href="http://www.xcshahua.com" target="_blank"> <img src="https://images.cnblogs.com/cnblogs_com/blogs/665537/galleries/1932166/o_21021612342015.jpg" alt="沙画"></a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    (function($) {
        $.fn.scroll = function(options) {
            var defaults = {
                speed: 30,
                direction: 'vertical'
            };
            var opts = $.extend({}, defaults, options),
                intId = [];

            function marquee(obj, step, direction) {
                if (direction == 'horizantal') {
                    obj.find("ul").animate({
                        marginLeft: '-=1'
                    }, 0, function() {
                        var s = Math.abs(parseInt($(this).css("margin-left")));
                        if (s >= step) {
                            $(this).find("li").slice(0, 1).appendTo($(this));
                            $(this).css("margin-left", 0);
                        }
                    });
                } else if (direction == 'vertical') {
                    obj.find("ul").animate({
                        marginTop: '-=1'
                    }, 0, function() {
                        var s = Math.abs(parseInt($(this).css("margin-top")));
                        if (s >= step) {
                            $(this).find("li").slice(0, 1).appendTo($(this));
                            $(this).css("margin-top", 0);
                        }
                    });
                }
            }
            this.each(function(i) {
                var speed = 0 < 100 - opts["speed"] && 100 - opts["speed"] <= 100 ? 100 - opts["speed"] : 30;
                var direction = opts["direction"] == 'vertical' || opts["direction"] == 'horizantal' ? opts["direction"] : 'vertical';
                var _this = $(this);
                intId[i] = setInterval(function() {
                    var sh;
                    if (direction == 'horizantal') {
                        sh = _this.find("ul").find("li:first").outerWidth(true);
                    } else {
                        sh = _this.find("ul").find("li:first").outerHeight(true);
                    }
                    marquee(_this, sh, direction);
                }, speed);
                _this.hover(function() {
                    clearInterval(intId[i]);
                }, function() {
                    intId[i] = setInterval(function() {
                        var sh;
                        if (direction == 'horizantal') {
                            sh = _this.find("ul").find("li:first").outerWidth(true);
                        } else {
                            sh = _this.find("ul").find("li:first").outerHeight(true);
                        }
                        marquee(_this, sh, direction);
                    }, speed);
                });
            });
        }
    })(jQuery);

    $(function() {
        $('.scroll').scroll({
            speed: 80, // 调节数值为1-100，越大速度越快
            // direction：'vertical'（可选）vertical向上滚动，horizantal向左滚动
        });
    });
</script>



<script>
    $(function() {
        if ($("#sideBar").length > 0) {
            var offset = $("#sideBar").offset();

            $(window).scroll(function() {
                var scrollTop = $(window).scrollTop();

                //如果距离顶部的距离小于浏览器滚动的距离，则添加fixed属性。

                if (offset.top < scrollTop) $("#sideBar").addClass("fixed");

                //否则清除fixed的css属性

                else $("#sideBar").removeClass("fixed");

            });

        }

    });
</script>

<style>
    .fixed {
        position: fixed;
        top: 20px;
        width: 250px;
    }
</style>

底部部分

 

<div class="foot-1">
    <div class="foot-2">
        <div class="foot-3">

            <div class="foot-4">
                <div class="post3">
                    <div class="weixin">
                        <a href="https://img2020.cnblogs.com/blog/2305389/202102/2305389-20210218234626744-1371948098.jpg" target="_blank"> <img src="https://img2020.cnblogs.com/blog/2305389/202102/2305389-20210218234626744-1371948098.jpg" alt="珠海小川沙画工作室" srcset=""></a>
                    </div>
                    <div>
                        扫码联系小川老师制作沙画作品（点击放大）！
                    </div>
                </div>
            </div>

            <div class="foot-4">
                <div class="img2">
                    <a href="https://www.cnblogs.com/ban1234/gallery/1932166.html" target="_blank"> <img src="https://img2020.cnblogs.com/blog/2305389/202102/2305389-20210218235941427-1761723568.png" alt=""></a>
                </div>
            </div>



            <div class="foot-4 link-1">

                <div class="post2">
                    <ul>
                        <!-- li开始 -->
                        <li class="post2-1">
                            <span class="dyh">
                            </span>
                            <span class="neirong">
                                <a href="http://www.xcshahua.com" target="_blank">小川沙画工作室</a>
                            </span>
                        </li>
                        <!-- li结束 -->
                        <li class="post2-1">
                            <span class="dyh">
                            </span>
                            <span class="neirong">
                                <a href="http://www.9ki.com" target="_blank">飞火流云的博客</a>
                            </span>
                        </li>
                        <li class="post2-1">
                            <span class="dyh">
                            </span>
                            <span class="neirong">
                                <a href="https://www.cnblogs.com/ban1234/" target="_blank">半亩方田</a>
                            </span>
                        </li>
                        <li class="post2-1">
                            <span class="dyh">
                            </span>
                            <span class="neirong">
                                <a href="mailto:rzf20@163.com" target="_blank">rzf20@163.com</a>
                            </span>
                        </li>
                    </ul>
                </div>

            </div>


        </div>
    </div>





    <div class="copy">
        <span>
            ©2021 · 基于博客园 · 半亩方田一鉴开 天光云影共徘徊 问渠那得清如许 为有源头活水来 · 始于 2021.2.17 ·
            <script
                type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_1278104559'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/stat.php%3Fid%3D1278104559%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
        </span>
    </div>
</div>







<div class="totop">
    <img src="https://img2020.cnblogs.com/blog/2305389/202102/2305389-20210217213254819-871027666.jpg" alt="">
</div>
<script>
    //顶部导航固定
    $(document).ready(function() {
        var navOffset = $("#navList").offset().top;
        $(window).scroll(function() {
            var scrollPos = $(window).scrollTop();
            if (scrollPos >= navOffset) {
                $("#navigator").addClass("full");
            } else {
                $("#navigator").removeClass("full");
            }
        });
    });
    //轮播图 插入html
    //返回顶部
    var topMain = $(".head").height()
    $(window).scroll(function() {

        if ($(window).scrollTop() > topMain) {
            $(".totop").slideDown(500);
        } else {
            $(".totop").slideUp(500);
        }
    });
    $(".totop").click(function() {
        $("body,html").animate({
            scrollTop: 0
        }, 500)
    });
    $('#footer').remove();
</script>