IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

咨询电话 : 010-59478634

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

栅格布局时，如何使得缩放时，文字垂直间距也随之变化

2

1

边距 bottstrap

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.foot-row-1 p {
  margin-bottom: 6rem;
  font-size: 1.6rem;
  color: #fff;
}

该问题已被官方收录

样式受到挤压，导致并行。

2

1

属性 bottstrap 属性

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="row height">
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">1</span>
          <p class="font">匹配你现在的个人情况 寻找适合自己的岗位</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">2</span>
          <p class="font">了解职业前景薪金待遇、 竞争压力等</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">3</span>
          <p class="font font-right">掌握行业内顶级技能</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">4</span>
          <p class="font font-right">查看职业目标任务</p>
          <span class="arrows"></span>
        </div>
      </div>

该问题已被官方收录

css画的竖分隔符渐变色到手机变宽

0

1

盒模型

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  border-image: linear-gradient(#fff, #e2e6e7, #fff) 4;
    border-left: solid 0.06rem;

该问题已被官方收录

轮播图如何用css完美实现

1

1

轮播

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html部分
<!--轮播图-->
        <div class="loop-wrap">
            <div class="loop-images-container">
                <img src="./img14/cover3.png" alt="" class="loop-image">
                <img src="./img14/cover3.png" alt="" class="loop-image">
                <img src="./img14/cover3.png" alt="" class="loop-image">

            </div>
            <div class="focus-container">
                <ul class="focus-box">
                    <li>
                        <div class="focus-item focus-item1"></div>
                    </li>
                    <li>
                        <div class="focus-item focus-item2"></div>
                    </li>
                    <li>
                        <div class="focus-item focus-item3"></div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

        </div>
css部分
.loop-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.loop-wrap .loop-images-container {
  width: 300vw;
  /* 横向排列 3张图片 宽度应为主容器3倍 */
  font-size: 0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  /* 初始位置位移 */
  -webkit-animation: loop 10s linear infinite;
          animation: loop 10s linear infinite;
}

.loop-wrap .loop-images-container .loop-image {
  width: 100vw;
}

.loop-wrap .focus-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
}

.loop-wrap .focus-container li {
  float: left;
  width: .1rem;
  height: .1rem;
  border-radius: 50%;
  margin: 0 .05rem;
  border: 1px solid #fff;
}

@-webkit-keyframes loop {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  /* 停留1500ms */
  35% {
    -webkit-transform: translate(-33.3%, 0);
            transform: translate(-33.3%, 0);
  }
  /* 切换500ms 位移-20% */
  60% {
    -webkit-transform: translate(-33.3%, 0);
            transform: translate(-33.3%, 0);
  }
  65% {
    -webkit-transform: translate(-66.6%, 0);
            transform: translate(-66.6%, 0);
  }
  95% {
    -webkit-transform: translate(-66.6%, 0);
            transform: translate(-66.6%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  /* 复位到第一张图片 */
}

@keyframes loop {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  /* 停留1500ms */
  35% {
    -webkit-transform: translate(-33.3%, 0);
            transform: translate(-33.3%, 0);
  }
  /* 切换500ms 位移-20% */
  60% {
    -webkit-transform: translate(-33.3%, 0);
            transform: translate(-33.3%, 0);
  }
  65% {
    -webkit-transform: translate(-66.6%, 0);
            transform: translate(-66.6%, 0);
  }
  95% {
    -webkit-transform: translate(-66.6%, 0);
            transform: translate(-66.6%, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  /* 复位到第一张图片 */
}

该问题已被官方收录

如何给botton设置点击过的样式？？？

1

1

表单元素

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.btn-default:hover,
.btn-default:visited {
    background-color: #1d7ad9;
    color: #fff;
}

该问题已被官方收录

如何不用框架做响应式导航栏

0

1

响应式导航栏

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css

该问题已被官方收录

点击导航栏不能下拉菜单

0

1

响应式

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <nav class=" col-4 navbar navbar-expand-md navbar-dark ">

                    <button class="navbar-toggler but-1" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <!-- 要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。
                        然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id: -->
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link  font" href="#">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link font" href="#">职业</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link font" href="#">推荐</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link font" href="#">关于</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </span>
        </div>

该问题已被官方收录

vscode studio中的ds.store文件

0

1

页面显示

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

audio的播放条如何隐藏

2

1

audio播放器

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

这个还没有写到，

该问题已被官方收录

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

git clone https://github.com/zhanglin1995825/first-one.git

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1