简简单单der网页美化
阅读目录[*]前提
[*]正文
回到顶部
前提快一个月没写博客了，主要是要上课
也没啥想法了，有提议的评论鸭回到顶部
正文音乐播放器用的是aplayer.js插件
代码：
``一定要下载到本地再上传！
然后插入代码：
<script type="text/javascript"> var ap = new APlayer({ element: document.getElementById('player'), narrow: false, autoplay: false, showlrc: true, fixed:1, theme: '#F5F5F5', music: [{ title: "尹光 胡美儀 精選CD", author: "", url: "https://disk.mctg69.xyz/0:/yt1s.com%20-%20%E5%B0%B9%E5%85%89%20%E8%83%A1%E7%BE%8E%E5%84%80%20%20%E7%B2%BE%E9%81%B8CD.mp3", pic: "https://i.loli.net/2021/04/23/N27dGHI84AZaY5m.png" } ] }); ap.init(); </script>
效果：
https://i.loli.net/2021/04/24/OCu8lgbd5zZPGw1.png回到顶部在css插入：
#back-to-top123 { bottom: 0; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer; }
然后呢可以选：
1.我在用的<span id="back-to-top123"><a href="#top"><p>返回顶部</p><img src="https://images.cnblogs.com/cnblogs_com/MCTG/1959537/t_210423114051598187babf39e.gif" height="50" width="50"></a></span>
2.比较复古的<span id="back-to-top123"><a href="#top"><img src="https://images.cnblogs.com/cnblogs_com/MCTG/1959537/t_2104231152466C44BD90-A8F0-490C-A937-B4B96C3B827D.gif"></a></span>
二选一
或者去 阿里云图标库（https://www.iconfont.cn/）下载
效果：
https://i.loli.net/2021/04/24/kduta2K1YITFBnj.png改字体f12打开面板，找到改文字的标签
https://i.loli.net/2021/04/24/XH4RFQJ8qMweSBb.png
然后到https://bit.ly/3elpR1q找到喜欢的效果，插入标签后面
https://i.loli.net/2021/04/24/uGmAqwr6tDvVfKU.png
如：.catListTitle{
text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
font-size: 30px;
color:#fff;
} `访问统计我是用的flagcounter
但是很明显直接用是不行的
我的解决方案是用短网址：
1.去https://flagcounter.com/生成个链接
2.打开短网址（推荐bit.ly）
3.把链接缩短（图2）
4.放博客里
然后用缩短的链接替换原本的
https://i.loli.net/2021/04/24/RDjZEbcaB93Q4Oq.png
https://i.loli.net/2021/04/24/WxbHutYqDjMFzhc.png圆形头像我觉得放公告里不咋好看，所以就不放了
在css里输入：
.round_icon{ width: 100px; height: 100px; display: flex; border-radius: 50%; align-items: center; justify-content: center; overflow: hidden; }
width和height可以改（高度和宽度）
然后在头像的img标签里加入:
class="round_icon"
如：https://www.cnblogs.com/MCTG/p/avatar.png
效果：
https://i.loli.net/2021/04/24/HSz8Lc4QmhoVDZ6.png
本文作者： MCTG天哥 本文链接： https://cnblogs.com/mctg 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
转载的文章也可以吗？
期待楼主原创文章 jyssysz 发表于 2021-4-24 19:58
转载的文章也可以吗？
期待楼主原创文章
他应该是转载了自己的文章吧 LearnSth 发表于 2021-4-24 23:45
他应该是转载了自己的文章吧
谢谢提醒，楼主可能是转载了自己的文章。谢谢楼上的两位。 学习了。
页:
[1]