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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

图标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)
 })
}

该问题已被官方收录

GitHub上传代码以及出现404如何解决？

1

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

用bootstrap做导航栏为什么不能套row？

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    <nav class="navbar navbar-expand-md navbar-light nav-padding">
        <div class="container justify-content-end menu-padding">
            <button class="navbar-toggler button-margin" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="col text text-center navbar-nav justify-content-end">
                    <li class="nav-item">首页</li>
                    <li class="nav-item">职业</li>
                    <li class="nav-item">推荐</li>
                    <li class="nav-item">关于</li>
                </ul>
            </div>
        </div>
    </nav>

该问题已被官方收录

checked点击事件

1

1

表单元素事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="main">
    <img class="jnshu" src="task14/img/task14-1/jnshu.png">
    <input type="checkbox" id="awesomea" />
    <label for="awesomea">点这里
    </label>
    <div class="page">
        <a class="page1">首页</a>
        <a class="page2" href=task8-2.html>职业</a>
        <a class="page3" href=task8-3.html>推荐</a>
        <a class="page4">关于</a>
    </div>
</div>

该问题已被官方收录

如果使用bootstrap的折叠模拟下拉菜单，如何让他在一次点击事件只显示一个？

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.second-line {
    padding-right: 30px;
}
#downlist {
    list-style: none;
}
.down-line {
    position: relative;
    display: inline-block;
    margin: 10px auto; 
}
.down-line ul {
    position: absolute;
    z-index: 1;
    width: 100%;
}
.down-line button {
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    border: 2px solid #f2f2f2;
    font-size: .14rem;
    color: #999999;
}
/* 右侧下拉图标 */
.down-line button p {
    display: inline-block;
    width: 22px;
    height: 26px;
    margin-left: 25px;
    border-radius: 5.5%;
    background: #1d7ad9;
}
.down-line button p::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 6px;
    border-top: 6px solid white;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent; 

}
/* 下拉选框样式 */
#downlist {
    border: 1px solid #f2f2f2;
    border-top: none;  
}
#downlist li {
    padding-top: 5px;
    padding-bottom: 5px; 
    background: white;
}
#downlist a {
    color: #888888 !important;
    text-decoration: none;
}
#downlist li:hover {
    background: #f2f2f2;
}

<div class="row forth-line align-items-center">
                    <div class="col-sm-10">
                        <input class="circlebox" type="radio" id="material1" name="boxtype">
                        <label for="material1">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material2" name="boxtype">
                        <label for="material2">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material3" name="boxtype">
                        <label for="material3">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material4" name="boxtype">
                        <label for="material4">三层A瓦优质</label>
                        <input class="circlebox" type="radio" id="material5" name="boxtype">
                        <label for="material5">三层A瓦优质</label>
                    </div>
                    <div class="col-sm-2 text-right">
                        <div class="down-line">
                            <button data-toggle="collapse" data-target="#downlist3">
                                查看详情
                                <p></p>
                            </button>
                            <ul id="downlist3" class="collapse text-center">
                                <li>
                                    <a href="#">emmmm</a>
                                </li>
                                <li>
                                    <a href="#">emmmm</a>
                                </li>
                                <li>
                                    <a href="#">emmmm</a>
                                </li>
                            </ul>

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

该问题已被官方收录

label点击效果会一直存在

0

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

以下为less代码

.nav {
  position: relative;
  .max-width();
}
// 图标
.nav-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}


// 点击按钮
.menu-button {
  padding: 2rem 0;
  overflow: hidden;
}
.icon-menu {
  float: right;
  position: relative;
  width: 1rem;
  height: 1rem;
  padding: .5rem;
  margin-right: 1rem;
  border-radius: 5px;
  background-color: darken(@green,15%);
  &:hover {
    cursor: pointer;
    background-color: darken(@green,10%);
  }  
  &::before {
    content: '';
  position: absolute;
  top: .95rem;
  left: .5rem;
  width: 1rem;
  height: 2px;
  background-color: @white;
  }
  &::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 1rem;
    height: 1rem;
    border-top: 2px solid @white;
    border-bottom: 2px solid @white;
  }
}
// 导航栏
.menu-list {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: @green;
  text-align: center;  
  list-style: none;
  a {
    display: block;
    padding: 2rem ;
    color: @white;
    &:hover {
      background-color: lighten(@green, 10%);
    }
  }
}
.current {
  border-bottom: 5px solid @white;
}
/* 折叠导航栏点击效果 */
input,
.menu-list {
  display: none;
}
input:checked ~ .menu-list {
  display: block;
  position: absolute;
  z-index: @modal-z-index;
  border-top: 1px solid @white;
}
/* 水平导航栏 */
@media (min-width: 768px) {
  .menu-button {display: none;}
  .menu-list {
    display: block;
    max-width: 1024px;
    margin: 0 auto;
    text-align: right;
    font-size: 0;
    li {
      display: inline-block;
      &:hover {
        border-bottom: 5px solid @white;
      }
    }
    a {
      display: inline-block;   
      font-size: initial;   
    }
  }
}

该问题已被官方收录

多个内联元素排成一行

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<span>2015-7-5至2015-7-12</span>
<span>25元/小时</span>
<a herf= "#"><img src= "back.png" /></a>

该问题已被官方收录

如何不适用bootstrap用纯css写一个轮播图

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div id="picture" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicator">
        <li data-target="#picture" data-slide-to="0" class="active"></li>
        <li data-target="#picture" data-slide-to="1" class></li>
        <li data-target="#picture" data-slide-to="3" class></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/pic1.jpg ">
        </div>
        <div class="item">
            <img src="images/pic2.jpg ">
        </div>
        <div class="item">
            <img src="images/pic3.jpg ">
        </div>
    </div>
    <a class="left carousel-control" href="#picture" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true "></span>
    </a>
    <a class="right carousel-control" href="#picture" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>
</div>

该问题已被官方收录

关于Buton的一个疑问

1

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.btn-left,
.btn-right {
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
}
.btn-right {
    float: right;
    margin-right: 1rem;
}
.btn-left {
    float: left;
    margin-left: 1rem;
}

去第页

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