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

任务十三的垂直导航栏

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

Button {
    position: absolute;
    height: 24px;
    width: 24px;
    margin: 12px 0 0 10px;
    background: url(shouye1.png) no-repeat;
    background-size: 24px;
    -webkit-appearance: none;
    z-index: 1;
    outline: none;

有没有必要使用BEM css命名规范？

0

1

代码规范

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

任务13的侧边栏按钮如何做，代码更省更规范；

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

   <header class="header-box">

        <input type="checkbox" id="sidemenu">

        <aside class="g-position">
            <ul class="sideul">
                <li>
                    <img src="../image/side-icon.png">公告<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">设置<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">帮助<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">关于<img src="../image/side-back.png">
                </li>
            </ul>
        </aside>
        <label for='sidemenu'></label>
        <!-- 侧滑按钮图片 -->
        <img src="../image/侧滑.png" class="cehua-botton g-position">
    </header>

如何安装gulp4.0.0

0

1

打包工具

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

如上

input标签为什么会往下排？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

header {
  width: 100%;
  height: 0.5rem;
  font-size: 0.16rem;
  background-color: aqua;
  text-align: center;
  color: white;
  line-height: 0.5rem;
}

header .header-left {
  float: left;
  margin-left: 0.2rem;
}

header .header-right {
  float: right;
  margin-right: 0.2rem;
}

main form div {
  position: relative;
  height: 0.5rem;
  background-color: white;
  margin: 0.2rem 0;
}

main form div img {
  margin: .15rem;
  padding-right: 0.2rem;
  border-right: .01rem solid;
}

main form div input {
  position: absolute;
  top: calc(50% - .1rem);
  height: .2rem;
  border: 0;
  padding: 0;
  outline: none;
  font-size: 0.16rem;
}

侧边栏有几种实现方法

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

#boom {
    display: none;
}

@keyframes left-in {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(2.4rem, 0);
    }
}

#boom:checked~header{
    animation: left-in .8s forwards;
}

#boom:checked~main {
    animation: left-in .8s forwards;
}

#boom:checked~.menuBar {
    animation: left-in .8s forwards;
}