文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >之前放置在它的父母之后

问之前放置在它的父母之后
EN

Stack Overflow用户
提问于 2020-08-05 16:56:57
回答 1查看 33关注 0票数 0

我以前有个问题。

下面是前面的代码：

代码语言：javascript
复制
.skills-family .skills-family-header:before {
    position: absolute;
    content: "";
    background: #374C58 !important;
    height: 3px;
    left: 0;
    bottom: 0;

    right: 10%;

    -ms-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

因此，它应该强调“技能-家庭-标题”元素，但事实是，这是根据它的伟大的父母放置，我不明白这怎么可能。

​

代码语言：javascript
复制
#skills-window .window-content {
  margin-bottom: 50px;
}


/** Global style **/

#skills-window p {
  font-size: 18px;
  margin-bottom: 4px !important;
}


/** Profile picture **/

#skills-window .profile-image-container {
  border-radius: 50%;
  height: fit-content;
  width: fit-content;
  overflow: hidden;
  margin: auto;
}

#skills-window .profile-image-container img {
  transform: scale(1);
  -ms-transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

#skills-window .profile-image-container:hover img {
  transform: scale(1.2);
}


/** General informations **/

#skills-window .name {
  font-weight: bold;
  font-size: 45px;
  line-height: 80px;
  margin: 0px 5px;
}


/** Skill family **/

.skills-family-header ion-icon {
  vertical-align: middle;
}

h3.skills-family-header {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

h4.skills-family-header {
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
}

.skill-family-content {
  display: none;
}


/** Skill row **/

#skills-window .skill .skill-name {
  margin: auto 20px !important;
}

.skill-level-container {
  height: 50px !important;
  width: 50px !important;
}


/** Before animation */

