HTML
<div class="contact-me">
<h2>Get In Touch</h2>
<ul>
<li>
<a href="">
<img src="images/linkedin.png" alt="linkedin-img">
</a>
</li>
<li>
<a href="">
<img src="images/email.png" alt="email-img">
</a>
</li>
<li>
<a href="">
<img src="images/github.png" alt="github-img">
</a>
</li>
</ul>
</div>
CSS
.contact-me{
text-align: center; // 使内容居中(标题和列表中的图片)
}
ul li{
display: inline; // 使列表中的图片横向排列
margin-right: 50px; // 图片与图片之间的距离为50px
margin-bottom: 100px;
}
a{
text-decoration: none; // 出去链接的下划线(否则图片右下角有小黑点)
}
ul li img:hover{
transform: scale(1.15); // 鼠标悬停图片放大1.15倍
}