简简单单der网页美化

qwq

阅读目录

• 前提
• 正文
  

回到顶部

前提

快一个月没写博客了，主要是要上课
也没啥想法了，有提议的评论鸭

回到顶部

正文音乐播放器

用的是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>
效果：

回到顶部

在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/）下载
效果：

改字体

f12打开面板，找到改文字的标签

然后到https://bit.ly/3elpR1q找到喜欢的效果，插入标签后面

如：.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.放博客里
然后用缩短的链接替换原本的

圆形头像

我觉得放公告里不咋好看，所以就不放了
在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"
如：
效果：

本文作者： MCTG天哥 本文链接： https://cnblogs.com/mctg 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

jyssysz

转载的文章也可以吗？
期待楼主原创文章

胖娃娃

jyssysz 发表于 2021-4-24 19:58
转载的文章也可以吗？
期待楼主原创文章

他应该是转载了自己的文章吧

jyssysz

LearnSth 发表于 2021-4-24 23:45
他应该是转载了自己的文章吧

谢谢提醒，楼主可能是转载了自己的文章。谢谢楼上的两位。

xiaohu96

学习了。