记录一下友链Page的Setup过程,非常无脑,搬砖就完了,感谢前辈的经验
Friend Links Setup
Reference
代码来自这篇博客
关于获取QQ头像的知乎专栏
Code
CSS Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
| <div class="post-body"> <div id="links"> <style> .links-content{ margin-top:1rem; } .link-navigation::after { content: " "; display: block; clear: both; } .card { width: 45%; font-size: 1rem; padding: 10px 20px; border-radius: 4px; transition-duration: 0.15s; margin-bottom: 1rem; display:flex; } .card:nth-child(odd) { float: left; } .card:nth-child(even) { float: right; } .card:hover { transform: scale(1.1); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); } .card a { border:none; } .card .ava { width: 3rem!important; height: 3rem!important; margin:0!important; margin-right: 1em!important; border-radius:4px; } .card .card-header { font-style: italic; overflow: hidden; width: 100%; } .card .card-header a { font-style: normal; color: #2bbc8a; font-weight: bold; text-decoration: none; } .card .card-header a:hover { color: #d480aa; text-decoration: none; } .card .card-header .info { font-style:normal; color:#a3a3a3; font-size:14px; min-width: 0; overflow: hidden; white-space: nowrap; } </style> <div class="links-content"> <div class="link-navigation"> <div class="card"> <img class="ava" src="https://q.qlogo.cn/g?b=qq&k=7PD14jYzQNoQ0KvkgCT3Xw&s=640" /> <div class="card-header"> <div> <a href="https://blog.woooo.tech/">Reverier</a> </div> <div class="info">XDSEC2019[Reverse、开发]</div> </div> </div> <div class="card"> <img class="ava" src="https://q.qlogo.cn/g?b=qq&k=UDUVtLNg8WvYmkaibG4wtIg&s=640" /> <div class="card-header"> <div> <a href="https://d33b4t0.com/">Deebato</a> </div> <div class="info">XDSEC2020[Crypto]</div> </div> </div> </div> </div> </div> </div>
|
获取Key:https://ptlogin2.qq.com/getface?&imgtype=1&uin=123456
通过Key获取头像:https://q.qlogo.cn/g?b=qq&k=xyOnRe5ML3Aw96iaaQ1hh6w&s=640
通过QQ号获取头像:https://q.qlogo.cn/g?b=qq&nk=123456&s=640