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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

使用sass写组件化文件_bootstrap.scss时，媒体查询未完全生效

1

1

媒体查询

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//媒体查询的基本设置
//xl
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}
//lg
@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}
//md
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
//sm
@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}
//列的媒体查询
$list:(sm:576px, md:768px, lg:992px, xl:1200px);

@each $q,
$w in $list {
  @media (min-width: $w) {
    @for $var from 1 through 12 {
      .col-#{$q}-#{$var} {
        flex: 0 0 100%/12*$var;
        position: relative;
        width: 100%/12*$var;
        margin: 0 15px;
      }
    }
  }
}

  @for $var from 1 to 12 {
    .col-#{$var} {
      flex: 0 0 100%/12*$var;
      position: relative;
      width: 100%/12*$var;
      margin: 0 15px;
    }
}

该问题已被官方收录

给背景图片大小不管用

0

1

css概念元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
				background: url("IMG/wolf.png") no-repeat;
				width:100%;
				height:100%;
			}

该问题已被官方收录

如何让汉堡菜单实现动画来回？

0

1

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

input[type="checkbox"]:checked ~ .menu_left {
  transform: translateX(80vw); }

input[type="checkbox"]:checked ~ main {
  transform: translateX(80vw); }

该问题已被官方收录

表格的单元格比例问题

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

table {
    width: 100%;
    table-layout: fixed;
    font-size: 12px;
    color: #969696;
}

该问题已被官方收录

为什么和vw没有兼容性？

0

1

css单位

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

响应式导航栏小屏幕状态下，自动弹出。

1

1

响应式导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

HTML    <div class="navbar-header navbar-toggle"> </div>
              <div class="collapse click-open navbar-collapse" id="jnshu">
                <ul class="nav navbar-nav navbar-right">
                    <li class="list"><a class="menu text-center" href="../html/task14-1.html">首页</a></li>
                    <li class="list"><a class="menu text-center" href="../html/task14-3.html">职业</a></li>
                    <li class="list"><a class="menu text-center" href="../html/task14-2.html">推荐</a></li>
                    <li class="list"><a class="menu text-center" href="../html/task14-1.html">关于</a></li>
                </ul>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".navbar-toggle").click(function() {
                        $(".collapse").toggle();
                    });
                });
            </script>


CSS         .collapse {
                      display: none; }

该问题已被官方收录

如何让胶囊式导航栏实现下拉的动画效果

0

1

css动画导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  .nvb-ul {
    display: none;
    text-align: center;
    width: 100%;
    padding: 0;
    height: auto;
    transition: display .5s ease;//这里是报错的
  }
  .nvb-li {
    background-color: #29b078;
    line-height: 3rem;
    border-bottom: none!important;
    overflow-x: hidden;
    width: 100%;
    &:first-child {
      border-top: .1rem solid #fff;
    }
  }
}
#menu:checked~ .nvb-ul {
  display: block;
}

该问题已被官方收录

git本地仓库中的.git文件夹有什么作用？

1

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

图标HOVER时边框被覆盖怎么解决？

1

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.cooperationbox .cooperation:hover {
    border: 1px solid silver;
    box-shadow: 1px 1px 1px 1px silver;

该问题已被官方收录

组件库改如何引用？

0

1

组件库

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

axios({
  method: 'get',
  url: '/static/style/cart.json',
  data: {
 
  }
 })
<script type="text/javascript" src="static/style/vue.min.js"></script>
<script type="text/javascript" src="static/style/vue-resource.min.js"></script>
<script type="text/javascript" src="static/style/cart.js"></script>
cartView:function(){
 var _this=this //记得写在get上面，不然取不到值
 this.$http.get('/static/style/cart.json',{'id':123}).then(function(res){
 this.pro=res.body.name;
 //_this.produceList=res.body.result.list;
 console.log(res.body.name)
 })
}

去第页

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