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

1

雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="dropdown">
                <span class="role">水民</span>
                <span class="number">1号</span>
                <ul class="dropdown-content">
                    <li class="knife"></li>
                    <li class="find"></li>
                    <li class="sight"></li>
                    <li class="cure"></li>
                </ul>
            </div>

该问题已被官方收录

任务七右上角的音频标签，无法随着样式进行修改

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>
            <!-- 头部左边按钮外部盒子 -->
            <div></div>
            <!-- 左边按钮 -->
        </button>
        <span>投票</span>
        <!-- 中间文字 -->
        <button>
            <!-- 右边关闭按钮外部盒子 -->
            <div></div>
            <!-- 右边关闭按钮 -->
        </button>
    </header>
    <main>
        <!-- 中间 -->
        <div>
            <!-- 上面的播放选项盒子 -->
            <span>发言讨论结束，大家请投票</span>
            <div>
                <!-- 外部圆 -->
                <div>
                    <!-- 内部三角形 -->
                    <audio controls>
                        <!-- 音频播放器 -->
                        <source src="./css-7/task7/财富自由.mp3"></audio>
                </div>
            </div>
        </div>
        <span>点击得票数最多人的头像</span>
        <!-- 页面说明文字 -->
        <div>
            <!-- 下方多个选项外盒子 -->
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>1号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>2号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>警察</div>
                <!-- 游戏身份 -->
                <div>3号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>法官</div>
                <!-- 游戏身份 -->
                <div>4号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>狙击手</div>
                <!-- 游戏身份 -->
                <div>5号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>医生</div>
                <!-- 游戏身份 -->
                <div>6号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>杀手</div>
                <!-- 游戏身份 -->
                <div>7号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>8号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>9号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>10号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>11号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>12号</div>
                <!-- 游戏号码 -->
            </button>
        </div>
    </main>
    <footer>
        <!-- 底部盒子 -->
        <button>
            <!-- 底部按钮 -->
            <span>投死</span>
            <!-- 底部中间字体 -->
        </button>
    </footer>
</body>

</html>
html{
    font-size: 62.5%;
}
body{
    margin: 0;
    font-size: 1.6rem;
}
header{
    height: 4.8rem;
    background-color: #29BDE0;
}

该问题已被官方收录

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

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

该问题已被官方收录

栅格布局时，如何使得缩放时，文字垂直间距也随之变化

2

1

边距 bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.foot-row-1 p {
  margin-bottom: 6rem;
  font-size: 1.6rem;
  color: #fff;
}

该问题已被官方收录

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

该问题已被官方收录

投票页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;
}

自适应布局中，字体大小应该怎么处理？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  @media only screen and (max-width: 600px){
    .text-line {
      height: auto;
    }
  }

如何使雪碧图随着页面拉动而成比例变大

0

1

雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
            <div class="item">
                <div class="name">水民</div>
                <div class="number">1号</div>
                <ul>
                    <li class="first"></li>
                    <li class="second"></li>
                    <li class="third"></li>
                    <li class="fourth"></li>
                </ul>
            </div>


css：
.first {
    width: 5vw;
    height: 5vw;
    background: url(../img/css_sprites.png) no-repeat 8% 50%/930%;
}

移动端与PC端适配

0

1

媒体查询

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important;
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important;
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important;
    }
}

@media only screen and (min-width: 768px){
    html {
        font-size: 48px !important;
    }
}

@media only screen and (min-width: 1024px){
    html {
        font-size: 64px !important;
    }
}
@media only screen and (min-width: 1440px){
    html {
        font-size: 90px !important;
    }
}

底部边框要设置为透明色能看得到主体的内容，而且不影响子元素布局，如何设置。

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <footer class="footer-box">

        <a href="task7.html" class="one-more-game">
            <p>再来一局</p>
        </a>
        <a></a>
        <a href="task7.html" class="share-it">
            <p>上传分享</p>
        </a>

    </footer>

去第页

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