• 给自己的博客添加一个侧边栏


      如何不使用JS,给自己的博客添加一个酷酷的侧边导航栏呢?详情请查看右侧导航栏,这是我自己做的一个导航栏,分别作用是:展示手机号,展示QQ,展示微信,跳转自己想要的网址(这里我放的是自己的还未完成的博客)

      分析一下这个侧边栏,首先是需要他不影响内部其他DOM元素并处于页面右侧,那么应该给他添加position:fixed;使它固定于页面右侧。

      注意,如果是想要给自己另作的网页,意思是可以使用JS的话,可以在window onload和resized的时候计算窗口高度WHeight与该侧边栏高度height,使得top等于二分之一的WHeight减去二分之一的height。

      紧接着是侧边栏的位移与颜色变化,如果想要良好的视觉感受但是动画相对比较简单的话,可以使用transition

    CSS代码

    .pageRightFloat {
        position: fixed;
        width: 200px;
        top: 200px;
        right: -150px;
        transition: top .4s ease 0s;
        transition-delay: .1s;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, .3);
    }
    
    .pageRightFloat>div {
        float: left;
        background-color: #31353D;
        transition: backgroundColor 0.4s ease-in-out 0s;
        transition: transform .8s ease 0s;
        cursor: pointer;
    }
    
    .pageRightFloat>div:hover {
        background-color: #3EA3FF;
    }
    
    .pageRightFloat>div:nth-child(1):hover {
        transform: translateX(-150px);
    }
    
    .pageRightFloatImgArea {
        box-sizing: border-box;
        float: left;
        width: 50px;
        height: 50px;
    }
    
    .pageRightFloatImgArea img {
        width: 30px;
        height: 30px;
        margin: 10px;
    }
    
    .pageRightFloatTelArea {
        box-sizing: border-box;
        float: left;
        width: 150px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        letter-spacing: 0.1em;
        text-align: center;
    }
    
    .pageRightFloatImgArea:last-child {
        width: 200px;
    }
    .pageRightFloatQQArea, .pageRightFloatWeiXinArea {
        box-sizing: border-box;
        position: relative;
        width: 120px;
        pointer-events: none;
        opacity: 0;
        transform: translateX(15px);
        transition: all 0.4s ease-in-out 0s;
    }
    
    .pageRightFloatQQArea>img, .pageRightFloatWeiXinArea>img {
        box-sizing: border-box;
        position: absolute;
        top: -30px;
        left: -120px;
        width: 100px;
        padding: 10px;
        border-radius: 10px;
        background: linear-gradient(90deg, #4e4efe 0%, #7e67fa 100%);
    }
    
    .pageRightTriangle {
        position: absolute;
        top: 25px;
        left: -20px;
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-left: 5px solid #7e67fa;
        border-bottom: 4px solid transparent;
    }

    HTML

    <div class="pageRightFloat">
        <div>
            <div class="pageRightFloatImgArea">
                <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063254%E7%94%B5%E8%AF%9D.png" alt="TelIcon" />
            </div>
            <div class="pageRightFloatTelArea">
                <p>14797992768</p>
            </div>
        </div>
        <div>
            <div class="pageRightFloatImgArea">
                <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063250QQ.png" alt="QQIcon" />
                </div>
                <div class="pageRightFloatQQArea">
                    <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063301qqcode.jpg" alt="qqcode" />
                    <div class="pageRightTriangle"></div>
                </div>
            </div>
            <div>
                <div class="pageRightFloatImgArea">
                    <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063258%E5%BE%AE%E4%BF%A1.png" alt="WeiXinIcon" />
                </div>
                <div class="pageRightFloatWeiXinArea">
                    <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119063304weixincode.png" alt="weixincode" />
                    <div class="pageRightTriangle"></div>
                </div>
            </div>
            <div>
                    <div class="pageRightFloatImgArea">
                            <a href="http://www.jobsofferings.cn/">
                                    <img src="https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_200119093157%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5.png" alt="linkIcon" />
                            </a>         
                    </div>
            </div>
    </div>

    这里的img是存在了博客园后面的相册里,然后取的文件链接。

    想创意其实是一个比较难的东西,其他的其实没有什么难度,大家有什么好看的UI设计也可以告诉我,我可以试着给大家做出来。

  • 相关阅读:
    EXCEL中统计个数问题
    Boot Windows XP from a USB flash drive
    转:用VHD文件将Windows 7安装到虚拟磁盘
    CPU性能排名
    活动目录维护
    IE7占用CPU资源非常高
    不得不看:Windows Data Protection
    硬盘模式为UDMA 2.
    转载:NC6400安装Win7系统驱动列表及注意事项
    HP笔记本电池
  • 原文地址:https://www.cnblogs.com/JobsOfferings/p/CSS_pageRightFloat.html
Copyright © 2020-2023  润新知