IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

如何上下对齐

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.partner{
    padding-top: 20px;
    /*box-shadow: 1px 1px 1px lightgrey;*/
    width: 1200px;
    margin: 0 auto;
}
.partner1{
    text-align: center;
    padding-bottom: 20px;
}

.logo1 {
    display: inline-block;
    width: 18%;
}
.logo1 img{
    /*margin: auto 20px;*/
    width: 100%;
    height: 150px;
}
ul{
    padding:0;
}

旋转子元素div超出父元素

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 special">
              <div class="maintable">
                  <div class="top">
                      <img src="../img/student.png" alt="">
                      <div>
                          <div class="web">
                          <p class="title2"><b>Web前端工程师</b></p>
                          <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开 发。</p>
                      </div>
                      </div>
                  </div>
                  <div class="bottom">
                      <table border="1" class="hard">
                          <tr>
                              <td class="td1">
                                  <span class="detial">门槛</span><img src="../img/redstar.png" alt=""></td>
                              <td class="td1">
                                  <span class="detial">难易程度</span><img src="../img/redstar.png" alt=""> <img
                                      src="../img/redstar.png" alt=""></td>
                          </tr>
                          <tr>
                              <td class="td1"><span class="detial">成长周期</span><span class="detial1">1-3年</span></td>
                              <td class="td1"><span class="detial">稀缺程度</span> <span class="detial1">345</span>家公司需求</td>
                          </tr>
                          <tr>
                              <td rowspan="3" class="td2"><span class="detial">薪资待遇</span></td>
                              <td><span class="detial2">0-1年</span><span class="vage">5k-10k/月</span></td>
                          </tr>
                          <tr>
                              <td><span class="detial2">0-1年</span><span class="vage">5k-10k/月</span></td>
                          </tr>
                          <tr>
                              <td><span class="detial2">0-1年</span><span class="vage">5k-10k/月</span></td>
                          </tr>
                          <tr>
                              <td colspan="3" class="td1"><b>有</b><span class="detial1"><b>286</b></span><b>人正在学</b></td>
                          </tr>
                          <tr>
                              <td colspan="3" class="td1 "><span class="detial">提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</span></td>
                          </tr>
                      </table>
                  </div>
              <div class="transform">
                  <p>IOS工程师</p>
                  <p>OS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属
                      于类Unix的商业操作系统。国内iOS开
                      发起步相对较晚，人才培养机制更是远
                      远跟不上市场发展速度。有限的iOS开
                      发人才成了国内企业必争的资源。国内 iOS开发起步相对较晚，人才培养机制
                      更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。</p>
              </div>
          </div>
          </div>


.maintable{
    position: relative;
}
.transform {
    color: white;
    text-align: center;
    padding: 40px 25px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.7;
    transition:width 2s, height 2s;
    -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
    -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
    display: none;
}
  .transform:hover
     {
      /*width:200px;*/
      /*height:200px;*/
      transform:rotate(360deg);
      -moz-transform:rotate(360deg); /* Firefox 4 */
      -webkit-transform:rotate(360deg); /* Safari and Chrome */
      -o-transform:rotate(360deg); /* Opera */
}

.special:hover .transform{
    display: block;
}

文字遇到括号不换行

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

!

bootstrap4.0框架的汉堡菜单如何引用完成任务8的导航栏

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

英文换行；表格长宽

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

表格:table-layout:fixed
文字"word-break:break-all