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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

怎样不使用Bootstrap和JS来做一个响应式折叠导航栏

6

11

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

该问题已被官方收录

栅格系统分为12列,怎么分成5列?

5

4

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">  
  <div class="row">  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
    <div class="col-md-1">.col-md-1</div>  
  </div>

该问题已被官方收录

css的媒体查询是如何使用的？

2

2

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@media screen and (max-width: 768px) {
    .weixin {
        float: left;
    }

    .qr-code {
        float: left;
        margin-left: 22px;
    }

    .about-we {
        margin-top: 0;
    }

    .hanbao {
        display: inline-block;
    }

    .btn-group button {
        display: none;
    }

}

该问题已被官方收录

用bottstrap布局到footer时竖向排列的问题。

1

2

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<footer>
    <div class="base">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 col-lg-12 page">
                    <div class="gap"><a href="#" style="border: 0;">技能树-改变你我</a><br><br><br><a href="#">关于我们</a><a
                            href="#">联系我们</a><a href="#" style="border: 0;">合作企业</a></div>
                    <div class="second"><a href="#">旗下网站</a><br><br><a href="#">草船云孵化器</a><a href="#">最强IT特训营</a><br><a
                            href="#">葡萄藤轻游戏</a><a href="#">桌游精灵</a></div>
                    <div class="gapp"><a href="#">微信公众平台</a>
                        <p><img src="images/task8-17.jpg" alt="二维码"></p></div>
                </div>
            </div>
        </div>
    </div>
</footer>

该问题已被官方收录

关于使用用hover效果完全覆盖原有的div的方法

1

2

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.hoverbox{                                      

    opacity: 0;                                                                              
}
.hoverbox:hover{                         
    opacity: 1;
}

该问题已被官方收录

用flex如何实现响应式布局

2

2

flex 响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<p class="blogroll-p">友情链接</p>
            <div  class="blogroll-link">
                <ul class="link">
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                </ul>
            </div>
            <div  class="blogroll-link">
                <ul class="link">
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                </ul>
            </div>




.link{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.blogroll-p{
    line-height: 25px;
    text-align: center;
    font-size: 16px;
    color: #333333;
}
ul{
    text-align:left;
    padding-left: 20px;
    color:#999999;
}
li{
    flex: 1;
    justify-items: start;
}

该问题已被官方收录

为什么变成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"> 代码

<div class="col-sm-6 col-md-3 stu-colum">
          <div class="stu-left">1</div>
          <div class="stu-right">
            <img src="img/arrow.png" alt="rightarrow">
          </div>
          <div class="stu-md"><span>匹配你现在的个人情况，寻找适合自己的岗位</span></div>
        </div>

连续英文文字断行

0

2

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

word-break: normal|break-all|keep-all;

该问题已被官方收录

bootstrap布局，内外边距出现问题，布局崩溃

0

1

边距 bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>

去第页

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