时间戳

首页 > 解决方案 > 实现自定义 CSS 技能栏

html - 实现自定义 CSS 技能栏

问题描述

作为学习的一部分，我正在做一些 CSS 和引导程序。我的任务是创建一个基于 CV 技能的小型图表。下面是我正在尝试重新创建的示例图像。要重新创建的图像

这是我到目前为止所取得的成就。 我所取得的成就

问题是，如何添加表情符号和竖线？如果可能的话，也许也将“技能#”向左偏移。下面是图表的代码。

索引.html

    <div class="row">
      <div class="offset-1 offset-lg-2 offset-lg-2 offset-xl-3 col-9 col-sm-3 col-lg-3 col-xl-2">
        <p>
          Technical Skills
        </p>
      </div>

      <div class="offset-1 offset-lg-0 col-10 col-sm-6 col-lg-5 col-xl-4">
        <div class="skill-wrapper">
          <ul>
            <li id="skill-html" class="skill-list">Skill 1</li>
            <li id="skill-css" class="skill-list">Skill 2</li>
            <li id="skill-js" class="skill-list">Skill 3</li>
            <li id="skill-php" class="skill-list">Skill 4</li>
            <li id="skill-swift" class="skill-list">Skill 5</li>
          </ul>
        </div>
      </div>
    </div>

技能.css

.skill-wrapper ul li {
    position: relative;
    list-style: none;
}

.skill-wrapper ul li:nth-child(n+2) {
    margin: 20px 0;
}

.skill-wrapper li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 2.5px;
    background-color: #101010;
    border-radius: 1000px;
}

标签： htmlcssbootstrap-4

解决方案

我稍微更改了您的代码并使用了更多引导类。对于表情符号，您可以像我一样使用 HTML 实体。HTML 表情符号

运行代码片段以查看结果。希望这会对您有所帮助：

.skill-wrapper ul{
  counter-reset: li;
  border-right: 2px solid #ccc;
  border-left: 2px solid #ccc;
  position: relative;
}

.skill-wrapper ul:before{
  content: "";
  position: absolute;
  height: 100%;
  width: 2px;
  background: #ccc;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.skill-wrapper ul li {
  position: relative;
  list-style: none;
  height: 25px;
  width: 100%;
}

.skill-wrapper ul li span{
  display: block;
  height: 2.5px;
  width: 100%;
  background: #101010;
}

.skill-wrapper li::after {
  counter-increment: li;
  content: " Skill " counter(li);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -50px;
  color: #101010;
}

.skill-wrapper{
  position: relative;
  padding-left: 55px;
}

.emojis{
  width: calc(100% + 20px);
  margin-left: -10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


 <div class="row">
    <div class="offset-1 offset-lg-2 offset-lg-2 offset-xl-3 col-9 col-sm-3 col-lg-3 col-xl-2">
      <p>
        Technical Skills
      </p>
    </div>

    <div class="offset-1 offset-lg-0 col-10 col-sm-6 col-lg-5 col-xl-4">
      <div class="skill-wrapper">
        <div class="emojis d-flex justify-content-between align-items-center">
          <span class="emoji">&#128542;</span>
          <span class="emoji">&#129299;</span>
          <span class="emoji">&#128526;</span>
        </div>
        <ul class="list-group">
          <li id="skill-html" class="skill-list d-flex justify-content-center align-items-center">
            <span></span>
          </li>
          <li id="skill-css" class="skill-list d-flex justify-content-center align-items-center">
            <span></span>
          </li>
          <li id="skill-js" class="skill-list d-flex justify-content-center align-items-center">
            <span></span>
          </li>
          <li id="skill-php" class="skill-list d-flex justify-content-center align-items-center">
            <span></span>
          </li>
          <li id="skill-swift" class="skill-list d-flex justify-content-center align-items-center">
            <span></span>
          </li>
        </ul>
      </div>
    </div>
  </div>

推荐阅读