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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

less.js 不能在 chrome 下运行

0

1

less

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<link rel="stylesheet/less" type="text/css" href="index.less">
<script src="less.min.js" type="text/javascript"></script>

该问题已被官方收录

使用sass的时候是否可以一直用nth:child 嵌套，而不编写类名？

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html {
    font-size: 625%;
}

body {
    font-size: .14rem;
    margin: 0;
    padding: 0;
}

button {
    outline: none;
    border: none;
    color: none;
}

header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .1rem;
    background-color: #5FC0CD;
    @mixin button-style {
        width: .72rem;
        height: .35rem;
        font-size: .17rem;
        font-family: serif;
        border-radius: .05rem;
        font-weight: 300;
    }
    & :first-child {
        @include button-style;
        color: #fff;
        background-color: #55A8B3;
    } // 页眉左
    & :nth-child(2) {
        margin-left: -.05rem;
        @include button-style;
        color: #5FC0CD;
        background-color: #fff;
    } // 页眉中
    & :last-child::before {
        content: "";
        position: absolute;
        right: .35rem;
        top: .165rem;
        display: inline-block;
        background: url(../I/page2.png)no-repeat;
        width: 21px;
        height: 22px;
        background-position: 0 -33px;
    } // 页眉右
}

// 页眉
.nav-style {
    display: flex;
    justify-content: space-between;
    margin-top: .55rem;
    border-bottom: 1px solid #E1E5E7;
    &>:nth-child(2) {
        border-left: 1px solid #E1E5E7;
        border-right: 1px solid #E1E5E7;
    }
} // 包含整个菜单栏的样式
.navigation {
    @mixin navigation-style {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .03rem 0;
        padding: .1rem 0;
        color: #999;
    } // 菜单栏三栏通用样式
    @include navigation-style;
    position: relative;
    width: 100%;
    span {
        flex-basis: 80%;
        text-align: center;
    } // 导航栏样式
    &:hover>.menu {
        display: block;
    } // 隐藏内容显现
    & i::after {
        content: "";
        display: inline-block;
        border: .04rem solid transparent;
        border-top: .06rem solid #AFBAC0;
        width: 0;
        height: 0; // 下拉三角形
    }
    .menu {
        position: absolute;
        display: none;
        top: .42rem;
        width: 100%;
        background: #fff; // 隐藏内容
        span {
            display: block;
            box-shadow: 1px 1px 1px #E1E5E7;
            padding: .1rem 0; // 显示内容后的样式
            &:hover {
                background-color: #5FC0CD;
                color: #fff;
            }
        }
    }
}

// 每栏菜单样式
.main-content-style {
    display: flex;
    justify-content: space-between;
    padding: .05rem .15rem;
    border-bottom: 1px solid #E1E5E7;
    span {
        display: block;
    }
    .sheet-left {
        overflow: hidden;
        span {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        @mixin font-style {
            color: #999;
            font-size: .13rem;
            margin: .1rem 0;
        }
        span:nth-child(1) {
            @include font-style;
        } // 表格左第一行字体
        span:nth-child(1)::before {
            content: "";
            margin-right: .07rem;
            background: url(../I/page2.png)no-repeat;
            width: 12px;
            height: 12px;
            background-position: 0 -113px;
            display: inline-block;
        } // 表格左第一行图标
        span:nth-child(2) {
            margin-left: .19rem;
            font-size: .14rem;
            color: #333;
        } // 表格左 第二行
        span:nth-child(3) {
            @include font-style;
        } // 表格左第三行
        span:nth-child(3)::before {
            content: "";
            margin-right: .07rem;
            background: url(../I/page2.png)no-repeat;
            width: 10px;
            height: 12px;
            background-position: 0 0;
            display: inline-block;
        } // 表格左第三行图标
    } // 表格左
    .sheet-right {
        display: flex;
        align-items: center;
        white-space: nowrap;
        span {
            display: flex;
            align-items: center;
            color: #E63B0E;
            font-size: .15rem;
        } // 表格右字体
        span::after {
            content: "";
            margin-left: .1rem;
            background: url(../I/page2.png)no-repeat;
            width: 10px;
            height: 17px;
            background-position: 0 -96px;
            display: inline-block;
        } // 表格右图标
    }
}

.bottom-footer-gap {
    margin-bottom: .7rem;
}

// 最后一行表格和页脚的距离，页脚设置了fixed定位
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .06rem 0;
    background-color: #F8FAFB; // 页脚样式
    .footer-left {
        text-align: center;
        i:before {
            content: "";
            display: inline-block;
            background: url(../I/page2.png)no-repeat;
            width: 23px;
            height: 20px;
            background-position: 0 -55px;
        }
        span {
            a {
                color: #5FC0CD;
                text-decoration: none;
            }
        }
    } // 页脚左边文字和图标
    .footer-center {
        display: flex;
        justify-content: center;
        align-items: center;
        width: .57rem;
        height: .57rem;
        border-radius: 50%;
        background-color: #5FC0CD;
        i::before {
            content: '';
            display: inline-block;
            background: url(../I/page2.png)no-repeat;
            width: 20px;
            height: 21px;
            background-position: 0 -12px;
        }
    } // 页脚中间文字和图标
    .footer-end {
        text-align: center;
        i::before {
            content: "";
            display: inline-block;
            background: url(../I/page2.png) no-repeat;
            width: 21px;
            height: 21px;
            background-position: 0 -75px;
        }
    } // 页脚右边文字和图标
}

