搜索
查看: 3378|回复: 4

[教程] 简简单单der网页美化

[复制链接]
发表于 2021-4-24 19:50:49 | 显示全部楼层 |阅读模式
阅读目录


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

正文音乐播放器
用的是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 许可协议。转载请注明出处!

回复

使用道具 举报

发表于 2021-4-24 19:58:17 | 显示全部楼层
转载的文章也可以吗?
期待楼主原创文章
回复

使用道具 举报

发表于 2021-4-24 23:45:53 | 显示全部楼层
jyssysz 发表于 2021-4-24 19:58
转载的文章也可以吗?
期待楼主原创文章

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

使用道具 举报

发表于 2021-4-25 06:56:58 | 显示全部楼层
LearnSth 发表于 2021-4-24 23:45
他应该是转载了自己的文章吧

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

使用道具 举报

发表于 2021-4-26 09:59:51 | 显示全部楼层
学习了。
回复

使用道具 举报

联系我们(Contact)|手机版|萝卜头IT论坛 ( 苏ICP备15050961号-1 )

GMT+8, 2024-11-24 07:01 , Processed in 0.086147 second(s), 21 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表