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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
    width: 100%;
    height:100%;
}
.all{
    background: url("../../IMG/login.png");
    background-size:100% 100%;
    width:100%;
    height:100%;
    position: relative;
}
必须是
html,body{
    width: 100%;
    height:100%;
}
才出的来

该问题已被官方收录

如果使用bootstrap的折叠模拟下拉菜单，如何让他在一次点击事件只显示一个？

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.second-line {
    padding-right: 30px;
}
#downlist {
    list-style: none;
}
.down-line {
    position: relative;
    display: inline-block;
    margin: 10px auto; 
}
.down-line ul {
    position: absolute;
    z-index: 1;
    width: 100%;
}
.down-line button {
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    border: 2px solid #f2f2f2;
    font-size: .14rem;
    color: #999999;
}
/* 右侧下拉图标 */
.down-line button p {
    display: inline-block;
    width: 22px;
    height: 26px;
    margin-left: 25px;
    border-radius: 5.5%;
    background: #1d7ad9;
}
.down-line button p::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 6px;
    border-top: 6px solid white;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent; 

}
/* 下拉选框样式 */
#downlist {
    border: 1px solid #f2f2f2;
    border-top: none;  
}
#downlist li {
    padding-top: 5px;
    padding-bottom: 5px; 
    background: white;
}
#downlist a {
    color: #888888 !important;
    text-decoration: none;
}
#downlist li:hover {
    background: #f2f2f2;
}

<div class="row forth-line align-items-center">
                    <div class="col-sm-10">
                        <input class="circlebox" type="radio" id="material1" name="boxtype">
                        <label for="material1">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material2" name="boxtype">
                        <label for="material2">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material3" name="boxtype">
                        <label for="material3">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material4" name="boxtype">
                        <label for="material4">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material5" name="boxtype">
                        <label for="material5">三层A瓦优质</label>
                    </div>
                    <div class="col-sm-2 text-right">
                        <div class="down-line">
                            <button data-toggle="collapse" data-target="#downlist3">
                                查看详情
                                <p></p>
                            </button>
                            <ul id="downlist3" class="collapse text-center">
                                <li>
                                    <a href="#">emmmm</a>
                                </li>
                                <li>
                                    <a href="#">emmmm</a>
                                </li>
                                <li>
                                    <a href="#">emmmm</a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

该问题已被官方收录

汉堡菜单划出来后，右边的隐藏内容能用手划出来，怎么解决

0

1

侧边栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<input type="checkbox" id="sidebar">
<!--汉堡侧栏开始-->
<div class="sidebar-menu">
    <ul>
        <li>
            <span>
                <img src="../images/laba.png" alt="">
                公告
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/chilun.png" alt="">
                设置
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/wenhao.png" alt="">
                帮助
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/xiaoguanji.png" alt="">
                关于
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
    </ul>
</div>
<!--汉堡侧栏结束-->

<!--头部开始-->
<header>
    <label for="sidebar">
        <img src="../images/celan.png" alt="">
        <img src="../images/guanbi.png" alt="">
    </label>
</header>
<!--头部结束-->
<!--主体开始-->
<a href="task13-2.html" class="last-game">
    <span>上次游戏：捉鬼猜词版</span>
    <img src="../images/baijiantou.png" alt="">
</a>
<div class="nav-game">
    <h1>捉鬼游戏</h1>
    <div class="row">
        <a href="task13-2.html" class="nav-item">简化版</a>
    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="row row-middle">
        <a href="task13-2.html" class="nav-item">猜词版</a>
        <a href="task13-2.html" class="next"><img src="../images/huangjiantou.png" alt=""></a>

    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="row">
        <a href="task13-2.html" class="nav-item">白痴版</a>
    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="nav-circle">
        <a href="###" class="active"></a>
        <a href="###"></a>
        <a href="###"></a>
        <a href="###"></a>
    </div>

</div>
<!--主体结束-->

该问题已被官方收录

任务十四的自动轮播图用纯css怎么实现？

0

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>技能树首页</title>
      <link rel="stylesheet" href="all-style.css">
</head>

