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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

设置了最大宽度，子元素设置百分比,同时设置了相对视窗定位，会超出我设定的最大宽度

0

1

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
  margin: 0;
  padding: 0; }

.max-wid {
  max-width: 780px;
  min-width: 320px;
  height: 100vh;
  margin: auto; }

header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  line-height: 40px;
  font-size: 20px;
  color: #ffffff;
  background: #5fc0cd; }
  header img {
    height: 20px; }

该问题已被官方收录

为何当设置margin-bottom负值后，会改变CSS读取的高度？

0

1

边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div style="width: 50%;height: 50px;margin-bottom: -25px;background: red">
	</div>
	<div style="width: 20%;height: 25px;background: #dddddd"></div>

该问题已被官方收录

gulp合并文件具体的操作流程是什么样？

0

1

打包工具

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

gulp.task('scss',function(){
    gulp.src('src/scss/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('lib/css'))
        .pipe(rename({suffix:".min"}))
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'))
});

该问题已被官方收录

怎么用纯CSS实现task13下面的Tab切换标签效果代码

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header .main .recent span {
  display: block;
  width: 3vw;
  height: 3vw;
  border: 0.1vw solid #aaaaaa;
  border-radius: 50%;
  float: left;
  margin-right: 0.5vw;
  margin-top: 2vw;
}
.header .main .recent span:hover {
  background: #29BDE0;
}
.header .main .recent p {
  display: block;
  width: 14vw;
  margin: auto;
}

该问题已被官方收录

轮播图在页面载入时无法自动轮播

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<script>
    function init() {
        console.log("轮播图初始化");
        $("#myCarousel").carousel('cycle');
    }
    setTimeout(init,400);
</script>

<script>
    function init() {
        console.log("轮播图初始化");
        $("#myCarousel").carousel('cycle');
    }
    setTimeout(init,400);//可以成功初始化
    init(); //直接调用无效
    setTimeout(init,20); //间隔时间太短无效
</script>

该问题已被官方收录

如果上传到自己的githup里面，那要怎么上传到公共的？

0

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

如何不用框架做响应式导航栏

0

1

响应式导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css

该问题已被官方收录

汉堡菜单划出来后，右边的隐藏内容能用手划出来，怎么解决

0

1

侧边栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<input type="checkbox" id="sidebar">
<!--汉堡侧栏开始-->
<div class="sidebar-menu">
    <ul>
        <li>
            <span>
                <img src="../images/laba.png" alt="">
                公告
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/chilun.png" alt="">
                设置
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/wenhao.png" alt="">
                帮助
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/xiaoguanji.png" alt="">
                关于
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
    </ul>
</div>
<!--汉堡侧栏结束-->

<!--头部开始-->
<header>
    <label for="sidebar">
        <img src="../images/celan.png" alt="">
        <img src="../images/guanbi.png" alt="">
    </label>
</header>
<!--头部结束-->
<!--主体开始-->
<a href="task13-2.html" class="last-game">
    <span>上次游戏：捉鬼猜词版</span>
    <img src="../images/baijiantou.png" alt="">
</a>
<div class="nav-game">
    <h1>捉鬼游戏</h1>
    <div class="row">
        <a href="task13-2.html" class="nav-item">简化版</a>
    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="row row-middle">
        <a href="task13-2.html" class="nav-item">猜词版</a>
        <a href="task13-2.html" class="next"><img src="../images/huangjiantou.png" alt=""></a>

    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="row">
        <a href="task13-2.html" class="nav-item">白痴版</a>
    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="nav-circle">
        <a href="###" class="active"></a>
        <a href="###"></a>
        <a href="###"></a>
        <a href="###"></a>
    </div>

</div>
<!--主体结束-->

该问题已被官方收录

使用checkbox绑定侧边栏后，侧边栏却出现了显示异常

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="mmm">
    <div class="m-border"></div>
    <div class="m1">
        <div class="ma">
            <img src="images-task13/1.png" width="24" />
            <span class="ma1">公告</span>
        </div>
        <div class="ma">
            <img src="images-task13/5.png" height="23" width="14"/>
        </div>
    </div>
    <div class="m1">
        <div class="ma">
            <img src="images-task13/2.png" width="24" />
            <span class="ma1">设置</span>
        </div>
        <div class="ma">
            <img src="images-task13/5.png" height="23" width="14"/>
        </div>
    </div>

    <div class="m1">
        <div class="ma">
            <img src="images-task13/3.png" width="24" />
            <span class="ma1">帮助</span>
        </div>
        <div class="ma">
            <img src="images-task13/5.png" height="23" width="14"/>
        </div>
    </div>

    <div class="m1">
        <div class="ma">
            <img src="images-task13/4.png" width="24" />
            <span class="ma1">关于</span>
        </div>
        <div class="ma">
            <img src="images-task13/5.png" height="23" width="14"/>
        </div>
    </div>
</div>

<div class="checkbox1">

    <input type="checkbox" value="1" id="check1" name="" />
    <label for="check1"></label>
</div>
    <div class="nnn">

<div class="head">
    <div class="h-img"></div>
</div>

label {
  @include position(absolute,top,17px,left,25px);
  @include sprite(34px,27px,
          url(images-task13/t.png) -185px -307px no-repeat,
          scale(0.9));
  transition: all .6s ease;
  cursor: pointer;
  z-index: 3;
}
input {
  @include position(absolute,top,0px,left,0px);
}

.checkbox1 {
  @include position(absolute,top,0px,left,0px);
  width: 100%;
  overflow: hidden;
}

.checkbox1 input[type=checkbox]:checked ~ label {
  left: 80%;
}
.checkbox1 input[type=checkbox]:checked ~ .nnn{
  transform: translateX(80%);
}

.nnn {
  @include bg-c(#f0f0f0);
  transition: all .6s ease;
  height: 900px;
  z-index: 2;
}
.mmm {
  position: absolute;
  @include flex(flex,column,flex-start,center);
  @include bg-c(#fff);
  @include font(1.2em,#69D1E9,left,normal);
  @include box(80%,900px);
}
.m1 {
  @include flex(flex,row,space-between,center);
  @include padding(20px 0);
  @include box(100%,20px);
  border-bottom:1px solid #c0c0c0;
}
.ma {
  margin: 0 20px;
}
.ma1 {
  margin-left:15px;
}
.m-border{
  position: absolute;
  @include box(100%,100%);
  border-right:20px solid #29bde0;
}
input[type=checkbox] {
  visibility: hidden;
}

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

测

去第页

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