gpt4 book ai didi

html - 如何将外部 css 与 index.html 文件结合

转载 作者:太空宇宙 更新时间:2023-11-03 21:12:15 24 4
gpt4 key购买 nike

使用followwing fontowesome社交媒体链接,需要在社交媒体标志周围画一个圆圈。如何做到这一点?

<ul class="social-media list-inline" align="right">
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-envelope"></span></a></li>
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
<li><a href="#"><span class="fa fa-instagram"></span></a></li>
</ul>

我要选择下面的css文件

#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

最佳答案

.social-media li {
list-style-type: none;
padding: 10px 10px;
background-color: pink;
display: inline-block;
border-radius: 50px;
}
<html>
<head>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
</head>
<body>
<ul class="social-media">
<li><a href="#"><span class="fa fa-envelope"></span></a></li>
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
<li><a href="#"><span class="fa fa-instagram"></span></a></li>
</ul>
</body>
</html>

通过使用 border-radiuspadding 我们可以在图标周围形成一个圆圈。

关于html - 如何将外部 css 与 index.html 文件结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45498275/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com