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

咨询电话 : 010-59478634

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

页面二hover半透明层位置

2

1

透明度 hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="web-list-col">
                <div class="web-peo">
                    <img class="web-peo-p" src="img/peo.jpg">
                    <span class="web-peo-t">Web前端工程师</span>
                    <div class="web-peo-text">
                        Web前端开发工程师，主要职责是利用（X）HTML /CSS /JavaScript /flash等各种Web技术进行产品的开发。
                    </div>
                </div>
                <div class="web2">
                    <span class="threshold">
                        门槛
                    </span>
                    <span class="difficult">
                        难易程度
                    </span>
                </div>
                <div class="web2">
                    <span class="grew">
                        成长周期
                        <span class="grew-num">1-3
                             <span class="grew-text">年</span>
                        </span>
                    </span>
                    <span class="scar">
                        稀缺程度
                        <span class="scar-num">345
                            <span class="scar-text">家公司需要</span>
                        </span>
                    </span>
                </div>
                <div class="money">
                    <div class="money-t">
                        薪资待遇
                    </div>
                    <div class="money-l">
                        <div class="money-one">
                            <span class="money-onel">0-1年</span>
                            <span class="money-one2">5k-10k/月</span>
                        </div>
                        <div class="money-two">
                            <span class="money-twol">1-3年</span>
                            <span class="money-two2">10k-20k/月</span>
                        </div>
                        <div class="money-three">
                            <span class="money-threel">3-6年</span>
                            <span class="money-three2">20k-50k/月</span>
                        </div>
                    </div>
                </div>
                <div class="studying">
                    <span class="studying-h">有</span>
                    <span class="studying-num">286</span>
                    <span class="studying-text">人正在学</span>
                </div>
                <div class="tips">
                    提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XXX等语言基础
                </div>
                <div class="web-hover">
                    <div class="web-hover-t">iOS工程师</div>
                    <div class="web-hover-text">
                    iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属
                    于类Unix的商业操作系统。国内iOS开
                    发起步相对较晚，人才培养机制更是远
                    远跟不上市场发展速度。有限的iOS开
                    发人才成了国内企业必争的资源。国内  iOS开发起步相对较晚，人才培养机制
                    更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
                    </div>
                </div>
            </div>

//职业块
    .web-list-col {
      height: 4.48rem;
      width: 30%;
      margin-bottom: 0.2rem;
      background-color: #ffffff;
      border: #d3d4d6 solid 0.01rem;
      //头像
      .web-peo {
        border-bottom: #d3d4d6 solid 0.01rem;
        padding-left: 0.1rem;
        height: 1.74rem;
        .web-peo-p {
          height: 1.2rem;
          width: 1.2rem;
          margin-top: 0.2rem;
        }
        .web-peo-t {
          position: relative;
          bottom: 1.1rem;
          font-size: 0.14rem;
          font-weight: bold;
        }
        .web-peo-text {
          font-size: 0.12rem;
          width: 45%;
          position: relative;
          left: 1.25rem;
          bottom: 1rem;
        }
      }
      //门槛、成长周期等信息
      .web2 {
        @extend %between;
        color: #999999;
        font-size: 0.12rem;
        border-bottom: #d3d4d6 solid .01rem;
        .threshold,.difficult,.grew,.scar {
          display: inline-block;
          height: 0.42rem;
          line-height: 0.42rem;
        }
        .threshold {
          width: 35%;
          padding-left: 5%;
          background: url("../img/icon.png") no-repeat -4.3rem -5.87rem;
        }
        .difficult {
          width: 55%;
          background: url("../img/icon.png") no-repeat -4.3rem -4.87rem;
        }
        .grew {
          width: 35%;
          padding-left: 5%;
          .grew-num {
            color: red;
            .grew-text {
              color: black;
            }
          }
        }
        .scar {
          width: 55%;
          .scar-num {
            color: red;
            .scar-text {
              color: black;
            }
          }
        }
      }
      //薪资
      .money {
        @extend %between;
        height: 1.06rem;
        font-size: 0.14rem;
        color: #999999;
        .money-t {
          width: 40%;
          border: #d3d4d6 solid 0.01rem;
          border-left: 0;
          border-top: 0;
          text-align: center;
          line-height: 1.1rem;
        }
        .money-l {
          width: 60%;
          color: #000000;
          padding: 0;
          line-height: 0.36rem;
          .money-one,.money-two,.money-three {
            border-bottom: #d3d4d6 solid 0.01rem;
            height: .343rem;
            line-height: .343rem;
            .money-onel,.money-twol,.money-threel {
              padding-left: 0.2rem;
            }
            .money-one2,.money-two2,.money-three2 {
              padding-right: 0.3rem;
              float: right;
            }
          }
        }
      }
      //在学人数
      .studying {
        border-bottom: #d3d4d6 solid 0.01rem;
        height: 0.38rem;
        line-height: 0.38rem;
        font-size: 0.15rem;
        font-weight: bold;
        .studying-h {
          padding-left: 0.2rem;
        }
        .studying-num {
          color: red;
        }
      }
      //提示
      .tips {
        padding-left: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: #c6c6c6;
      }
      //ios介绍
      .web-hover {
        @extend %mid-center;
        flex-direction: column;
        height: 4.48rem;
        position: relative;
        top: -4.26rem;
        background-color:transparent;
        font-size: 0.18rem;
        color: #ffffff;
        font-weight: bold;
        &:hover {
          background-color:rgba(0,0,0,0.6);
        }
        &:hover .web-hover-t {
          display: block;
        }
        &:hover .web-hover-text {
          display: block;
        }
        .web-hover-t {
          height: .5rem;
          margin-top: -.8rem;
          display: none;
        }
        .web-hover-text {
          width: 80%;
          display: none   ;
        }
      }
    }

