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

该问题已被官方收录

图片只出现在第一个方框的左上

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码



html： 



html

<div class="father">
	<div class="cont1">
		<p class="text1">水民</p>
		<p class="text2">1号</p>
	</div>
	<div class="picture">
		<img src="投票.png" alt="投票.png">
	</div>
</div>
<div class="father">
	<div class="cont1">
		<p class="text1">水民</p>
		<p class="text2">1号</p>
	</div>
	<div class="picture">
		<img src="投票.png" alt="投票.png">
	</div>
</div>

该问题已被官方收录

图片隐藏后鼠标点击为什么显示不了。

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">
      <p>发表讨论结果，大家请投票</p>
    </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.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <P class="iu">水民</P>
            <p class="ui">2号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">警察</p>
            <p class="ui">3号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">法官</p>
            <p class="ui">4号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">狙击手</p>
            <p class="ui">5号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">医生</p>
            <p class="ui">6号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">杀手</p>
            <p class="ui">7号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">8号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">9号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">10号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">11号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">12号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
      </div>
     </div>
    <footer class="vc">
        <button>投死</button>
    </footer>
</div>
</body>
</html>
*{
    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{
    width: 100%;
    background: #b9e9f5;
    height: 12.65vw;
}
.make p{
    margin-left: 7.5vw;
    font-size: 3vw;
    padding-top: 4.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{
    margin-top: 2vw;
}
.con1{
    width: 3vw;
}
.con2{
    width: 3vw;
}
.con3{
    width: 3vw;
}
.con4{
    width: 3vw;
}
.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;
}
.mxc img{
    margin-top: 4vw;
    display: none;
}
.mxc img:hover{
    display: block;
}

该问题已被官方收录

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

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

该问题已被官方收录

rgba和opacity有什么区别

1

透明度

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 position: fixed;
    right: -25.5rem;
    opacity: 0;

height: 6.45rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1;
    background:rgba(153,223,240,.4);
    padding: 1.2rem 0.9rem 0.95rem 0rem;
    text-align: center;

该问题已被官方收录

鼠标悬浮hover

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

第一种
.box2 {
     visibility: hidden;
 }
 .box1:hover .box2 {
     visibility: visible;
 }
第二种
 .box2 {
     visibility: hidden;
 }
 .box1:hover~ .box2 {
     visibility: visible;
 }

该问题已被官方收录

版本选择页面右边的小三角是相对于整个白框存在,使用绝对定位发现无法垂直居中

1

定位居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="div2-2">
        <img  class="img-1-2" src="../img/css7/css7-1-2.png">
        <button class="button1">简化版</button>
        <span class="span2">有1133个用户正在玩此款游戏</span>
        <button class="button1">猜词版</button>
        <span class="span2">有1133个用户正在玩此款游戏</span>
        <button class="button1">白痴版</button>
        <span class="span2">有1133个用户正在玩此款游戏</span>
    </div>

.img-1-2 {
    transform: scale(.5);
    position: absolute;

    right: 0;
    margin-right: 1%;


.div2-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
    width: 100%;

该问题已被官方收录

截图中这个圆角框怎么实现？

1

边距盒模型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

header {
height:50px;
}
footer {
height:50px;
}
div {
height: calc(100% - 100px);
}

该问题已被官方收录

关于Buton的一个疑问

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

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

该问题已被官方收录

audio的播放条如何隐藏

2

1

audio播放器

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

这个还没有写到，