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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

左右切换按钮点击切换图片

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="rotation-chart">
            <div class="images">
                <img src="../img/h.png" height="360px">
                <img src="../img/m.png" height="360px">
                <img src="../img/z.png" height="360px">
            </div>
            <a class="left" href="#"></a>
            <a class="right" href="#"></a>
            <ul class="indicators">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

.rotation-chart{
    position: relative;
    width: 100%;
    overflow: hidden;
    //轮播图片
    .images{
        width: 300vw;
        white-space: nowrap;
        animation: Naruto 10s linear infinite; //线性  重复循环
        img{
            margin-right: -.1rem;
            width: 100vw;
        }
    }
    @keyframes Naruto {
        0%    {transform: translate(0,0);}
        11.11%  {transform: translate(0,0);}
       22.22%  {transform: translate(-33.3%,0);}
       33.33%  {transform: translate(-33.3%,0);}
       44.44% {transform: translate(-66.6%,0);}
       55.55%  {transform: translate(-66.6%,0);}
       66.66% {transform: translate(-33.3%,0);}
       77.77% {transform: translate(-33.3%,0);}
       88.88% {transform: translate(0,0);}
       100% {transform: translate(0,0);}
    }
    //左切换
    .left{
        position: absolute;
        top: 50%;
        margin-top: -.2rem;
        left: 15%;
       @include w-h(.4rem,.4rem);
        border-top: .1rem solid $bg;
        border-left: .1rem solid $bg;
        transform: rotate(-45deg);
    }
    //右切换
    .right{
        position: absolute;
        top: 50%;
        margin-top: -.2rem;
        right: 15%;
       @include w-h(.4rem,.4rem);
        border-top: .1rem solid $bg;
        border-right: .1rem solid $bg;
        transform: rotate(45deg);
    }
    //指示符
    .indicators{
        position: absolute;
        bottom: 15%;
        left: 50%;
        margin-left: -.5rem;
        @include flex(space-between);
        @include w-h(1rem,.2rem);
        li{
            @include w-h(.16rem,.16rem);
            border-radius: 50%;
            border: .01rem solid $bg;
        }
    }
    
}

该问题已被官方收录

怎么用sass方便的编译栅格布局

0

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$grid: ( xm:0px, sm :768px, md:992px, lg:1200px);
@mixin reactive($para, $list) {
    @each $e, $px in $grid {
        @media screen and (min-width: $px) {
            #{$para}:map-get($map:$list, $key: $e)
        }
    }
}

该问题已被官方收录

使用sass后用占位符%后设置媒体查询报错

0

1

Sass 响应式占位符

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

%icon {  transition: background-color ease .2s;  margin: 0 .5em;}

@media screen { 

     .info-icon {    @extend %icon;  }

}

该问题已被官方收录

如何使用CSS实现下拉响应式导航栏并且有滑动效果

1

1

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav>
    <div class="nav clearfix">
      <div class="nav-header">
        <div class="nav-logo">
          <img src="./resource/jnshu-logo.png">
        </div>
      </div>
      <div class="list-wrapper">
        <input type="checkbox" class="input-btn" id="nav-button" checked>
        <label class="nav-btn" for="nav-button">
          <div class="nav-bar"></div>
          <div class="nav-bar"></div>
          <div class="nav-bar"></div>
        </label>
        <ul>
          <li class="home">
            <a href="">首页</a>
          </li>
          <li class="recommand">
            <a href="">推荐</a>
          </li>
          <li class="regarding">
            <a href="">关于</a>
          </li>
          <li class="help">
            <a href="">帮助</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

该问题已被官方收录

组件库改如何引用？

0

1

组件库

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

axios({
  method: 'get',
  url: '/static/style/cart.json',
  data: {
 
  }
 })
<script type="text/javascript" src="static/style/vue.min.js"></script>
<script type="text/javascript" src="static/style/vue-resource.min.js"></script>
<script type="text/javascript" src="static/style/cart.js"></script>
cartView:function(){
 var _this=this //记得写在get上面，不然取不到值
 this.$http.get('/static/style/cart.json',{'id':123}).then(function(res){
 this.pro=res.body.name;
 //_this.produceList=res.body.result.list;
 console.log(res.body.name)
 })
}

该问题已被官方收录

任务十四的自动轮播图用纯css怎么实现？

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>技能树首页</title>
      <link rel="stylesheet" href="all-style.css">
</head>

