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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

图片定位之后下拉显示在背景上面

1

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css

header {
    position: sticky;
    top:0;
    width: 100%;
    height: .88rem;
    background-color: #5FC0CD;
    line-height: .88rem;
    text-align: center;
    word-spacing: -10px;
}
.dwyz2{
    height: 15px;
    width: 15px;
    position: absolute;
    margin: 6px 0 0 15px;
}


html
<li class="ddbox">
            <img class="dwyz2" src="../img/task6-6.png"/>
            <span class="date">服务日期</span>
            <div class="lll">
                <span class="left">2018-6-12至2018-3-22</span>
                <span class="right">25元/小时
<a class="qwe"></a>
</span>
            </div>
            <img class="dwyz" src="../img/task6-5.png"/>
            <span class="location">北京.通州.果园</span>
        </li>
        <li class="ddbox">
            <img class="dwyz2" src="../img/task6-6.png"/>
            <span class="date">服务日期</span>
            <div class="lll">
                <span class="left">2015-7-5至2017-7-12</span>
                <span class="right">25元/小时
<a class="qwe"></a>
</span>
            </div>
            <img class="dwyz" src="../img/task6-5.png"/>
            <span class="location">北京.通州.果园</span>
        </li>

该问题已被官方收录

用bootstrap做导航栏为什么不能套row？

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    <nav class="navbar navbar-expand-md navbar-light nav-padding">
        <div class="container justify-content-end menu-padding">
            <button class="navbar-toggler button-margin" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="col text text-center navbar-nav justify-content-end">
                    <li class="nav-item">首页</li>
                    <li class="nav-item">职业</li>
                    <li class="nav-item">推荐</li>
                    <li class="nav-item">关于</li>
                </ul>
            </div>
        </div>
    </nav>

该问题已被官方收录

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

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

该问题已被官方收录

Compass Scss在Webstorm中的配置问题

0

1

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

form表单里button自动刷新页面

2

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<form  class="all">
    <div class="center">
        <img src="../img/login-turnip.png" alt="" class="turnip">
        <div class="form-group">
              <img src="../img/login-person.png" alt="" class="person">
              <input type="text" class="name"  placeholder="请输入用户名">
        </div>
        <div class="form-group ">
             <img src="../img/login-lock.png" alt="" class="password">
             <input type="password" class="word"  placeholder="请输入密码">
        </div>
        <div class="error" id="error"></div>
        <button class="btn btn-default " id="entry" onClick="return false">登录</button>
    </div>

该问题已被官方收录

两列li标签左侧的远点无法对对齐

1

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="back-fff">
            <div class="container">
                <p class="my-4 px-18 clr-333 bold text-center">友情链接</p>
                <ul class="d-flex flex-wrap blogroll">
                    <li><a href="">手机软件</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                </ul>

该问题已被官方收录

如何自适应，如何让九宫格在分辨率变小时不换行

2

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

九宫格

该问题已被官方收录

怎么实现轮播图无限轮播

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

