typecho:鼠标右键改造

预览如上图

最近这两天在建造自己的blog,美化一下

使用方法~

声明: 本人没有任何前端基础,都是从往上找来在修修改改,所以,可能会有问题

我甚至只能说是学了2小时

我使用的 是阿里巴巴矢量库,里面的图标都是我自己找到的,由于后面可能需要继续修改,所以可能那一天就失效了

下面是我使用的图标(编辑器不是好用,排版先这样吧)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akaQ0O4d-1651075727998)(https://www.nekoyume.xyz/usr/uploads/2022/04/3018956884.png)]

资源引用

<link rel="stylesheet" href="//at.alicdn.com/t/font_3361390_p8cbh4ri0df.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_3361389_rx0gh560aaf.css">

代码格式

<link rel="stylesheet" href="//at.alicdn.com/t/font_3361390_rr1lhb49le.css">

<style type="text/css">
    a {
     
        text-decoration: none;
    }

    div.usercm {
     
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        background-color: #fff;
        font-size: 13px !important;
        width: 130px;
        -moz-box-shadow: 1px 1px 3px rgba (0, 0, 0, .3);
        box-shadow: 0px 0px 15px #333;
        position: absolute;
        display: none;
        z-index: 10000;
        opacity: 0.9;
        border-radius: 8px;
    }

    div.usercm ul {
     
        list-style-type: none;
        list-style-position: outside;
        margin: 0px;
        padding: 0px;
        display: block
    }

    div.usercm ul li {
     
        margin: 0px;
        padding: 0px;
        line-height: 35px;
    }

    div.usercm ul li a {
     
        color: #666;
        padding: 0 15px;
        display: block
    }

    div.usercm ul li a:hover {
     
        color: #fff;
        background: rgba(170, 222, 18, 0.88)
    }

    div.usercm ul li a i {
     
        margin-right: 10px
    }

    a.disabled {
     
        color: #c8c8c8 !important;
        cursor: not-allowed
    }

    a.disabled:hover {
     
        background-color: rgba(255, 11, 11, 0) !important
    }

    div.usercm {
     
        background: #fff !important;