html - 我如何以正确的方式创建社交图标(如图表)以提高响应能力

Question

我需要用分离的社交链接创建图片中的样子。



如何以正确的方式创建它，每个屏幕都没有很多边距？如何创建以完全响应？

这是 fiddle Link .这是更新后的最终结果

<div class="social_diagram">
                        <a href="#" class="mainfb"></a>
                         <a href="#" class="twittermain"></a>
                         <a href="#" class="hatmain"></a>
                         <a href="#" class="youtubetmain"></a>
                         <a href="#" class="instagramtmain"></a>
                         <a href="#" class="vimeotmain"></a>
                    </div>

.social_diagram{
width: 340px;
margin: auto;
clear: both;
margin-top:55px; 
position: relative;
background:url(/images/diagram.png) no-repeat;
min-height: 328px;
 }
.social_diagram > img{
width:100%;
height:auto;
position: absolute;
 }
 .mainfb{
position: absolute;
top: 21px;
left: 80px;
width: 19px;
height: 39px;
background:url(/images/facebookmainicon.png) no-repeat;
 }
  .twittermain{
position: absolute;
top: 53px;
right: 37px;
width: 22px;
height: 18px;
background:url(/images/twitter-main.png) no-repeat;
  }
.hatmain{
position: absolute;
top: 128px;
right: 135px;
width: 28px;
height: 27px;
background:url(/images/haticon.png) no-repeat;
 }
 .youtubetmain{
position: absolute;
top: 228px;
right: 20px;
width: 30px;
height: 32px;
background:url(/images/youtube_icon.png) no-repeat;
  }
 .instagramtmain{
position: absolute;
bottom: 11px;
right: 160px;
width: 30px;
height: 32px;
background:url(/images/instagrammain_icon.png) no-repeat;
  }
.vimeotmain{
position: absolute;
bottom: 93px;
left: 17px;
width: 17px;
height: 20px;
background:url(/images/vimeoicon.png) no-repeat;
}

Answer 1

您必须使用绝对定位和控制顶部和左侧来定位每个图像:

.facebook {
     position: absolute;
     top: 20px;
     left: 100px;
}

你的父 div 必须是 position: relative，在这种模式下，top 和 left 从这个 div 开始计算，而不是从 body 开始计算。

祝你好运