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

3

盒模型

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;minimum-scale=1.0; 
    maximum-scale=1.0; user-scalable=no;">
    <title>捉鬼游戏</title>
    <style pyte="txet/css">
    html{
        font-size:312.5%;
    }
    body{
        margin: 0;
        font-size:initial;
    }
    p,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* header眉页 */

    header{
        height:.9rem;
        background: #29BDE0;
    }
    .left-box{
        width: 1rem;
        border:none;
        background: #29BDE0;
        margin: .3rem 0 0 .22rem;
        outline:none;
        
    }
    .left{
        width:.34rem;
        margin: .08rem;
        border: .02rem solid #FFFFFF;
    }

    /* main主体 */
    .main-box{
        height: 1.16rem;
        margin: .27rem .36rem;
        border: solid .01rem #C9C9C9;
        background: #FFFFFF;
        line-height: 1.16rem;
        text-align:center;
        font-size: .35rem;
        color: #9A9A9A
    }
    .arrows::after{
        display: inline-block;
        float: right;
        content: "";
        width: .24rem;
        height:.24rem;
        margin: .42rem .2rem 0 0;
        border-top:.05rem solid #E7E7E7;
        border-right: .05rem solid #E7E7E7;
        transform: rotate(45deg);
    }

    /* footer尾页 */
    .footer-box{
       height:7.76rem;
       margin: 0 .35rem .62rem .35rem;
       border: solid .01rem #C9C9C9;
       background: #FFFFFF;
    }
    .top-box{
        height: .9rem;
        border-bottom: .01rem solid #FBB435;
        background: #FFFFFF;
    }
    </style>
</head>
<body>
    <header>
        <button class="left-box" type="button">
            <p class="left"></p>
            <p class="left"></p>
            <p class="left"></p>
        </button>
    </header>
    <main>
        <div class="main-box">
            <p class="arrows">上次游戏：捉鬼猜词版</p>
        </div>
    </main>
    <footer>
        <ul class="footer-box">
            <li class="top-box"></li>
        </ul>
    </footer>
</body>
</html>

该问题已被官方收录

下拉框有效区域问题

4

3

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <ul>
                    <li class="dropdown dropdown-menu-left text-center">
                        <a href="#" class="dropdown-toggle  text-center" data-toggle="dropdown">
                            所在地
                            <b class="caret btn-large triangle"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">北京</a></li>
                            <li><a href="#">上海</a></li>
                            <li><a href="#">广州</a></li>
                            <li><a href="#">福州</a></li>
                            <li><a href="#">厦门</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

该问题已被官方收录

html,body{height:100%}为什么还要设html的高度？

1

2

自适应

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>Document</title>
    <style>
    html,body{height:100%}
    .parentElement{
        position:relative;
        background-color:aqua;
        width:200px;
        height:50%; 
    }

 .childElement{
     position:absolute;
     top:50%;
     transform:translateY(-50%);
     background-color:blueviolet;
        width:50%; 
        height: 25%;
        margin-left:25%;
 }
    </style>

</head>
<body>
    <div class="parentElement">
    <div class="childElement"></div>
    </div>
    
</body>
</html>

该问题已被官方收录

怎么用PS一键切图?

4

2

PhotoShop

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

css:hover状态改变另一个元素样式的使用

4

2

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 .register{
            display: inline-block;
            text-align: center;
            line-height: 42px;
            width: 80px;
            background-color: #FFFFFF;
        }
        .entry{
            display: inline-block;
            /*!*position: relative;*!   这里的属性用于去掉右边框*/
            /*left: 4px;*/
            text-align: center;

            line-height: 42px;
            width: 40px;
            color: #FFFFFF;
            border-left: 1px solid #FFFFFF;
        }

该问题已被官方收录

9宫格无法居中，

1

2

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 #news{
          
          text-align:center;
          margin:20px;
          padding:20px;
          width:100vw;
          height:100vw;
          background:orange;
          
         
          }   
      
      
     #part1{
        
          
        width:25vw;
      height:25vw;
      background: orange;
       margin: 1vw;
      padding: 1vw;    
      float:left;
       border-radius:30px;
     }

该问题已被官方收录

如何用纯CSS制作轮播图，不能使用框架

2

2

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css

该问题已被官方收录

如何去掉边框和内容的空隙

1

2

边距

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>
    <div class="makk">
    </div>
      <p class="cilck">点击票数最多人的头像</p>
    <div class="olk">
      <div class="center">
        <div class="cox">
           <p class="iu">水民</p>
           <p class="ui">一号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <P class="iu">水民</P>
            <p class="ui">2号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">警察</p>
            <p class="ui">3号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">法官</p>
            <p class="ui">4号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">狙击手</p>
            <p class="ui">5号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">医生</p>
            <p class="ui">6号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">杀手</p>
            <p class="ui">7号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">8号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">9号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">10号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">11号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">12号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
      </div>
     </div>
    <footer class="vc">
        <a href="../html/task7.3html.html" >
        <button>投死</button>
        </a>
    </footer>
</div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
body{
    background: #29bde0;
}
.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;
    opacity: 0;
}
.make img{
    position: absolute;
    width: 8.125vw;
    margin-left: 88vw;
}
.make span{
    margin-left: 7.5vw;
    font-size: 3vw;
    padding-top:0.8vw;
}
.makk{
    width: 0;
    height: 0;
    margin-left: 11.25vw;
    border-width: 2vw;
    border-style: solid;
    border-color: #b9e9f5 transparent transparent transparent;
}
.cilck{
    color: #ffffff;
    font-size: 3vw;
    margin-left: 11.40vw;
}
.olk{
  margin-left: 2vw;
    margin-bottom: 16.5vw;
}
.center{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}
.cox{
    height: 25vw;
    width: 25vw;
    margin-right: 3vw;
    margin-bottom: 8vw;
    font-size: .17rem;
    text-align: center;
    border: 1vw solid white;
}
.iu{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
    margin: 0;
    color: #565656;
    background-color: #f5c97b;
    font-size: 3vw;

}
.ui{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
    margin: 0;
    background-color: #83b09a;
    font-size: 3vw;
}
.mxc img{
    margin-top: 2vw;
    display: none;
    width: 24vw;
    margin-left: -0.5vw;
}
.cox:hover img{
    display: block;
}
.vc{
    position: fixed;
    bottom: 0;
    padding: 1vw;
    width: 100%;
    height: 17vw;
    text-align: center;
    color: #fff;
    background-color: #29bde0;
}
.vc button{
    border: none;
    width: 80%;
    height: 9vw;
    background-color: #fbb435;
    margin-top: 5vw;
    font-size: 6vw;
    color: #ffffff;
}

该问题已被官方收录

为什么变成2560/2850的时候图片会变成这样？

3

2

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../img/task888png.png" class="xte" alt="Third slide">
            </div>
            <div class="item">
                <img src="../img/task888png.png" class="xte" alt="Third slide">
            </div>
            <div class="item">
                <img src="../img/task888png.png" class="xte" alt="Third slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
*{
    margin: 0;
    padding: 0;
}
.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;
}
.option{
    font-size: 2.5rem;
    display: flex;
    float: right;
    color: #ffffff;
    margin-top: 3.5rem;
    text-indent: 3.5rem;
}
.first-row {
    margin: 10rem 0;
}
.text-first {
    height: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-first-aside {
    border-left: 1px #dedede dashed;
    display: flex;
    justify-content: center;
}

.box-img {
    width: 10rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

该问题已被官方收录

有没有更方便的轮播图实现方案？

1

2

轮播

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

去第页

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