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

该问题已被官方收录

本地完成任务上传到GitHub后，bootstrap轮播图显示异常

0

1

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

多元素如何水平居中？

2

1

居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

该问题已被官方收录

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

该问题已被官方收录

为什么一个元素要浮动，那么它的祖先元素一定要设置高度呢？

0

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

*{
 
    height: 100vw;
}
.box{
   width: 30%;
   height: 30%;
   margin-left: 2.5%;
   margin-top: 2.5%;
   background-color:orange;
   border-radius: 20%;
   float: left;
}

该问题已被官方收录

在引入文件的时候到底是应该写绝对路径，还是相对路径？

0

1

css概念

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

引入文件。

该问题已被官方收录

雪碧图横着做的，为什么直接使用雪碧图位置放大会变形。

3

1

属性属性属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.killer {
    width: 15px;
    height: 18px;
    background: url(../img/css_sprites.png) no-repeat 0 0;
}

judge {
    width: 4.5vw;
    height: 4.5vw;
    background: url(../img/css_sprites.png) no-repeat -15px 0;
}

该问题已被官方收录

盒子页面在进行到进度条时，使用了另一个办法，使用盒子的边框做底，做圆形盒子打底。

0

1

盒模型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css：


html {
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}

/*header区域开始*/
/*顶部登录页面*/
/*顶部最大容器*/
.loginbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4rem;
    background-color: #1d7ad9;
    font-size: 1.6rem;
    color: #ffffff;
}

/*顶部最大容器结束*/
.loginbar-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*文字框容器*/
.loginbar-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20%;
}

/*文字框容器*/

/*文字框设置*/
.loginbar-right-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 50%;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}

/*结束*/

/*顶部文字框hover*/
.loginbar-right-right:hover {
    background-color: #ffffff;
    color: #000;
}

/*导航栏*/
.bnt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.bnt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    width: 100%;
    height: 5rem;
}

.bnt-center {
    width: 9%;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    background-color: #ffffff;
    border-radius: 15%;
    font-size: 1.6rem;
}

.bnt-center:hover {
    background-color: #1d7ad9;
    color: #fff;
}

/*结束*/
/*进度条*/
.sidebar {
    width: 55%;
    border-top: 5px solid yellow;
    float: right;

}

.sidebar-top {
    display: flex;
    justify-content: space-around;
    position: relative;
    top: 0;
    left: 0;
}

.sidebar-center {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color:#ff7f02;
    position: absolute;
    
}

.sidebar-bottom {
    display: flex;
    justify-content: space-around;
    height: 3rem;
    line-height: 3rem;
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task10</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/task10.css">
</head>
<body>
<header>
    <div class="loginbar">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 loginbar-left">
                    <div>客服热线：1234123412342</div>
                    <div class="loginbar-right">
                        <div class="loginbar-right-right">登录</div>
                        <div class="loginbar-right-right">注册</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bnt-top">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 bnt">
                    <div style="width: 50%;"></div>
                    <div class="bnt-center">首页</div>
                    <div class="bnt-center">在线定制</div>
                    <div class="bnt-center">标准箱</div>
                    <div class="bnt-center">品质保证</div>
                </div>
            </div>
        </div>
    </div>
    <br><br>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div style="width: 50%;"></div>
            <div class="sidebar"></div>
        </div>
    </div>
</div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-top">
                <div style="width: 40%;"></div>
                <div class="sidebar-center">1</div>
                <div class="sidebar-center">2</div>
                <div class="sidebar-center">3</div>
                <div class="sidebar-center">4</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-bottom">
                <div style="width: 40%;"></div>
                <div>1.定制纸箱</div>
                <div>2.上传附件</div>
                <div>3.选择数量</div>
                <div>4.确认下单</div>
            </div>
        </div>
    </div>
</header>
</body>
</html>

该问题已被官方收录

完成媒体查询配置后，图块盒子却出现了位置错乱的现象

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

        <div class="big1-1 " >
            <div class="img1" ></div>
            <div class="tx1" >高效</div>
            <div class="tx2" >将五到七年的成长时间，缩短 到一年到三年。</div>
        </div>
        <div class="big1-1 " >
            <div class="img2" ></div>
            <div class="tx1" >规范</div>
            <div class="tx2" >标准的实战教程，不会走弯路。</div>
        </div>
        <div class="big1-1 " >
            <div class="img3" ></div>
            <div class="tx1" >人脉</div>
            <div class="tx2" >同班好友，同院学长，技术大师，入学就混入职业圈，为以后铺平道路。</div>
        </div>
        <span class="border "></span>
        <div class="big1-2 " >
            <div class="img4" ><div class="img4t " >12400</div></div>
            <div class="tx2" >累计在线人数</div>
            <div class="img4" ><div class="img4t ">12400</div></div>
            <div class="tx2" >学员已找到满意工作</div>
        </div>
    </div>


    <!-------------big1--------------->


<div class="big2" >
    <div class="big2-tx1" >如何学习</div>

    <div class="big2-1 " >

        <div class="big2-1-1">
            <div class="circle " >
                <div class="num">1</div>
            </div>
                <span class="big2-tx">匹配你现在的个人情况 寻找适合自己的岗位</span>
        </div>
        <div class="big2-img" ></div>

@media (max-width: 1080px){
    .big1{
        width: 60%;
    }
    .big1-2{
        align-items: center;
    }
    .border{
        display: none;
    }
}
@media (max-width: 768px){
    .border{
        display: none;
    }
    .big1 {
        width: 50%;
    }
}
/*//---------------------------big1--------------------------//*/


.big2-img{
    width: 28px;
    height: 25px;
    background: url(image-task8/n.png) -214px -10px no-repeat;
    transform: scale(.8);
}
.big2-img1{
    width: 28px;
    height: 25px;
    background: url(image-task8/n.png) -214px -10px no-repeat;
    transform: scale(.8);
}
@media (max-width: 1200px){
    .big2-img1{
        display: none;
    }


    .big2-1 {
        width: 60%;
    }
}
@media (max-width: 767px){
    .big2-img{
        display: none;
    }

    .big2-1 {
        width: 50%;
    }
}


/*//---------------------------big2--------------------------//*/

该问题已被官方收录

轮播图

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

该问题已被官方收录

九宫格，写出来九个格子之后一排4个是什么原因？

3

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

一行4个格子