html友情链接代码美化版

友情链接是网站之间的一种互相推广的方式，在网站中加入友情链接，不仅可以增加网站的链接数，更可以促进网站间的互利合作。那么如何在网页中添加友情链接呢？这里介绍一种美化版的HTML友情链接代码。

<div class="link">
    <ul>
        <li><a href="http://www.site1.com" target="_blank">网站1</a></li>
        <li><a href="http://www.site2.com" target="_blank">网站2</a></li>
        <li><a href="http://www.site3.com" target="_blank">网站3</a></li>
        <li><a href="http://www.site4.com" target="_blank">网站4</a></li>
    </ul>
</div>

以上代码使用了<div>标签将友情链接包裹起来，使得样式的变化更加容易控制，其中用了<ul>和<li>来实现列表的效果。在每个<li>中使用<a>标签设置超链接，其中的href属性表示链接地址，target属性为"_blank"表示在新的标签页中打开链接。

下面为样式代码：

.link {
    background-color: #f5f5f5;
    padding: 10px;
    margin: 10px 0;
}

.link ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.link ul li {
    display: inline-block;
    margin-right: 20px;
}

.link ul li:last-child {
    margin-right: 0;
}

.link ul li a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

.link ul li a:hover {
    color: #87CEEB;
}

以上为友情链接的样式代码，其中设置了背景色、内边距和外边距，同样使用了列表标签，并将每个列表项设置为inline-block，用margin-right属性为其添加右边距，使用:last-child伪类取消最后一个列表项的右边距。在超链接a标签中设置颜色、字体加粗和文本装饰效果，并使用transition属性添加过渡效果，当鼠标移到上面时颜色变为蓝色。

以上就是使用HTML实现友情链接的美化版代码，除了自己手动添加超链接之外，还可以使用javascript动态添加友情链接，实现时只需要修改js代码即可。优化网站建设，加强网站间的合作，互利共赢！