社交媒体按钮设置为 header

Question

我正在通过修改现有的 Jekyll 主题来设计博客，其中包含标题的 header 是一种颜色，页面的其余部分是另一种颜色。我想在 header 缩进的一行中插入一些圆形图标（社交网络等）。我觉得用图来解释更容易：

其中蓝点是圆形图标或按钮。我怎样才能在 HTML/CSS 中做到这一点？

编辑：

AwokeKnowing 给了我一些工具来做我想做的事，但当我调整 window.

大小时，它们会移动

这是我的页面在我的 13" 笔记本电脑屏幕上的样子：

但是当我在 23" 显示器上调整它的大小时，我得到：

我希望它看起来像我的第一张图片。这是我的代码：

HTML

<div>
<div class="s d">  <a href="mailto:?Subject=Mindfield-{{ page.title }}&amp;Body={{ page.url }}">
    <img src="/assets/images/mail-icon.svg" alt="Email" width=40px/>
    </a></div>
<div class="s e"><a href="https://www.facebook.com/sharer/sharer.php?u={{site.domain_name}}{{page.url}}"
      onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
  <img src="/assets/images/Facebook-icon.svg" alt="Facebook" width=40px/></div>
<div class="s f"><a href="http://twitter.com/share?text={{page.title}}&amp;url={{site.domain_name}}{{ page.url }}"
      onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
  <img src="/assets/images/Twitter-icon.svg" alt="Twitter" width=40px/></div>
</div>

CSS

.s{position:absolute;top:216px;border-radius:50%;background:white;width:45px;height:45px;text-align:center;color:white}
.d{left:1200px}
.e{left:1255px}
.f{left:1310px}

Answer 1

这里有一些可以帮助您入门的东西

.t{padding:20px;background:teal}
.con{position:relative;background:beige}
.c1{padding:20px}
.sc{position:relative;float:right;width:250px;}
.s{position:absolute;top:-10px;left:10px;border-radius:50%;background:blue;width:20px;height:20px;text-align:center;color:white}
.a{left:10px}
.b{left:40px}
.c{left:70px}
.d{left:100px}
.e{left:130px}
.f{left:160px}

<div class="t">Title</div>
<div class="con">
  <div class="sc">
    <div class="s a">S</div>
    <div class="s b">O</div>
    <div class="s c">C</div>
    <div class="s d">I</div>
    <div class="s e">A</div>
    <div class="s f">L</div>
  </div>
  <div class="c1">Content</div>
  <div class="c1">Content</div>
  <div class="c1">Content</div>
</div>

社交媒体按钮设置为 header

Social media buttons in set into header

html

css

blogs

button