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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

不加float，会竖向排列。加上float，会萎缩塌陷

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            background: #29bde0;
        }

        .header {
            width: 100%;
            height: 60px;
            line-height: 60px;
            position: fixed;
            z-index: 1;
            top: 0;
        }

        .headers {
            text-align: center;
            font-size: 22px;
            color: white;

        }

        .headersImage {
            position: absolute;
            bottom: -5px;
            left: 30px;
        }

        .headersImg {
            position: absolute;
            bottom: -5px;
            right: 30px;
        }

        .circle {
            height: 52px;
            width: 52px;
            border-radius: 50%;
            background: #fbb435;
            position: absolute;
            right: 100px;
            top: 9px;
        }

        .message-box {
            position: relative;
            top: 60px;
            width: 100%;
            height: 70px;
            line-height: 70px;
            background: #b9e9f5;
            /*box-shadow:1px 1px 1px #b9e9f5;*/
            /*border:1px solid #C9E9C0;*/
            /*border-radius:4px;*/
            padding-left: 50px;
            font-size: 20px;
            color: #5e5e5e;
        }

        .triangle-border {
            position: absolute;
            /*left:40px;*/
            /*overflow:hidden;*/
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            bottom: -20px;
            border-color: #b9e9f5 transparent transparent transparent;
            /*border-color:#b9e9f5 ;*/
        }

        .wordOne {
            color: white;
            font-size: 18px;
            margin-top: 75px;
            margin-left: 50px;
        }

        /*div.container div.row div {*/
        /*margin-top: 60px;*/
        /*line-height: 60px;*/
        /*height: 60px;*/
        /*background-color: white;*/
        /*border: 1px solid #696969;*/
        /*text-align: center;*/
        /*}*/

        .mains {
            /*width: 588px;*/
            /*height: 196px;*/
            text-align: center;
            float: left;

        }

        .blocksLeft {
            width: 25%;
            height: 20vw;
            background-color: #f5c97b;
            margin: 30px 30px 0 30px;
            border-width: 4px 4px 0 4px;
            border-style: solid;
            border-color: white;
            position: relative;

        }
        .blocksLe {
            width: 25%;
            height: 5vw;
            background-color: #83b09a;
            margin: 0 30px 30px 30px;
            border-width: 0 4px 4px 4px;
            border-style: solid;
            border-color: white;
            position: relative;
        }

        .blocks {
            display: inline-block;
            width: 25%;
            height: 25%;
            margin: 30px;
            text-align: center;
            border: 4px solid white;

        }

        .blocksRight {
            display: inline-block;
            width: 25%;
            height: 25%;
            margin: 30px;
            text-align: center;
            border: 4px solid white;
            float: right;
        }

        .blocksOne {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #5e5e5e;
            font-size: 20px;
        }

        .blocksTwo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 18px;
        }

        .threeTable {
            text-align: center;
            font-size: 21px;
            color: #9C9C9C;
            height: 58px;
            line-height: 58px;
        }

该问题已被官方收录

任务七雪碧图调好位置之后无法调节大小

2

1

雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.k{
    background: url(../img/task7-2.11.png) no-repeat;
    background-size: 20vw 5vw;
    display: inline-block;

}
.k1{
    height: 5vw;
    width: 5vw;
    background-position: 0 0;
}
.k2{
    height: 5vw;
    width: 5vw;
    background-position: -5vw 0;
}
.k3{
    height: 5vw;
    width: 5vw;
    background-position: -10vw 0;
}
.k4{
    height: 5vw;
    width: 5vw;
    background-position: -15vw 0;
}

该问题已被官方收录

audio标签定义音频时,自动播放属性无效;

0

1

audio播放器

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>demo</title>
</head>
<body>
    <h4>演示音频</h4>
    <audio src="horse.ogg" controls autoplay></audio>
</body>
</html>

该问题已被官方收录

投票页hover出现的4个小图标也可以hover而不消失

1

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <ul class="peo-col col-xs-1">
                    <a class="peo-box" href="#" onmouseover="document.all.peobox1.style.visibility=''"
                    onmouseout="document.all.peobox1.style.visibility='hidden'">
                        <li class="peo-pic">水民</li>
                        <li class="peo-num">1号</li>
                    </a>
                    <ul class="peo-act row" id="peobox1" style="visibility: hidden;">
                        <li class="peo-knife col-xs-3"></li>
                        <li class="peo-glass col-xs-3"></li>
                        <li class="peo-aim col-xs-3"></li>
                        <li class="peo-medicine col-xs-3"></li>
                    </ul>
                </ul>

.content .vote-peo .peo-row .peo-col .peo-act {
    padding-top: 2.8vw;
    margin-left: 0.2vw;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.content .vote-peo .peo-row .peo-col .peo-act .peo-knife,.peo-glass,.peo-aim,.peo-medicine {
    background-color: #ffffff;
    background-image: url(img/icon.png);
    background-repeat: no-repeat;
    background-size: 39vw 125vw;
    height: 4.68vw;
    width: 4.68vw;
    margin-left: 0.7vw;
}

该问题已被官方收录

audio的播放条如何隐藏

2

1

audio播放器

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

这个还没有写到，

该问题已被官方收录

使用vw进行布局，pc端垂直滚动条会占用额外的空间。

1

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 0 1.9rem;
    padding: 0;
    list-style: none;
}

li {
    width: 18.9vw;
    margin: 0 6.5vw;
}

.via {
    border: .69vw solid #fff;
    margin-bottom: 10vw;
    background: #F5C97B;
    text-align: center;
    letter-spacing: .05rem;
}

该问题已被官方收录

如何隐藏播放按钮

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

该问题已被官方收录

关于Buton的一个疑问

1

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.btn-left,
.btn-right {
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
}
.btn-right {
    float: right;
    margin-right: 1rem;
}
.btn-left {
    float: left;
    margin-left: 1rem;
}

该问题已被官方收录

bootstrap如何引用cdn

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

这里需要下载吗，下载了都是些什么东西

该问题已被官方收录

在使底部footer背景透明的时候如果使用opacity

1

1

透明度

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.65rem;
    opacity: 0.8;
    background: rgba(41, 189, 224, 0.8);
}
footer button {
    position: relative;
    width: 40vw;
    height: 0.43rem;
    font-size: 0.2rem;
    border-radius: 0.07rem;
    color: white;
    opacity: initial;
}

去第页

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