该问题已被官方收录

怎么使用sass

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
  .header{
    width:100vw;
    height:11.11vw;
    background:#5fc0cd;
    color: white;
    .close{
      font-size:@font-size;
      float: left;
      padding-left:4.17vw;
      padding-top:3vw;
    }
    .login{
      font-size:5vw;
      padding-left:32.2vw;
      line-height:11.11vw;
    }
    .enroll{
      font-size:@font-size;
      float: right;
      padding-right:4.17vw;
      padding-top:3vw;
    }
  }
  .foot{
     input{
      width:79.17vw;
      height:14.17vw;
      padding-left:20.83vw;
      border: none;
      outline: none;
      font-size:4.17vw;
    }
    .number{
      position: relative;
      margin-top:2.22vw;
    }
    .vertical{
      position: absolute;
      width:0.42vw;
      height:7.36vw;
      background:#eff0f4;
      top:3.33vw;
      left:15.97vw;
    }
    .iphone{
      width:3.89vw;
      height:5.69vw;
      position: absolute;
      top:4.17vw;
      left:5.97vw;
    }
    .password{
      position: relative;
      margin-top:2.22vw;
      margin-bottom:9.72vw;
    }
    .ver{
      position: absolute;
      width:0.42vw;
      height:7.36vw;
      background:#eff0f4;
      top:3.33vw;
      left:15.97vw;
    }
    .locked{
      width:4.17vw;
      height:6.11vw;
      position: absolute;
      top:4.17vw;
      left:5.97vw;
    }
  }
  .logon{
    font-size:4.72vw;
    width:100%;
    height:13.89vw;
    background:#5fc0cd;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
  }
  .forget{
    color:#5fc0cd;
    font-size:4.58vw;
    float: right;
    margin-top:2.5vw;
    margin-right:4.86vw;
  }

}

该问题已被官方收录

Compass Scss在Webstorm中的配置问题

0

1

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

安装ruby和sass时，无法添加源。

1

1

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

引入less.js和less文件后打开报错

1

1

less

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

数组打印出来是空的，但是里面确实有对象？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

