CSS和HTML实现列表元素横向排列与鼠标悬停图片放大

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倍}