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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

用ul 去实现均匀布局盒子

0

1

属性属性表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

ul{
    float: left;
    text-decoration: none;
    list-style-type: none;
    /*margin: 0;*/
    padding-left: 10px;
    /*border: 0;*/




}
.card> li{
    float: left;
    width: 20%;
    height: 20%;
    text-align: center;
    border: 4px solid white;
    margin: 5% 5% 8% 7%;

该问题已被官方收录

文字居中的同时保持整体左对齐

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

      <div class="row">
                <p class="col-12 clr-333 px-18 bold">如何学习</p>
                <div class="arrows col-md-6 col-xl-3">
                    <span class="no"></span>
                    <p>匹配你现在的个人情况、寻找适合自己的岗位</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>了解职业前景薪金待遇、竞争压力等</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>掌握行业内顶级技能</p>
                </div>
                <div class="col-md-6 col-xl-3">
                    <p>查看职业目标任务</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>参考学习资源，掌握 技能点，逐个完成任务</p>
                    </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>加入班级，和小伙伴们 互帮互助，一块学习</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>选择导师，一路引导， 加速自己成长</p>
                </div>
                <div class="col-md-6 col-xl-3">
                    <p>完成职业技能，升 级业界大牛</p>
                </div>
            </div>
        </div>

该问题已被官方收录

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

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; }

该问题已被官方收录

如果使用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"> 代码

··

该问题已被官方收录

如何不适用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>

该问题已被官方收录

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

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); }

该问题已被官方收录

引入less.js和less文件后打开报错

1

1

less

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

不加float，会竖向排列。加上float，会萎缩塌陷

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            background: #29bde0;
        }

        .header {
            width: 100%;
            height: 60px;
            line-height: 60px;
            position: fixed;
            z-index: 1;
            top: 0;
        }

        .headers {
            text-align: center;
            font-size: 22px;
            color: white;

        }

        .headersImage {
            position: absolute;
            bottom: -5px;
            left: 30px;
        }

        .headersImg {
            position: absolute;
            bottom: -5px;
            right: 30px;
        }

        .circle {
            height: 52px;
            width: 52px;
            border-radius: 50%;
            background: #fbb435;
            position: absolute;
            right: 100px;
            top: 9px;
        }

        .message-box {
            position: relative;
            top: 60px;
            width: 100%;
            height: 70px;
            line-height: 70px;
            background: #b9e9f5;
            /*box-shadow:1px 1px 1px #b9e9f5;*/
            /*border:1px solid #C9E9C0;*/
            /*border-radius:4px;*/
            padding-left: 50px;
            font-size: 20px;
            color: #5e5e5e;
        }

        .triangle-border {
            position: absolute;
            /*left:40px;*/
            /*overflow:hidden;*/
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            bottom: -20px;
            border-color: #b9e9f5 transparent transparent transparent;
            /*border-color:#b9e9f5 ;*/
        }

        .wordOne {
            color: white;
            font-size: 18px;
            margin-top: 75px;
            margin-left: 50px;
        }

        /*div.container div.row div {*/
        /*margin-top: 60px;*/
        /*line-height: 60px;*/
        /*height: 60px;*/
        /*background-color: white;*/
        /*border: 1px solid #696969;*/
        /*text-align: center;*/
        /*}*/

        .mains {
            /*width: 588px;*/
            /*height: 196px;*/
            text-align: center;
            float: left;

        }

        .blocksLeft {
            width: 25%;
            height: 20vw;
            background-color: #f5c97b;
            margin: 30px 30px 0 30px;
            border-width: 4px 4px 0 4px;
            border-style: solid;
            border-color: white;
            position: relative;

        }
        .blocksLe {
            width: 25%;
            height: 5vw;
            background-color: #83b09a;
            margin: 0 30px 30px 30px;
            border-width: 0 4px 4px 4px;
            border-style: solid;
            border-color: white;
            position: relative;
        }

        .blocks {
            display: inline-block;
            width: 25%;
            height: 25%;
            margin: 30px;
            text-align: center;
            border: 4px solid white;

        }

        .blocksRight {
            display: inline-block;
            width: 25%;
            height: 25%;
            margin: 30px;
            text-align: center;
            border: 4px solid white;
            float: right;
        }

        .blocksOne {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #5e5e5e;
            font-size: 20px;
        }

        .blocksTwo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 18px;
        }

        .threeTable {
            text-align: center;
            font-size: 21px;
            color: #9C9C9C;
            height: 58px;
            line-height: 58px;
        }

去第页

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