Page({
 data:{
   currentTab: 0,
   navbarTitle: ['职业门槛', '难易程度', '成长周期', '求贤企业', '入学基础', '薪资待遇'],
 },
 changeId:function(e){//点击实现切换
this.setData({
  currentTab: e.currentTarget.dataset.id
})
},
 onLoad:function(e){
   //将上个页面传过来的数据取出来
   var finallyRank = JSON.parse(e.finallyRank);
   var that=this;//存一下全局对象
   var jobDetails=[];//声明空数组用来放数据
   wx.request({//向葡萄藤官网发出数据请求,需要先设置不校验合法域名才能成功请求
     url:'http://www.jnshu.com/a/occupation/list',
     header: {'content-type': 'application/json'},//json请求头
     success:function(response){
       if(response.data.code===0){
         //用一个遍历将上个页面选出来的三个序号对应的职业抽出来，并用数组保存相应的信息
         for (var i = 0; i < finallyRank.length;i++){
           jobDetails.push(response.data.data.occupations[finallyRank[i] - 1]);//因为finallyRank数组是从1开始的所以要减1
           jobDetails[i].salary = JSON.parse(jobDetails[i].salary);//将jobDetails里的salary从字符串变回数组，不然后面没法用
         };
         that.setData({//将数据存到data里才能拿来渲染视图
           jobDetails
         });
         //如果用this.setData在外面存将会使data里的jobDetails变成空数组
       }
     }
   });
   console.log(jobDetails);
 }
})

webstrom创建sass时出现问题

0

1

sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

sass无法同步

1

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
  display: flex;
  flex-direction: row;


  margin: 0;
  background-color: rgba(240, 240, 240, 1);

  /*左拉菜单*/
  .menu {
    flex-basis: 55%;

    display: none;

    height: 6.2rem;
    font-size: .16rem;
    color: rgba(41, 189, 224, 1);
    background-color: #fff;


    ul {
      padding: 0;
      text-indent: 8px;
      list-style: none;


      li {
        line-height: 2.2;
        border-bottom: 1px solid rgba(225, 229, 231, 1);

        img {
          height: .22rem;
          vertical-align: -.05rem;
        }

        .menu-arrow {
          float: right;
          margin-top: .12rem;
          margin-right: .3rem;
          width: .1rem;
          height: .1rem;
          border-top: .02rem solid rgba(41, 189, 224, 1);
          border-right: .02rem solid rgba(41, 189, 224, 1);
          transform: rotate(45deg)
        }
      }
    }
  }

}

article {
  position: relative;
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  
header {
  z-index: 5;
  width: 100%;
  height: .5rem;
  background-color: rgba(41, 189, 224, 1);

  .head-logo {
    position: relative;

    i {
      display: block;
    }

    .logo-line-1 {
      position: absolute;
      top: 17px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
    }

    .logo-line-2 {
      position: absolute;
      top: 33px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
    }
  }
}


  .last-game {
    position: relative;
    margin-top: .15rem;
    width: 92%;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    font-size: .17rem;
    border: .01rem solid #C9C9C9;
    color: rgba(154, 154, 154, 1);
    background-color: #ffffff;

    i {
      position: absolute;
      top: 35%;
      right: 3%;
      width: .13rem;
      height: .13rem;
      border-top: .03rem solid rgba(231, 231, 231, 1);
      border-right: .03rem solid rgba(231, 231, 231, 1);
      transform: rotate(45deg)
    }
  }



  main {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 92%;
    height: 4.5rem;
    margin-top: .5rem;
    background-color: #ffffff;
    border: .01rem solid #C9C9C9;


    h3 {
      font-size: .12rem;
      color: #787878;
    }

    .game-begin {
      display: flex;
      height: 10%;
      width: 90%;
      justify-content: center;
      border-bottom: .01rem solid #FBB435;

      .game-btn {
        width: 100%;
        border-style: none;
        font-size: .19rem;
        outline: none;
        color: #FBB435;
        background-color: #fff;
      }
    }

    .edition {
      position: relative;
      margin-top: .2rem;
      width: 80%;
      height: 15%;
      outline: none;
      border-style: none;
      color: #fff;
      background-color: #69D1E9;
    }


    .arrow {
      position: absolute;
      right: -7px;
      top: 47%;
      height: 0;
      width: 0;
      border-width: 13px;
      border-style: solid;
      border-color: transparent transparent transparent #FBB435;
    }


    .bottom-circle {
      display: flex;
      height: .3rem;
      width: .6rem;
      justify-content: center;


      .circle {
        margin-left: .03rem;
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
        background-color: #F0F0F0;

        &:hover {
          background-color: #69D1E9;
        }

      }

    }

  }

}

去第页

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