<body>
      <!-- 页眉 -->
      <header class="container spb">
            <span class="ma0 wsn">客服热线:010-233-233333</span>
            <div class="ma0 wsn">
                  <img src="image/wechat.png" alt="">
                  <img src="image/qq.png" alt="">
                  <img src="image/wb.png" alt="">
            </div>
      </header>
      <!-- 导航栏主体 -->
      <nav class="container nav-main spb">
            <a href="task14-1.html" class="ma0">
                  <img src="image/logo.png" alt="">
            </a>
            <div class="btn-group">
                  <a href="task14-1.html" class="tac">首页</a>
                  <a href="task14-2.html" class="tac">职业</a>
                  <a href="task14-3.html" class="tac">推荐</a>
                  <a href="task14-3.html" class="tac">关于</a>
            </div>
      </nav>
      <!--响应式下拉菜单-->
      <div class="hb">
            <img src="../task7/images/icon-2.png" alt="">
            <ul class="tac">
                  <li>
                        <a href="task14-1.html">首页</a>
                  </li>
                  <li>
                        <a href="task14-2.html">职业</a>
                  </li>
                  <li>
                        <a href="task14-3.html">推荐</a>
                  </li>
                  <li>
                        <a href="task14-1.html">关于</a>
                  </li>
            </ul>
      </div>

      <section class="slider-contaner">
            <ul class="slider">
                  <li class="slider-item slider-item1"></li>
                  <li class="slider-item slider-item2"></li>
                  <li class="slider-item slider-item3"></li>
                  <li class="slider-item slider-item4"></li>
                  <li class="slider-item slider-item5"></li>
            </ul>
            <div class="focus-container">
                  <ul class="floatfix">
                        <li>
                              <div class="focus-item focus-item1"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item2"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item3"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item4"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item5"></div>
                        </li>
                  </ul>
            </div>
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
      </section>
      <!--内容主题-->
      <main class="container">
            <!--第一模块-->
            <div class="md1">
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-1.png" alt="">
                        </div>
                        <h4>高效</h4>
                        <p>将五到七年时间，缩短到一年到三年。</p>
                  </div>
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-2.png" alt="">
                        </div>
                        <h4>规范</h4>
                        <p>标准的实战教程，不会走弯路。</p>
                  </div>
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-3.png" alt="">
                        </div>
                        <h4>人脉</h4>
                        <p>同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
                  </div>
                  <div class="cpt1-2">
                        <p>
                              <img src="image/user.png" alt="">  12400</p>
                        <p>累积在线人数</p>
                        <br>
                        <p>
                              <img src="image/user.png" alt="">  12400</p>
                        <p>学员已找到满意工作</p>
                  </div>
            </div>
            <!--第二模块-->
            <h4 class="tac">如何学习</h4>
            <div class="md2">
                  <div class="cpt2">
                        <div>1</div>
                        <p>匹配你现在的个人情况，寻找适合的岗位</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>2</div>
                        <p>了解职业前景薪金待遇，竞争压力等</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>3</div>
                        <p>掌握行业内顶级技能</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>4</div>
                        <p>查看职业目标任务</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>5</div>
                        <p>参考学习资源，掌握技能点，逐个完成任务</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>6</div>
                        <p>加入班级，和小伙伴们互帮互助，一起学习</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>7</div>
                        <p>选择导师，一路引导，加速自己成长</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>8</div>
                        <p>完成职业技能，升级业界大牛</p>
                        <img src="image/arrow.png" alt="">
                  </div>
            </div>
            <!--第三模块-->
            <h4 class="tac">优秀学员展示</h4>
            <div class="md3">
                  <div class="brs tac">
                        <img src="image/Avatar-1.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-2.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-3.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-4.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
            </div>
            <!--第四模块-->
            <h4 class="tac">战略合作企业</h4>
            <div class="md4">
                  <img src="image/alibaba.png" alt="">
                  <img src="image/js.png" alt="">
                  <img src="image/hx.png" alt="">
                  <img src="image/rl.png" alt="">
                  <img src="image/qiniu.png" alt="">
            </div>
      </main>
      <!--第五模块-->
      <div class="md5">
            <h4 class="tac">友情链接</h4>
            <div class="cpt5">
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
            </div>
      </div>
      <!--页脚-->
      <footer>
            <div>
                  <p>技能树一改变你我</p>
                  <p class="about-we wsn">
                        <a href="task14-1.html">关于我们</a>  |  
                        <a href="#">联系我们</a>  |  
                        <a href="task14-2.html">合作企业</a>
                  </p>
            </div>
            <div class="link wsn">
                  <p>旗下网站</p>
                  <p>
                        <a href="#">草船云孵化器</a>      
                        <a href="#">最强IT特训营</a>
                  </p>
                  <p>
                        <a href="#">葡萄藤轻游戏</a>      
                        <a href="#">桌游精灵</a>
                  </p>
            </div>
            <div class="wx-qr tar">
                  <p>微信公众平台</p>
                  <img src="image/qr.png" alt="" class="qr-code">
            </div>
      </footer>
      <aside class="container tac">Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号</aside>
</body>

</html>

该问题已被官方收录

上传到GitHub的文件夹异常，完全打不开。

0

1

管理工具

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

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

1

1

盒模型边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

该问题已被官方收录

文字中间的竖线在Chrome调试时显示在正常位置，手机端打开时竖线会向右偏移

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.intro1::before {
    content: '';
    position: relative;
    left: 1.35rem;
    padding-left: .02rem;
    padding-bottom: .01rem;
    background: #E1E5E7;
}

.line::before {
    content: '';
    position: relative;
    left: 1.87rem;
    padding-left: .02rem;
    padding-bottom: .01rem;
    background: #E1E5E7;}

该问题已被官方收录

scss中@media中无法使用@extend。

0

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

%border-color{
    border-color: red;
};
div{
    @media screen {
        margin:10px;
        @extend %border-color;
    }
}

该问题已被官方收录

为什么一个元素要浮动，那么它的祖先元素一定要设置高度呢？

0

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

*{
 
    height: 100vw;
}
.box{
   width: 30%;
   height: 30%;
   margin-left: 2.5%;
   margin-top: 2.5%;
   background-color:orange;
   border-radius: 20%;
   float: left;
}

该问题已被官方收录

用css怎么实现不用图片实现定制箱下拉框中一样的

2

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.pulldown{
	background: url(../img/dbx.png)no-repeat 97%;
	-webkit-appearance:none;
	background-color: #fff;
	border: 1px solid #E8E8E8;	
	line-height: 20px;
	padding-left: 6px;
	width: 110px;
	height: 38px;
	margin-top: 26px;
	margin-left: 68px;
}

去第页

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