.skills-family .skills-family-header:before {
  position: absolute;
  content: "";
  background: #374C58 !important;
  height: 3px;
  left: 0;
  bottom: 0;
  right: 10%;
  -ms-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.skills-family.opened .skill-family-content:before {
  /* If unselected */
  right: 100%;
}

.skills-family .skill-family-content:after {
  position: absolute;
  content: "";
  background: #374C58 !important;
  width: 3px;
  left: 0;
  top: 0;
  bottom: 100%;
  -ms-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.skills-family.opened .skill-family-content:after {
  /* If unselected */
  bottom: 10%;
}
代码语言：javascript
复制
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
</head>

<body>
  <div id="skills-window" class="window active text-center bg-light" style="display: block;">
    <div class="row">
      <div class="window-content col-md-11 mx-auto">
        <h2 class="window-title">Compétences</h2>
        <!-- Skills window content -->
        <div class="col-md-11 mx-auto">
          <div class="row">

            <!-- Informations -->
            <div class="col-md-9">
              <!-- name -->
              <div class="row name">
                <span class="name mx-2">B.</span>
                <span class="first-name mx-2">Hedwin</span>
              </div>

              <!-- Genaral informations -->
              <div class="row">
                <div class="col-md-4 text-left">
                </div>

                <!-- Languages skills -->
                <div class="languages col-md-3 text-left">
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Français</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-100"></canvas>
                    </div>
                  </div>
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Anglais</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-80"></canvas>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end row (resume header with profile picture and general information) -->
          <!-- End information -->

          <!-- Skills -->

          <!-- Computer science skills -->
          <div id="csi-skills" class="skills-family row">
            <h3 class="skills-family-header">
              Compétences en informatique
            </h3>
            <div id="target" class="skill-family-content col-md-11">
              <div class="d-flex justify-content-around w-100">
                <!-- First col -->
                <div class="col-md-4">
                  <!-- Intelligence artificielle -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Intelligence artificielle</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-65"></canvas>
                    </div>
                  </div>

                  <!-- Algorithmie -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Algorithmie</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-80"></canvas>
                    </div>
                  </div>

                  <!-- Programmation web -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Programmation web</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-70"></canvas>
                    </div>
                  </div>
                </div>
                <!-- end first col -->

                <!-- Second col -->
                <div class="col-md-4">

                  <!-- Systèmes et réseaux -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Systèmes et réseaux</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-30"></canvas>
                    </div>
                  </div>

                  <!-- Optimisation -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Optimisation</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-60"></canvas>
                    </div>
                  </div>

                  <!-- Programmation logiciel -->
                  <div class="skill row d-flex justify-content-between mb-3">
                    <p class="skill-name">Programmation logiciel</p>
                    <div class="skill-level-container">
                      <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-50"></canvas>
                    </div>
                  </div>
                </div>
                <!-- end second col -->
              </div>
              <!-- end layout -->
            </div>
            <!-- end family content -->
          </div>
          <!-- end csi skills family -->

          <!-- Programming languages skills -->
          <div id="programming-skills" class="skills-family row">
            <h3 class="skills-family-header">
              Compétences en programmation
            </h3>
            <div class="skill-family-content col-md-11">
              <div id="famille_programmation_logiciel" class="skills-family row w-100">
                <h4 id="titre_programmation_logiciel" class="skills-family-header">
                  Programmation logiciels
                </h4>
                <div id="contenu_programmation_logiciel" class="skill-family-content col-md-11 mx-auto">
                  <div class="d-flex justify-content-around w-100">
                    <!-- skill family content layout -->
                    <!-- First col - Python -->
                    <div class="col-md-3">
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">Python</p>
                        <div class="skill-level-container">
                          <canvas id="doughnut_python" width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-90"></canvas>
                        </div>
                      </div>
                    </div>
                    <!-- End first col -->

                    <!-- Second col - Java -->
                    <div class="col-md-2">
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">Java</p>
                        <div class="skill-level-container">
                          <canvas id="doughnut_java" width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-80"></canvas>
                        </div>
                      </div>

                    </div>
                    <!-- end second col -->

                    <!-- Third col - C++ -->
                    <div class="col-md-2">
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">C++</p>
                        <div class="skill-level-container">
                          <canvas id="doughnut_c++" width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-60"></canvas>
                        </div>
                      </div>
                    </div>
                    <!-- End third col -->
                  </div>
                  <!-- end skill family content layout -->
                </div>
                <!-- end family content -->
              </div>
              <!-- End software programming languages skills -->

              <!-- Web programming languages skills -->
              <div class="skills-family row w-100">
                <h4 class="skills-family-header">
                  Programmation web
                </h4>
                <div class="skill-family-content col-md-11 mx-auto">
                  <div class="d-flex justify-content-around w-100">
                    <!-- skill family content layout -->
                    <!-- First col -->
                    <div class="col-md-4">
                      <!-- HTML -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">HTML</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-70"></canvas>
                        </div>
                      </div>

                      <!-- JS -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">JS</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-75"></canvas>
                        </div>
                      </div>

                      <!-- JEE -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">Java et JEE</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-55"></canvas>
                        </div>
                      </div>
                    </div>
                    <!-- end first col -->

                    <!-- Second col -->
                    <div class="col-md-4">
                      <!-- CSS -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">CSS</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-80"></canvas>
                        </div>
                      </div>

                      <!-- PHP -->
                      <div class="skill row d-flex justify-content-between mb-3">
                        <p class="skill-name">PHP</p>
                        <div class="skill-level-container">
                          <canvas width="50" height="50" class="chartjs-render-monitor skill-level-doughnut level-60"></canvas>
                        </div>
                      </div>
                    </div>
                    <!-- end second col -->
                  </div>
                  <!-- end skill family content layout -->
                </div>
                <!-- end family content -->
              </div>
              <!-- End web programming languages skills -->
            </div>
          </div>

          <!-- Others skills -->
          <div id="working-skills" class="skills-family row">
            <h3 class="skills-family-header">
              Autres compétences
            </h3>
            <div class="skill-family-content col-md-11">
              <div class="d-flex justify-content-around w-100">
                <!-- First col -->
                <div class="col-md-4">
                </div>
                <!-- end first col -->

                <!-- Second col -->
                <div class="col-md-4">
                </div>
                <!-- end second col -->
              </div>
              <!-- end layout -->
            </div>
            <!-- end family content -->
          </div>

        </div>
        <!-- end col-md-11 -->
      </div>
    </div>
  </div>
</body>

</html>

​

谢谢你对这个问题的任何帮助或建议。

赫德温湾

css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-05 17:34:33

我看到一些小问题：

您所使用的

  1. ：您应该使用的位置：：
  2. 您的引用--不存在
  3. 的类离子图标--您对绝对位置的使用是相对的，也就是说，您必须声明您希望绝对位置也相对的元素。

假设您希望它相对于技能-家庭添加以下css：

代码语言：javascript
复制
.skills-family{
   position: relative;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63269986

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档