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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

导航栏如何在小于768px的时候变成另一种样式？

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无

该问题已被官方收录

能不能控制栅格的容量高度

3

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="row box7">
            <div class="col-xs-12 col-sm-6 col-md-3">
                
          <p>12</p>

            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">

            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
 
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                
            </div>
        </div>

该问题已被官方收录

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

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

该问题已被官方收录

在行高设定auto时,文字无法保持一行

2

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css代码
.explain{
    color: #595959;
    padding-left: 0.2rem;
}
.specialli{
    display: flex;
    align-items: center;
    margin-left: 3%;
    height: auto;
    width: 94%;
    border-bottom: 1px solid #e1e5e7;
    padding: 0.36rem 0;
}
.specialdetail{
    color: #999999;
    border-right: 1px solid #999999;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
html代码
            <li class="specialli"><span class="specialdetail">自我介绍</span><span class="explain">可以洗衣、做饭、照顾老人，可以洗衣、做饭、照顾老人，可以洗衣、做饭、照顾老人，可以洗衣、做饭、照顾老人，可以洗衣、做饭、照顾老人</span></li>

该问题已被官方收录

在引入文件的时候到底是应该写绝对路径，还是相对路径？

0

1

css概念

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

引入文件。

该问题已被官方收录

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

该问题已被官方收录

为什么会出现边框？

2

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.2.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="container">
            <div class="option">
                <div class="page">首页</div>
                <div class="profession">
                    <a href="../html/task8.3.html">职业</a></div>
                <div class="recommend">推荐</div>
                <div class="regard">关于</div>
            </div>
        </div>
    </div>
*{
    margin: 0;
    padding: 0;
}
.wrap{
    background: #fafafa;
}
.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;
}
.xte{
    width: 100%;
}
.option{
    font-size: 2.5rem;
    display: flex;
    float: right;
    color: #ffffff;
    margin-top: 3.5rem;
}
.page{
    margin-right: 1.5rem;
}
.page:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.profession{
    margin-right: 1.5rem;
}
.profession:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.recommend{
    margin-right: 1.5rem;
}
.recommend:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}

该问题已被官方收录

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

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>

该问题已被官方收录

Bootstrap响应式导航栏的下拉栏会覆盖住页面的内容

2

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.navbar-default{
    background-color:#29b078;
    margin:0;
    border:none;
    border-radius:0;
    height:5rem;
}
/*给导航栏右侧文字设置样式*/
.navbar-default .navbar-nav > li > a {
    color:#fff;
    background-color:#29b078;
    border-bottom:0.2rem solid transparent;
}
.navbar-default .navbar-nav > li > a:hover {
    border-bottom:0.2rem solid #fff;
}
.navbar-default .navbar-collapse{
    border:none;
    text-align:center;
}

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 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>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">首页</a></li>
                <li><a href="task8-3.html">职业</a></li>
                <li><a href="task8-3.html">推荐</a></li>
                <li><a href="task8-2.html">关于</a></li>
            </ul>
        </div>
    </div>
</nav>

该问题已被官方收录

1

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<main>
        <div class="container">
            <div class="row row-three">


                <div class="col-5">
                    <div class="main-box-three">
                        <img class="ali" src="img/ali.png">
                        <img class="jinshan" src="img/jinshan.png">
                    </div>
                </div>


                <div class="col-2">
                    <div class="main-box-three">
                        <img class="huanxing" src="img/huanxing.png">
                    </div>
                </div>


                <div class="col-5">
                    <div class="main-box-three">
                        <img class="ronglian" src="img/ronglian.png">
                        <img class="qiniu" src="img/qiniu.png">
                    </div>
                </div>

去第页

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