window.onload = function () {
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;
    var timer;
    function animate(offset) {
        //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
       //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
        var newLeft = parseInt(list.style.left) + offset;
        list.style.left = newLeft + 'vw';
        //无限滚动判断
        if (newLeft > -100) {
            list.style.left = -500 + 'vw';
        }
        if (newLeft < -500) {
            list.style.left = -100 + 'vw';
        }
    }
    function play() {
        //重复执行的定时器
        timer = setInterval(function () {
            next.onclick();
        }, 2000)
    }
    function stop() {
        clearInterval(timer);
    }
    function buttonsShow() {
        //将之前的小圆点的样式清除
        for (var i = 0; i < buttons.length; i++) {
            if (buttons[i].className == "on") {
                buttons[i].className = "";
            }
        }
        //数组从0开始，故index需要-1
        buttons[index - 1].className = "on";
    }
    prev.onclick = function () {
        index -= 1;
        if (index < 1) {
            index = 5
        }
        buttonsShow();
        animate(100);
    };
    next.onclick = function () {
        //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
        index += 1;
        if (index > 5) {
            index = 1
        }
        animate(-100);
        buttonsShow();
    };
    for (var i = 0; i < buttons.length; i++) {
        (function (i) {
            buttons[i].onclick = function () {
                /*   这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法  */
                /*   由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
                var clickIndex = parseInt(this.getAttribute('index'));
                var offset = 100 * (index - clickIndex); //这个index是当前图片停留时的index
                animate(offset);
                index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
                buttonsShow();
            }
        })(i)
    }
    container.onmouseover = stop;
    container.onmouseout = play;
    play();
}

该问题已被官方收录

侧边导航栏

0

1

侧边栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
    padding: 0;
    margin: 0;
    background: #f0f0f0;
}

@mixin center {
    display: flex;
    align-items: center;
    flex-direction: column;
}

header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 3rem;
    background: #29bde0;
    z-index: 1;
    .menu {
        display: block;
        padding: .3rem 0;
        margin: 1rem;
        height: .2rem;
        width: 1.5rem;
        border-top: solid 3px #fff;
        border-bottom: solid 3px #fff;
        .row {
            border: solid 1.5px #fff;
        }
    }
}





main {
    @include center;
    margin-top: 3rem;
    .main-nav {
        display: block;
        position: relative;
        margin: 1.2rem 0;
        width: 86%;
        line-height: 4rem;
        text-align: center;
        border: solid 1px #c9c9c9;
        font-size: 1.3rem;
        color: #9a9a9a;
        background: #fff;
        .arrow {
            position: absolute;
            top: 1.46rem;
            right: 1rem;
            width: 15px;
            height: 15px;
            border-bottom: 3px solid #e7e7e7;
            border-left: 3px solid #e7e7e7;
            transform: rotate(225deg);
        }
    }
    .main-boxes {
        @include center;
        position: relative;
        width: 86%;
        border: solid 1px #c9c9c9;
        background: #fff;
        .main-title {
            width: 100%;
            line-height: 4rem;
            text-align: center;
            border-bottom: solid 1px #fbb435;
            font-size: 1.5rem;
            font-weight: 100;
            color: #fbb435;
        }
        .main-box {
            display: block;
            margin: 1.3rem 0;
            width: 80%;
            line-height: 5.5rem;
            text-align: center;
            font-size: 1.28rem;
            font-weight: 100;
            color: #fff;
            background: #69d1e9;
        }
        .main-font {
            width: 100%;
            text-align: center;
            font-size: 1.08rem;
            color: #787878;
        }
        .triangle {
            position: absolute;
            top: 16.3rem;
            right: .3rem;
            border-left: solid 20px #fbb435;
            border-top: solid 20px transparent;
            border-bottom: solid 20px transparent;
        }
        .circle {
            display: inline-block;
            margin: 1rem .2rem;
            width: .7rem;
            height: .7rem;
            border-radius: 50%;
            background: #f0f0f0;
            &:hover {
                background: #29bde0;
            }
        }
    }
}

ul,
li {
    position: relative;
    display: block;
    list-style: none;
    padding: 0;
    border-bottom: solid 1px #29bde0;
}

.menu-box {
    position: absolute;
    margin: 0;
    width: 45%;
    height: 100%;
    line-height: 3.5rem;
    font-size: 16px;
    color: #29bde0;
    background: #fff;
}

.nav {
    position: relative;
    overflow: hidden;
}

.main-box {
    position: relative;
    
}

input {
    width: 3rem;
    height: 2rem;
    outline: none !important;
    -webkit-appearance: none;
    border-radius: 0;
}

#menu:checked~.main-box {
    margin-left: 45vw;
}

.left {
    width: 1.34rem;
    height: .2rem;
    padding: .3rem 0;
    margin-left: .22rem;
    border: none;
    outline: none;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
    background: #fff content-box;
}

label {
    display: block;
}

input {
    display: none;
}

.hide-arrow {
    position: absolute;
    top: 1.46rem;
    right: 1rem;
    width: 15px;
    height: 15px;
    border-bottom: 3px solid #e7e7e7;
    border-left: 3px solid #e7e7e7;
    transform: rotate(225deg);
}

该问题已被官方收录

如何配置nginx反向代理

0

1

nginx

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

没有代码

去第页

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