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

怎样不使用Bootstrap来做一个响应式折叠导航栏，这东西怎么修改里面的属性啊

0

1

响应式

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>

PS 以及PSCC怎么快速切图

2

1

PhotoShop

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

切图有什么工具

sass无法同步

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
  display: flex;
  flex-direction: row;


  margin: 0;
  background-color: rgba(240, 240, 240, 1);

  /*左拉菜单*/
  .menu {
    flex-basis: 55%;

    display: none;

    height: 6.2rem;
    font-size: .16rem;
    color: rgba(41, 189, 224, 1);
    background-color: #fff;


    ul {
      padding: 0;
      text-indent: 8px;
      list-style: none;


      li {
        line-height: 2.2;
        border-bottom: 1px solid rgba(225, 229, 231, 1);

        img {
          height: .22rem;
          vertical-align: -.05rem;
        }

        .menu-arrow {
          float: right;
          margin-top: .12rem;
          margin-right: .3rem;
          width: .1rem;
          height: .1rem;
          border-top: .02rem solid rgba(41, 189, 224, 1);
          border-right: .02rem solid rgba(41, 189, 224, 1);
          transform: rotate(45deg)
        }
      }
    }
  }

}

article {
  position: relative;
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  
header {
  z-index: 5;
  width: 100%;
  height: .5rem;
  background-color: rgba(41, 189, 224, 1);

  .head-logo {
    position: relative;

    i {
      display: block;
    }

    .logo-line-1 {
      position: absolute;
      top: 17px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
    }

    .logo-line-2 {
      position: absolute;
      top: 33px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
    }
  }
}


  .last-game {
    position: relative;
    margin-top: .15rem;
    width: 92%;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    font-size: .17rem;
    border: .01rem solid #C9C9C9;
    color: rgba(154, 154, 154, 1);
    background-color: #ffffff;

    i {
      position: absolute;
      top: 35%;
      right: 3%;
      width: .13rem;
      height: .13rem;
      border-top: .03rem solid rgba(231, 231, 231, 1);
      border-right: .03rem solid rgba(231, 231, 231, 1);
      transform: rotate(45deg)
    }
  }



  main {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 92%;
    height: 4.5rem;
    margin-top: .5rem;
    background-color: #ffffff;
    border: .01rem solid #C9C9C9;


    h3 {
      font-size: .12rem;
      color: #787878;
    }

    .game-begin {
      display: flex;
      height: 10%;
      width: 90%;
      justify-content: center;
      border-bottom: .01rem solid #FBB435;

      .game-btn {
        width: 100%;
        border-style: none;
        font-size: .19rem;
        outline: none;
        color: #FBB435;
        background-color: #fff;
      }
    }

    .edition {
      position: relative;
      margin-top: .2rem;
      width: 80%;
      height: 15%;
      outline: none;
      border-style: none;
      color: #fff;
      background-color: #69D1E9;
    }


    .arrow {
      position: absolute;
      right: -7px;
      top: 47%;
      height: 0;
      width: 0;
      border-width: 13px;
      border-style: solid;
      border-color: transparent transparent transparent #FBB435;
    }


    .bottom-circle {
      display: flex;
      height: .3rem;
      width: .6rem;
      justify-content: center;


      .circle {
        margin-left: .03rem;
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
        background-color: #F0F0F0;

        &:hover {
          background-color: #69D1E9;
        }

      }

    }

  }

}

去除inline-block元素间间距

1

布局内外边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box {
            width: 100%;
            height: 600px;
            background-color: red;
        }

        .box1{
            display: inline-block;
            width: 100px;
            height: 200px;
            background-color: blue;
        }


    </style>

</head>
<body>

<div class="box">
    <div class="box1">124124</div>
    <div class="box1">14124</div>
    <div class="box1">141414</div>

</div>
</body>
</html>

如何将 footer 保持在底部？

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header{
    flex: 0 0 auto;
}
.main{
    flex: 1 0 auto;
}
.footer{
    flex: 0 0 auto;
}

