预览如上图
最近这两天在建造自己的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;