该问题已被官方收录

webstorm管理git，push到远程仓库时出现冲突怎么解决

0

1

代码管理 git

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

首页如何学习栏的绿色箭头如何让其自适应宽度缩进

0

1

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

            <div class="rstudy row">
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">1</div>
                        <div class="study-text">匹配你现在的个人情况寻找适合自己的岗位</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">2</div>
                        <div class="study-text">了解职业前景薪金待遇、竞争压力等</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">3</div>
                        <div class="study-text">掌握行业内顶级技能</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">4</div>
                        <div class="study-text">查看职业目标任务</div>
                        <div class="study-arrow study-arrow2"></div>
                    </div>
                </div>
            </div>

.content .study .cstudy .study-num {
    background: url("img/icon.png") no-repeat -1rem -3rem;
    height: 0.72rem;
    width: 0.72rem;
    text-align: center;
    line-height: 0.72rem;
    color: #1db176;
    font-weight: bold;
    float: left;
}
.content .study .cstudy .study-text {
    height: 0.72rem;
    width: 1.5rem;
    color: #9e9e9e;
    font-size: 0.14rem;
    padding-left: 0.1rem;
    display:table-cell;vertical-align:middle;
}
.content .study .cstudy .study-arrow {
    background: url("img/icon.png") no-repeat -2rem -3rem;
    height: 0.3rem;
    width: 0.3rem;
    display: inline-block;
    position: relative;
    top: -0.5rem;
    left: 2.3rem;
}

该问题已被官方收录

创建合并分支时，add文件出现错误

1

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

为什么会出现边框？

2

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="../css/task8.2.css">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="wrap">
    <div class="container">
        <div class="header-main">
            <span>客服热线：010-594-78634</span>
            <div class="vx">
                <img src="../img/task8...png"  alt="">
                <img src="../img/task.8..png" alt="">
                <img src="../img/task.81.png"  alt="">
            </div>
        </div>
    </div>
    <div class="navigation">
        <div class="container">
            <div class="option">
                <div class="page">首页</div>
                <div class="profession">
                    <a href="../html/task8.3.html">职业</a></div>
                <div class="recommend">推荐</div>
                <div class="regard">关于</div>
            </div>
        </div>
    </div>
*{
    margin: 0;
    padding: 0;
}
.wrap{
    background: #fafafa;
}
.header-main{
    width: 100%;
    color: #29b078;
    display: flex;
    justify-content:space-between ;
    margin-top:1rem;
    margin-bottom: 0.5rem;
}
.navigation{
    width: 100%;
    background: #29b078;
    height:9.4rem;
}
.xte{
    width: 100%;
}
.option{
    font-size: 2.5rem;
    display: flex;
    float: right;
    color: #ffffff;
    margin-top: 3.5rem;
}
.page{
    margin-right: 1.5rem;
}
.page:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.profession{
    margin-right: 1.5rem;
}
.profession:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.recommend{
    margin-right: 1.5rem;
}
.recommend:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}

该问题已被官方收录

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

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;
}

该问题已被官方收录

input输入框如何随页面缩放而缩放？

1

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">
    <link rel="stylesheet" type="text/css" href="task4.css">
    <title>Document</title>
</head>

