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"> 代码

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand nav-title">YinyouPoet</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-menu">
      <ul class="nav navbar-nav navbar-right">
        <li class="cative"><a href="#">Home</a></li>
        <li class="cative"><a href="#">About</a></li>
        <li class="cative"><a href="#">Portfolio</a></li>
        <li class="cative"><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

该问题已被官方收录

bootstrap写导航栏，如何让内部内容垂直居中

1

1

居中 bottstrap

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

如何让两个属性一起hover效果

1

1

属性属性属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="link">
                        <div class="circle"></div>
                        <span class="link_text">阿里巴巴</span>
                    </div>
.circle{
    position: relative;
    top: 1.3rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-left: 7rem;
    border: 1px solid orange;
}
.link{
    margin-bottom: 2rem;
}
.todo span{
    margin-right: 3rem;
}
.link circle:hover{
    background:#f9a372;
}
.link_text:hover {
    color: #ff650e;
}

该问题已被官方收录

轮播图为什么不自动翻页？

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="../css/task8.css">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="wrap">
        <div class="container">
            <div class="header-main">
               <span>客服热线：010-594-78634</span>
                <div class="vx">
                <img src="../img/task8...png"  alt="">
                <img src="../img/task.8..png" alt="">
                <img src="../img/task.81.png"  alt="">
                </div>
            </div>
        </div>
    <div class="navigation">
        <div class="option">
            <p>首页</p>
            <p>职业</p>
            <p>推荐</p>
            <p>关于</p>
        </div>
    </div>
    <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" alt="Third slide">
            </div>
            <div class="item">
                <img src="../img/task888png.png" alt="Third slide">
            </div>
            <div class="item">
                <img src="../img/task888png.png" 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>
</div>
</body>
</html>

该问题已被官方收录

bootstrap折叠导航栏脱离文档流

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<header>     
    <nav class="navbar navbar-default navbar-user" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle btn-user" data-toggle="collapse"
            data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="home.html">
            <img src="img/navlogo.png" alt="logo">
          </a>        
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="home.html">首页</a>
            </li>
            <li>
              <a href="job.html">职业</a>
            </li>
            <li>
              <a href="offer.html">推荐</a>
            </li>
            <li>
              <a href="about.html">关于</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <section>
      <section id="myCarousel" class="carousel slide">
          <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>
              <li data-target="#myCarousel" data-slide-to="3"></li>
              <li data-target="#myCarousel" data-slide-to="4"></li>
          </ol>   
          <div class="carousel-inner">
              <div class="item active">
                  <img src="img/slide1.png" alt="First slide">
              </div>
              <div class="item">
                  <img src="img/slide2.png" alt="Second slide">
              </div>
              <div class="item">
                  <img src="img/slide3.png" alt="Third slide">
              </div>
              <div class="item">
                  <img src="img/slide4.png" alt="Fourth slide">
              </div>
              <div class="item">
                  <img src="img/slide5.jpg" alt="Fifth slide">
              </div>
          </div>
          <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>
      </section>
  </section>
  <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <!-- 包括所有已编译的插件 -->
  <script src="js/bootstrap.min.js"></script>

.navbar-user {
    height: 100px;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    background-color: rgb(41, 176, 120);
  }
  .navbar-user  a {
    height: 100px;
    padding-top: 25px;
  } 
   .navbar-user .btn-user {
    margin: 30px 20px;
    border: none;
    background-color: rgb(72, 209, 151);
  }
  .navbar-user .btn-user:focus,
  .navbar-user .btn-user:hover {
    background-color: rgb(72, 209, 151);
  }
  .navbar-user .btn-user .icon-bar {
    background-color: rgb(255, 255, 255);
  }
 
  .navbar-user .navbar-collapse ul {
    float: right;
    
  }
  .navbar-user .navbar-collapse ul a {
    padding-top: 50px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(41, 176, 120);
  }
  @media (max-width: 767px) {
    .navbar-user .navbar-collapse ul {
      float: none;
      margin-top: 0;
      margin-bottom: 0;
      background-color: rgb(41, 176, 120);
    }
  }
  .navbar-user .navbar-collapse ul .active a {
    border-bottom: 5px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    background-color: rgb(72, 209, 151);
  }

该问题已被官方收录

GitHub提交不了

0

1

管理工具

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

如果任务八的第三页职业列表t用able实现各行格数宽度不一样怎么实现

2

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<tr>
      <td colspan="2">
         <table >
            <tr>
               <td rowspan="3" >
                 薪资待遇
               </td>
               <td >
                  <span>0-1年</span>
                  <span>5k-10k/月</span>
               </td>
             </tr>
             <tr>
                <td >
                   <span>1-2年</span>
                   <span>10k-20k/月</span>
                </td>
              </tr>
              <tr>
                <td>
                   <span>2-3年</span>
                    <span>20k-50k/月</span>
                </td>
              </tr>
           </table>
         </td>
     </tr>

该问题已被官方收录

样式受到挤压，导致并行。

2

1

属性 bottstrap 属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="row height">
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">1</span>
          <p class="font">匹配你现在的个人情况 寻找适合自己的岗位</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">2</span>
          <p class="font">了解职业前景薪金待遇、 竞争压力等</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">3</span>
          <p class="font font-right">掌握行业内顶级技能</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">4</span>
          <p class="font font-right">查看职业目标任务</p>
          <span class="arrows"></span>
        </div>
      </div>

该问题已被官方收录

点击导航栏不能下拉菜单

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <nav class=" col-4 navbar navbar-expand-md navbar-dark ">

                    <button class="navbar-toggler but-1" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <!-- 要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。
                        然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id: -->
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link  font" href="#">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link font" href="#">职业</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link font" href="#">推荐</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link font" href="#">关于</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </span>
        </div>

该问题已被官方收录

文字居中的同时保持整体左对齐

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

      <div class="row">
                <p class="col-12 clr-333 px-18 bold">如何学习</p>
                <div class="arrows col-md-6 col-xl-3">
                    <span class="no"></span>
                    <p>匹配你现在的个人情况、寻找适合自己的岗位</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>了解职业前景薪金待遇、竞争压力等</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>掌握行业内顶级技能</p>
                </div>
                <div class="col-md-6 col-xl-3">
                    <p>查看职业目标任务</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>参考学习资源，掌握 技能点，逐个完成任务</p>
                    </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>加入班级，和小伙伴们 互帮互助，一块学习</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>选择导师，一路引导， 加速自己成长</p>
                </div>
                <div class="col-md-6 col-xl-3">
                    <p>完成职业技能，升 级业界大牛</p>
                </div>
            </div>
        </div>

去第页

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