<body>
      <!-- 页眉 -->
      <header class="container spb">
            <span class="ma0 wsn">客服热线:010-233-233333</span>
            <div class="ma0 wsn">
                  <img src="image/wechat.png" alt="">
                  <img src="image/qq.png" alt="">
                  <img src="image/wb.png" alt="">
            </div>
      </header>
      <!-- 导航栏主体 -->
      <nav class="container nav-main spb">
            <a href="task14-1.html" class="ma0">
                  <img src="image/logo.png" alt="">
            </a>
            <div class="btn-group">
                  <a href="task14-1.html" class="tac">首页</a>
                  <a href="task14-2.html" class="tac">职业</a>
                  <a href="task14-3.html" class="tac">推荐</a>
                  <a href="task14-3.html" class="tac">关于</a>
            </div>
      </nav>
      <!--响应式下拉菜单-->
      <div class="hb">
            <img src="../task7/images/icon-2.png" alt="">
            <ul class="tac">
                  <li>
                        <a href="task14-1.html">首页</a>
                  </li>
                  <li>
                        <a href="task14-2.html">职业</a>
                  </li>
                  <li>
                        <a href="task14-3.html">推荐</a>
                  </li>
                  <li>
                        <a href="task14-1.html">关于</a>
                  </li>
            </ul>
      </div>

      <section class="slider-contaner">
            <ul class="slider">
                  <li class="slider-item slider-item1"></li>
                  <li class="slider-item slider-item2"></li>
                  <li class="slider-item slider-item3"></li>
                  <li class="slider-item slider-item4"></li>
                  <li class="slider-item slider-item5"></li>
            </ul>
            <div class="focus-container">
                  <ul class="floatfix">
                        <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>
                        <li>
                              <div class="focus-item focus-item4"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item5"></div>
                        </li>
                  </ul>
            </div>
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
      </section>
      <!--内容主题-->
      <main class="container">
            <!--第一模块-->
            <div class="md1">
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-1.png" alt="">
                        </div>
                        <h4>高效</h4>
                        <p>将五到七年时间，缩短到一年到三年。</p>
                  </div>
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-2.png" alt="">
                        </div>
                        <h4>规范</h4>
                        <p>标准的实战教程，不会走弯路。</p>
                  </div>
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-3.png" alt="">
                        </div>
                        <h4>人脉</h4>
                        <p>同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
                  </div>
                  <div class="cpt1-2">
                        <p>
                              <img src="image/user.png" alt="">  12400</p>
                        <p>累积在线人数</p>
                        <br>
                        <p>
                              <img src="image/user.png" alt="">  12400</p>
                        <p>学员已找到满意工作</p>
                  </div>
            </div>
            <!--第二模块-->
            <h4 class="tac">如何学习</h4>
            <div class="md2">
                  <div class="cpt2">
                        <div>1</div>
                        <p>匹配你现在的个人情况，寻找适合的岗位</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>2</div>
                        <p>了解职业前景薪金待遇，竞争压力等</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>3</div>
                        <p>掌握行业内顶级技能</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>4</div>
                        <p>查看职业目标任务</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>5</div>
                        <p>参考学习资源，掌握技能点，逐个完成任务</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>6</div>
                        <p>加入班级，和小伙伴们互帮互助，一起学习</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>7</div>
                        <p>选择导师，一路引导，加速自己成长</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>8</div>
                        <p>完成职业技能，升级业界大牛</p>
                        <img src="image/arrow.png" alt="">
                  </div>
            </div>
            <!--第三模块-->
            <h4 class="tac">优秀学员展示</h4>
            <div class="md3">
                  <div class="brs tac">
                        <img src="image/Avatar-1.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-2.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-3.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-4.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
            </div>
            <!--第四模块-->
            <h4 class="tac">战略合作企业</h4>
            <div class="md4">
                  <img src="image/alibaba.png" alt="">
                  <img src="image/js.png" alt="">
                  <img src="image/hx.png" alt="">
                  <img src="image/rl.png" alt="">
                  <img src="image/qiniu.png" alt="">
            </div>
      </main>
      <!--第五模块-->
      <div class="md5">
            <h4 class="tac">友情链接</h4>
            <div class="cpt5">
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
            </div>
      </div>
      <!--页脚-->
      <footer>
            <div>
                  <p>技能树一改变你我</p>
                  <p class="about-we wsn">
                        <a href="task14-1.html">关于我们</a>  |  
                        <a href="#">联系我们</a>  |  
                        <a href="task14-2.html">合作企业</a>
                  </p>
            </div>
            <div class="link wsn">
                  <p>旗下网站</p>
                  <p>
                        <a href="#">草船云孵化器</a>      
                        <a href="#">最强IT特训营</a>
                  </p>
                  <p>
                        <a href="#">葡萄藤轻游戏</a>      
                        <a href="#">桌游精灵</a>
                  </p>
            </div>
            <div class="wx-qr tar">
                  <p>微信公众平台</p>
                  <img src="image/qr.png" alt="" class="qr-code">
            </div>
      </footer>
      <aside class="container tac">Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号</aside>