<body>
    <div class="header">
        <p class="close">关闭</p>
        <p class="registe">注册</p>
        <p class="login">登录</p>
    </div>
    <form>
        <div class="user">
            <img src="images\iphone.png"/>
            <input type="text" placeholder="请输入手机号" name="tel" maxlength="11"/>
        </div>
        <div class="pw">
            <img src="images\locked 2.png"/>
            <input type="password" placeholder="请输入密码" name="password" />
        </div>
        <button class="login1" type="submit">登 录</button>
    </form>
    <button class="forget" type="button">忘记密码?</button>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
    background: #eff0f4;
}
img {
    transform: scale(0.5);
    position: absolute;
    left: 1rem;
    margin-top: 1.1rem;
}

.header {
    background: #5fc0cd;
    color: white;
    font-size: 1rem;
    position: relative;
    top: 0;
    height: 4rem;
    line-height: 4rem;
}

.header .close {
    float: left;
    position: relative;
    left: 1rem;
}

.header .login {
    font-size: 1.125rem;
    text-align: center;
    position: relative;
    top: -0.1rem;
}

.header .registe {
    float: right;
    position: relative;
    right: 1rem;
}
.user, .pw {
    height: 5rem;
}
.user {
    background: white;
    height: 5rem;
    width: 100%;
    margin-top: 2rem;
}
.pw {
    background: white;
    height: 5rem;
    width: 100%;
    margin-top: 2rem;
}
input {
    outline-style: none;
    border: none;
    border-left-style: solid; 
    border-color: #eff0f4;
    font-size: 1.5rem;
    height: 3rem;
    width: 11rem;
    margin-top: 0.8rem; 
    margin-left: 4rem; 
    padding-left: 2rem;
}
input::-webkit-input-placeholder{
    color: #e1e5e7;
    font-size: 1rem;
}


.login1 {
    border-style: none;
    background: #5fc0cd;
    color: white;
    font-size: 1.125rem;
    margin-top: 5rem;
    height: 4rem;
    width: 100%;
}
.forget {
    outline-style: none;
    border-style: none;
    background: #eff0f4;
    color: #5fc0cd;
    font-size: 1rem;
    position: absolute;
    right: 4%;
}

该问题已被官方收录

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

0

1

响应式导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css

该问题已被官方收录

怎么使用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;
  }

}

该问题已被官方收录

saas继承没有作用

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//变量
$eliminate:0;
$blue:#29BDE0;
$white:#FFFFFF;
$text:auto;
$font:.26rem;
$width:80%;


//混合器
@mixin flex($x:center,$y:center){
    display: flex;
    justify-content:$x;
    align-items: $y;
}
@mixin guding{
    position: fixed;
    width: 100%;
}
@mixin box($w:.51rem,$h:.6rem){
    width: $w;
    height: $h;
}

@mixin font{
    width:$width;       
    font-size: $font;
    color: #A6A6A6;
}
@mixin button{
    width: 50%;
    height: .86rem;
    border-radius: .15rem;
    font-size: .4rem;
    color: #FFFFFF;
    
}




html{
    font-size: 312.5%;
}
body{
    padding: .72rem 0 1.2rem 0;
    margin: $eliminate;
    font-size: initial;
}
p{
    margin: $eliminate;
}

/*header 眉页*/
header{
    @include flex(space-between, center);
    @include guding;
    top: 0;
    /* border半透明 */
    border-bottom: .01rem solid rgba(200,200,200,.95);
    background: $blue;
    font-size:.34rem;
    /* 字符间距 */
    letter-spacing: .04rem;
    color: $white;

    a.left-header{
        @include box;
        margin: .1rem 0 0 .2rem;
        background: url(picture/task-css12.png) no-repeat -2.2rem -1.9rem;
    }
    a.right-header{
        @include box;
        margin:.1rem .2 rem 0 0 ;
        background: url(picture/task-css12.png) no-repeat -.96rem -1.95rem;
    }
}

/*main 主体*/
div.box{
    padding-top: .29rem;
    background: $blue;

    .logo{
        @include box(3.51rem,2.1rem );
        margin: $text;
        background: url(picture/task-css12.png) no-repeat -4.16rem 0;

        .logo-font{
            position: absolute;
            margin:1.3rem 0 0 .7rem;
            font-size: .48rem;
            /* 字符间距 */
            letter-spacing: .05rem;
            color: $white;
        }
    }
    p.introduce{
        width: $width;
        margin: .3rem $text .61rem $text;
        font-size: .33rem;
        color: #FFC865;
    }
    p.time{
            width: $width;
            margin: $text;
            font-size:$font;
            color: $white;

    }
    div.center-box{
        @extend .time;
        display: flex;

        span.font{
            margin-right: .5rem;
        }
    }

}

去第页

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

loading