怎么使导航悬停2个字变成4个字的同时下边框出现在底部

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="task8-2.css">
</head>

<body>
    <header class=" container none">
        <div class="d-flex justify-content-between align-items-center padding-lf-1rem">
            <span class="color-main font-size-14">
                客服热线：010-594-78634
            </span>
            <div>
                <i class="samll-icon nav-icon-1"></i>
                <i class="samll-icon nav-icon-2"></i>
                <i class="samll-icon nav-icon-3"></i>
            </div>
        </div>
    </header>
    <nav class="bg-main" >
        <div class="container">
            <div class="navbar navbar-expand-lg nav-height navbar-dark" >
                <a class="navbar-brand" href="#"><img src="img/home-logo.png" class="nav-logo"></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 ml-auto">
                        <li class="nav-item active" style="display: flex;align-items: center;">
                            <p class="wwwww"></p>
                            <a class="nav-link font-size-18 nav-link-width" href="#">首页机缘</a>
                            
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link font-size-18 nav-link-width" href="#">职业咨询</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link font-size-18 nav-link-width" href="#">合作企业</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link font-size-18 nav-link-width" href="#">关于修真</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</body>

</html>

.nav-link-width {
  width: 37px;
  height: 21px;
  line-height: 21px;
  overflow: hidden;
  padding: 0 !important;
  text-overflow: ellipsis;
  display: inline-block;
  margin-left: 2rem !important;
}
.nav-height {
  height: 100px;
}
.nav-item:hover .nav-link-width {
  width: 75px;
  margin-left: 2rem !important;

  border-bottom: 2px solid #fff;
}

bootstrap3.0和4.0栅格系统布局有什么区别

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<header>
        <div class="container">
            <div class="row align-items-center headerHeight">
                <div class="col-md-6 ">
                    <div class="customService">客服热线：010-594-78634</div>
                </div>
                <div class="col-md-6 text-right icons">
                    <div class="wechat"></div>
                    <div class="qq"></div>
                    <div class="sina"></div>
                </div>
            </div>
        </div>
        <div class="bgc">
            <div class="container bgc">
                <div class="row align-items-center bgc">
                    <div class="col-4 col-sm-4">
                        <div class="tree">技能树</div>
                        <div class="url">www.jnshu.com</div>
                    </div>
        
                    <div class="col-8 col-sm-8">
                        <ul class="nav navRight text-center justify-content-end">
                            <a href="">
                                <li class="nav-item">
                                    首页
                                    <div class="white">
                                </li>
                            </a>
                            <a href="">
                                <li class="nav-item">
                                    职业
                                    <div class="white">
                                </li>
                            </a>
                            <a href="">
                                <li class="nav-item">
                                    推荐
                                    <div class="white">
                                </li>
                            </a>
                            <a href="">
                                <li class="nav-item">
                                    关于
                                    <div class="white">
                                </li>
                            </a>

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


            </div>
        </div>

    </header>

在flex布局中，text-overflow：ellipsis不生效的问题

1

flex 页面显示

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css代码
.txt2{
    width: 50%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-bottom: 1.3rem;
    margin-top: 1.3rem;
    font-size: 1.4rem;
}
.listtxt{
    position: relative;
    display: flex;
    padding-left: 1.5rem;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: end;
    width: 100%;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #e1e5e7
}
html代码
<div class="listtxt">
<div class="txt2">
        <p>2015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-12</p>
    </div>
</div>

这个什 i 起什么作用

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

div{
    height: 100px;
    width: 200px;
    background-color: pink;
    text-align: center;
}
span{
    display:inline-block;
    vertical-align: middle;
    line-height: 20px;
    width: 100px;
}    
i{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}



<div>
        <i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span>
  </div>

怎么让元素具有点击后出现hover的效果

2

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.lump a:hover {
    text-decoration: none;
    color: #ff6d1b;
}
.lump a:hover .circle-left {
    background: #ff6d1b;
}