之前友链里面什么也没放。现在既然打算把一些朋友的链接放这里，那就还是搞漂亮点，只摆一个链接的话确实是有点寒酸
自己就尝试着写了一下，虽然我了解过一些CSS和HTML相关的内容，但毕竟是从来都没有写过东西，用起来还是十分生疏，折腾了半天。
代码什么的都还蛮乱的，就还请谅解。有些地方的颜色是用十六进制数表示，有些地方是用rgba表示的，十六进制的是我原先已经选好的颜色，使用rgba的就是后来又更改时VScode里面自动转换的。
我在我的博客上测试时发现网页图像的样式怎么设置也不会转变成我所想要的样式，但是它在VScode里面预览时确实是没问题的，结果是改来改去也没改出个什么效果。后来突然想到可能是博客里面已经关于图像有过一些样式的设定了，于是我就把所有的样式都改成内联样式，这就成功了。
如果你也遇到了同样的问题，你也可以把相关的样式全部改成内联样式试试。
看效果到友链界面就行了
代码
<style>
.friendp {
display:inline-block;
margin-left: 0px;
}
.friendb {
display:inline-block;
margin-left: 15px;
text-shadow: 5% 5% 5% rgb(164, 164, 164);
}
.friendblock{
background-color:#e87fb3;
border: 8px solid rgba(255, 0, 0, 0.334);
border-radius: 25px 25px;
height: 90px;
width: 280px;
display: inline-block;
margin-left: 5px;
margin-top: 4px;
}
.friendpic{
height:72px;
width:72px;
margin-top: 10%;
margin-bottom: -15%;
margin-left: 10%;
border-radius: 45% 30% 30% 15%;
}
.friendlink{
TEXT-DECORATION:none;
}
.friendlink:visited{
color: white;
}
.friendlink:link{
color: rgb(229, 229, 229);
}
.friendlink:hover{
text-decoration:underline;
}
</style>
<div class="friendblock">
<a target="_blank" href="网页链接" class="friendlink">
<div class="friendp">
<img src="网页图像链接" alt="avatar.jpg" class="friendpic"/>
</div>
<div class="friendb" >
<b>
网页名字
<br/><br/>
网页描述
</b>
</div>
</a>
</div>
