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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

为什么display：inline-block水平的下拉菜单会先上升后下降

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <style>
        ul {
            display: inline-block;
            background: red;
            margin: 0;
            max-height: 0;
            overflow: hidden;
            transition: all 5s;
        }

        div {
            background: black;
            color: #fff;
        }
    </style>
</head>

<body>
    <button>点击触发</button>
    <div class="drop-contaienr">
        <ul>
            <li>下拉列表选项</li>
            <li>下拉列表选项</li>
            <li>下拉列表选项</li>
            <li>下拉列表选项</li>
        </ul>
    </div>
    <script>
        var log = console.log;
        var btn = document.querySelector('button'),
            ul = document.querySelector('ul');
        btn.onclick = function () {

            ul.style['max-height'] = '300px';
        }
    </script>

该问题已被官方收录

如何隐藏播放按钮

3

1

隐藏按钮

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
     <!--minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/task7.2.css">
</head>
<body>
<div class="wrap">
    <div class="head">
      <img src="../img/task7.1.1.png" class="catalogue" alt="">
      <span class="vote">投票</span>
      <img src="../img/task7.1.2.png" class="wrong" alt="">
     </div>
    <div class="make">
      <span>发表讨论结果，大家请投票</span>
        <img src="../img/taask7.17.png" alt="">
        <audio src="../audio/财富自由.mp3" controls="controls">
            Your browser does not support the audio element.
        </audio>
    </div>
*{
    margin: 0;
    padding: 0;
}
.head{
    width: 100%;
    height: 14.59vw;
    background: #29bde0;
}
.catalogue{
    width: 6.093vw;
    height: 5.25vw;
    margin-top: 4.78vw;
    margin-left: 3.59vw;
}
.wrap{
    background: #29bde0;
}
.vote{
    position: absolute;
    margin-left: 38vw;
    font-size: 4vw;
    color: #ffffff;
    margin-top: 5vw;
}
.wrong{
    width: 3.78vw;
    margin-left: 34.31vw;
    margin-top: 6vw;
    margin-right: 4vw;
    float: right;
}
.make{
    height: 12.65vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.12rem;
    background: #b9e9f5;
}
.make audio{
    width: 5vw;
    height: 2vw;
    margin-right: 2.65vw;
  
}
.make img{
    position: absolute;
    width: 8.125vw;
    margin-left: 90vw;
}
.make span{
    margin-left: 7.5vw;
    font-size: 3vw;
    padding-top:0.8vw;
}

该问题已被官方收录

bootstrap布局，内外边距出现问题，布局崩溃

0

1

bottstrap 边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>

该问题已被官方收录

文字环绕图片

1

1

浮动

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="kuaitou">
                            <div>
                                <img src="../images/zhiweitouxiang.jpg">
                            </div>
                            <div>
                                <h1>Web前端工程师</h1>
                                <p>
                                    Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。
                                </p>
                            </div>
                        </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>

该问题已被官方收录

任务十的进度条如何实现，以及进度条点击时的效果

5

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    .icon {
        width: 100%;
    }

    .icon .left, .icon .right {
        width: 45%;
        height: .05rem;
    }

    .caliber {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box-size {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .caliber>span {
        margin: .10rem .25rem;
    }

    .next {
        margin: .50rem 0;
    }

}


aside {
    margin-top: .50rem;
    padding: .60rem 0;
    font-size: .14rem;
    background: #f9f9f9;
}

.aside-left {
    padding-left: .30rem;
    padding-bottom: .20rem;
}

.aside-center div {
    margin-bottom: .20rem;
}

.aside-center a {
    color: #999999;
}

.aside-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

aside img {
    height: .92rem;
}

.adress {
    width: 1.5rem;
}

.aside-center a:hover {color: #1d7ad9;}

/*页脚*/

footer {
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
    padding: .12rem 0;
    background: #1d7ad9;
}

/*媒体查询*/

@media screen and (max-width: 992px) {

    aside {
    margin-top: .20rem;
    padding: .20rem 0;
    }   

    .aside-right {
        display: flex;
        justify-content: flex-start;
    }

    .aside-right img {
        position: absolute;
        left: .30rem;
    }

该问题已被官方收录

轮播图在页面载入时无法自动轮播

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<script>
    function init() {
        console.log("轮播图初始化");
        $("#myCarousel").carousel('cycle');
    }
    setTimeout(init,400);
</script>

<script>
    function init() {
        console.log("轮播图初始化");
        $("#myCarousel").carousel('cycle');
    }
    setTimeout(init,400);//可以成功初始化
    init(); //直接调用无效
    setTimeout(init,20); //间隔时间太短无效
</script>

该问题已被官方收录

如何让汉堡菜单实现动画来回？

0

1

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

input[type="checkbox"]:checked ~ .menu_left {
  transform: translateX(80vw); }

input[type="checkbox"]:checked ~ main {
  transform: translateX(80vw); }

该问题已被官方收录

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

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>

该问题已被官方收录

audio的播放条如何隐藏

2

1

audio播放器

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

这个还没有写到，

去第页

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