</body>

</html>

label标签内添加button标签，点击label范围默认点击button

0

1

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<label for="nav" class="nav-btn">
                    <button>
                            <div></div>
                            <div></div>
                            <div></div>
                    </button>
                </label>

如何用CSS实现响应式导航栏

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, "Times New Roman", "Microsoft YaHei", SimSun, SimHei;
}


main {
    background-color: #fafafa;
}

   /* height: 50px;   神坑定高！下拉出不来   */
header {
}

.head-top {
    display: flex;
    justify-content: space-between;
}

/*客服热线*/
.tel {
    margin-top: 0.5%;
    margin-left: 2%;
    margin-top: 3px;
    font-size: 12px;
    color: #29B078;
}

/*微信微博qq图标*/
.head-img {
    margin-right: 2%;
}


.head-img img {
    width: 20px;
    margin-left: 8px;
}


/*加跳转链接*/
.head-text a {
    text-decoration: none;
    color: #ffffff;
}


.carousel-caption .text-4 a {
    text-decoration: none;
    color: #ffffff;
}


.navbar-nav .nav-item .nav-link {
    padding: 15px;
    border: 1px solid #26a26f;
}


.navbar-nav .nav-item .nav-link:hover {
    border-bottom: 1px solid white;
}



/*下面是轮播图的Boot4组件*/

/*这个类，组件里自带了absolute，我这里修改的是文字上移的位置*/
.carousel-caption {
    bottom: 32% !important;
}

/* Make the image fully responsive 让图片全屏展示*/
.carousel-inner img {
    width: 100%;
    height: 100%;
}

.carousel-inner .text {
    text-align: center;
    font-weight: bold;
    font-size: 2.5vw;
    color: #ffffff;
}

.carousel-inner .text-2 {
    text-align: center;
    font-weight: bold;
    font-size: 3vw;
    letter-spacing: 2px;
    color: #ffffff;
}

.carousel-inner .text-2 span {
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #ffffff;
}


.carousel-inner .text-3 {
    text-align: center;
    font-weight: bold;
    font-size: 6.5vw;
    font-family: MicrosoftJhengHei;
    color: #ffffff;
}


.carousel-inner .text-4 {
    text-align: center;
    font-size: 5.5vw;
    font-family: MicrosoftJhengHei;
    letter-spacing: 2px;
    color: #ffffff;
}



.container.intro {
    margin-bottom: 120px;
}


h3 {
    padding-bottom: 35px;
    text-align: center;
}

.link-h {
    padding-bottom: 5px;
    text-align: center;
}


main .row {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
}


.container.intro .col-lg-3.col-md-6 {
    display: flex;
    flex-direction: column;
    justify-items: center;
    padding: 29px;
}


.container.intro .col-lg-3.col-md-6.adjust {
    display: flex;
    flex-direction: column;
    justify-items: center;
    padding-left: 80px;
    border-left: 1px solid rgba(128, 128, 128, 0.15);
}


.container.intro .col-lg-3.col-md-6:hover {
    box-shadow: 1px 1px 2px 1px rgba(128, 128, 128, 0.15);
}


.container.intro .col-lg-3.col-md-6.adjust:hover {
    box-shadow: 1px 1px 2px 1px rgba(128, 128, 128, 0.15);
}


.container.intro .pic {
    text-align: center;
}


.container.intro .pic-2 {
    /* margin-top: 25px; */
    text-align: center;
}


.container.intro .pic-3 {
    margin-top: 15px;
    text-align: center;
}


.container.intro .count-people-adjust {
    margin-top: 40px;
}


.container.intro .pic img {
    width: 40px;
}

.container.intro .pic-2 img {
    width: 40px;
}


.container.intro .pic-3 img {
    width: 40px;
}

css实现轮播图左右自然切换

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    .carouse-pic {
        width: 500vw;
        height: 30vw;
        overflow: hidden;
        animation: carouse 20s infinite linear;

        @keyframes carouse {
            0%,15% {margin-left: 0;}
            25%,40% {margin-left: -100vw;}
            50%,65% {margin-left: -200vw;}
            75%,90% {margin-left: -300vw;}
            100% {margin-left: -400vw;}
        }
}

怎么引用公共less文件，

1

1

Less

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@fullwidth:100%;
@fullheight:100%;
@bg-content:#fafafa;
@base:#29b078;
@font-size:14px;
@color:#bfbfbf;
@body:{margin:0;padding:0}
@p:{margin:0;padding:0}

去第页

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