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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

7

12

audio播放器

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

第一种：<button class="btn btn-block sing"> 
                     <audio  src="audio/财富自由.mp3" controls="controls">
                     </audio>
               </button>
第二种：<button class="btn btn-block sing">
                    <audio src="audio/财富自由.mp3" autoplay="autoplay">
                    </audio>
                </button>

该问题已被官方收录

如何触发鼠标点击事件

3

4

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="fathelement{
    display:none; //元素默认是隐藏的
}

//当鼠标经过兄弟元素brother-showing时，也就是经过父级father的时候。父级获得hover状态，在父级hover的基础上写element的样式：
.father:hover .element{
    display:block ;

该问题已被官方收录

在一个父元素的大盒子里放一个子元素小盒子，大盒子的左边边框丢了，这是什么情况？？

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>

该问题已被官方收录

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

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

该问题已被官方收录

文字居中的问题，假如太少了不知道怎么操作？

7

2

居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.good {
    margin: 2rem;
    font-size: 2rem;
    color: #ffc865;
    text-align: center;
}

该问题已被官方收录

为什么我首页的右边黄色三角用absolute定位不准确

2

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.icon3 {
    background-image: url(sanjiao.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 5rem;
    width: 3rem;
    transform: scale(0.5);
    position: absolute;
    right: 5%;
    top: 53%;
}

该问题已被官方收录

某些属性不能用样式表控制，只能写在标签里

0

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

div class="input">
        <img src="../img/css4/css401.jpg">
        <input type="text" placeholder="请输入用户名"  maxlength="11"  onkeyup="value=value.replace(/[^\d]/g,'')">
    </div>
    <div class="input">
        <img src="../img/css4/css402.jpg">
        <input type="password" placeholder="请输入密码" >
    </div>

 <audio class="audio" src="../audio/css7.mp3" controls="controls">
        您的浏览器不支持音频
    </audio>

该问题已被官方收录

hover子元素(div="bastard")没有办法居中

1

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css:
.grandpa{ 
    background: #29bde0;
    /*width: 90%;
    height: 90%;*/
    
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: row;
    margin: 10px auto;
  }  
      
  .dad{
      width: 31vw;
      height: 31vw;
      background: #29bde0;
  }  
  
  .son{
      width: 20vw;
      height: 20vw;
      background: yellow;
      margin: 0 auto;
      display: flex;
      flex-direction:column;
      background: #f5c97b;
      border: 2px solid white;
  }
  .para1{
      flex:2;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .para2{
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #83b09a;
      color: white;
  }
  
  .bastard{
      width: 20vw;
      line-height: 10vw;
      margin: 0 auto;
      background: #29bde0;
      display: none;
      
  }
  .bastard img{
      width: 4vw;
      height: 4vw;
      margin-right: 1px;
  }
  /*hover the son element*/
  .dad:hover>.bastard{
      display: block;
  }
  
html:
<div class="grandpa">

        <div class="dad">
            <div class="son">
                <span class="para1">水民</span>
                <span class="para2">1号</span>
            </div>
            <div class="bastard">
                <img src="./p2-sprite1.png"><img src="./p2-sprite2.png"><img src="./p2-sprite3.png"><img src="./p2-sprite4.png">
            </div>
        </div>

该问题已被官方收录

关于居中的方式，如何在不使用flex和文本居中的方式情况下让它居中

1

1

居中

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>
    <link rel="stylesheet" type="text/css" href="./task7-2.css">
</head>

<body>
    <header>
        <!-- 头部 -->
        <button class="thb">
            <!-- The head box头部盒子缩写 -->
            <div class="itb"></div>
            <!-- 左边按钮Inside the button的缩写 -->
        </button>
        <span class="vote">投票</span>
        <!-- 中间文字 -->
        <button class="rb">
            <!-- 右边关闭按钮外部盒子right-box缩写 -->
            <div class="icon_false"></div>
            <!-- 右边关闭按钮 -->
        </button>
    </header>
    <main>
        <!-- 中间 -->
        <div class="pb">
            <!-- 上面的播放选项盒子play box缩写 -->
            <span class="vw">发言讨论结束，大家请投票</span>
            <!-- Vote words投票文本的缩写 -->
            <audio autoplay="autoplay">
                <!-- 音频播放器 -->
                <source src="./css-7/task7/财富自由.mp3.mp3">
            </audio>
            <div class="rd">
                <!-- roundness圆形的缩写 -->
                <div class="tg"></div>
                <!-- triangle三角形的缩写 -->
            </div>
        </div>
        <div class="st"></div>
        <!-- Small triangle小三角形 -->
        <span class="hint">点击得票数最多人的头像</span>
        <!-- 页面说明文字 -->
        <div>
            <div class="oll">
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
                <button class="choice">
                    <!-- 第一个选项盒子 -->
                    <span class="status">水民</span>
                    <span class="number">1号</span>
                    <ul class="dropdown-content ">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                    </ul>
                </button>
            </div>
        </div>
    </main>
    <footer>
        <!-- 底部盒子 -->
        <div class="yu">
                <a href="./task7-3.html">投死</a>
        </div>
      
    </footer>
</body>

</html>
html {
    font-size: 62.5%;
}

/* 页面设置样式 */
body {
    margin: 0;
    font-size: 1.6rem;
}

/* 中心样式设置 */
header {
    display: flex;
    justify-content: space-between;
    top: 0;
    height: 4.8rem;
    background-color: #29BDE0;
    position: fixed;
    width: 100%;
    z-index: 1;
}

/* 头部样式设置 */
.thb {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 1.15rem;
    width: 2rem;
    height: 2rem;
    padding: 3px;
    border: 1.5px solid white;
    background-color: #29BDE0;
    outline: none;
}

/* 左边按钮外部盒子样式 */
.itb {
    width: 4rem;
    height: 1.5px;
    padding: 4px 0;    
    border: 1px solid white;
    border-top: 1.5px solid white;
    border-bottom: 1.5px solid white;
    border-left: 0;
    border-right: 0;
    background-clip: content-box;
    background-color: white;
}

/* 左边按钮样式 */
.vote {
    font-size: 17px;
    color: white;
    margin: auto;
}

/* 中间文字样式 */
.rb {
    background-color: #29BDE0;
    border: 0;
}

/* 右边关闭按钮外部盒子样式 */
.icon_false {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: white;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
}

/* 右边关闭按钮 */

.icon_false:after {
    content: '/';
    display: block;
    width: 20px;
    height: 2px;
    background: white;
    -webkit-transform: rotate(-90deg);
}

/* 关闭按钮样式 */
main {
    margin-bottom: 5rem;
    background-color: #29BDE0;
}

/* 中间部分样式 */
.pb {
    display: flex;
    height: 4.1rem;
    background-color: #b9e9f5;
    padding-top: 4.8rem;
    justify-content: space-between;
}

/* 上面的播放选项盒子play box缩写样式  */
.vw {
    padding: 1.3rem 0;
    padding-left: 2.3rem;
    font-size: 13px;
}

/* Vote words投票文本的缩写样式 */

.rd {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    background-color: #FBB435;
    border-radius: 50%;
    margin: auto 1rem;
}

/* 圆形的缩写样式 */
.tg {
    width: 0;
    height: 0;
    border-width: 8px;
    border-right-width: 0px;
    border-style: solid;
    border-color: transparent transparent transparent white;
    margin-left: 10%;
}

/* 三角形缩写样式 */
.st {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #b9e9f5 transparent transparent transparent;
    margin-left: 3.55rem;
}

/* 下边小三角形样式 */
.hint {
    color: white;
    margin-left: 3.6rem;
}

/* 页面说明文字样式 */

.choice {
    width: 28.9%;
    height: 28.9vw;
    padding: 0;
    margin: 1rem .6% 8.3vw 2.5%;
    border: 3px solid #FFFFFF;
    background: #F5C97B;
    outline: none;
}

/* 第一个选项盒子 */

.status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75%;
    color: #565656;
    font-size: 15px;
}

/* 游戏身份样式 */
.number {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25%;
    font-size: 11.5px;
    color: white;
    background-color: #83B09A;
}

/* 游戏号码样式 */

.dropdown-content {
    display: none;
    padding: 0;
}

/* 下拉框盒子样式 */
.one {
    display: inline-block;
    width: 4.5vw;
    height: 4.5vw;  
    background: url(./css_sprite2s.png) no-repeat;
    background-position: 14.286% 14.286%;
    background-size: 333.33%;
}

/* 下拉框第一张图片样式 */
.two {
    display: inline-block;
    width: 4.5vw;
    height: 4.5vw;
    background: url(./css_sprite2s.png) no-repeat;
    background-position: 85.714% 14.286%;
    background-size: 333.33%;
}

/* 下拉框第二张图片样式 */
.three {
    display: inline-block;
    width: 4.5vw;
    height: 4.5vw;
    background: url(./css_sprite2s.png) no-repeat;
    background-position: 14.286% 85.714%;
    background-size: 333.33%;
}

/* 下拉框第三张图片样式 */
.four {
    display: inline-block;
    width: 4.5vw;
    height: 4.5vw;
    background: url(./css_sprite2s.png) no-repeat;
    background-position: 85.714% 85.714%;
    background-size: 333.33%;
}

/* 下拉框第四张图片样式 */
.choice:hover .dropdown-content {
    display: inline-block;
    padding: 0;
}

/* 模拟下拉框选项 */
footer {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12%;
    width: 100%;
    bottom: 0;
    background-color: #29BDE0;
}

/* 底部盒子样式 */
.yu{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94%;
    height: 100%;
    border: 1px solid white;
    border-left: 0;
    border-right: 0;
}
a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 65%;
    border: 0;
    font-size: 20px;
    color: white;
    background-color: #FBB435;
    outline: none;
    text-decoration: none;
}

/* 底部盒子按钮缩写样式 */
.bt {
    font-size: 20px;
    color: white;

该问题已被官方收录

图片和文本没有对齐

1

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <header>
        <div class="left">
            <a href="../html/css7-home.html">
                <img src="../img/home.png" alt="">
            </a>
        </div>
        <div class="middle">
            <span>游戏结果</span>
        </div>

去第页

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