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

margin 负值会有什么影响

0

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

https://www.jianshu.com/p/549aaa5fabaa

动画效果的问题

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.table-col {
    position: relative;
    &:hover .animation-table {
        display: block;
        @keyframes mytable {
            0% {transform: rotate(0);}
            100% {transform: rotate(360deg);}
        }
    }
    &:hover .animation-table2 {
        display: block;
        @keyframes mytable2 {
            0% {transform: rotatey(0);}
            100% {transform: rotatey(360deg);}
        }
    }
    &:hover .animation-table3 {
        display: block;
        @keyframes mytable3 {
            0% {height: 0;}
            100% {height: calc(100% - 48px);}
        }
    }
}
.table {
    table-layout: fixed;
    margin-top: 48px;
    box-shadow: 0 0 3px #D0D6D9;
    border-radius: 3%;
    width: 100%;
    background: #FFFFFF;
}
.animation-table {
    display: none;
    position: absolute;
    left: 15px;
    top: 48px;
    z-index: 1;
    border-radius: 3%;
    width: calc(100% - 30px);
    height: calc(100% - 48px);
    background: rgba(51, 51, 51, .8);
    animation: mytable 1s;
    .at-font1 {
        margin: 40px 0;
        font-size: 14px;
        text-align: center;
        color: rgba(255, 255, 255, 1);
    }
    .at-font2 {
        @extend .at-font1;
        margin: 0 auto 40px;
        width: 80%;
        line-height: 22px;
        text-align: justify;
    }
}
.animation-table2 {
    @extend.animation-table;
    animation: mytable2 1s;
}
.animation-table3 {
    @extend.animation-table;
    animation: mytable3 1s;
}

如何实现table的响应式

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <table class="web">
                            <tr>
                                <td>
                                    <div class="ios1">
                                        <div class="ios-title">IOS工程师</div>
                                        <div class="ios-content">iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS
                                            X操作系统一样也是以Darwin为基础的，因此同样属于类Unix的商业操作系统。国内iOS开发起步相对较晚，人才培养机制更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。国内
                                            iOS开发起步相对较晚，人才培养机制更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
                                        </div>
                                    </div>
                                </td>
                            </tr>


                            <!--表格第一行-->
                            <tr>
                                <td class="row-hidden"></td>
                                <td class="row-hidden"></td>
                                <td class="row-hidden"></td>
                                <td class="row-hidden"></td>
                                <td class="row-hidden"></td>
                                <td class="row-hidden"></td>
                                <td class="row-hidden"></td>
                                <td class="row-hidden"></td>
                                <td class="row-hidden"></td>
                                <td class="row-hidden"></td>
                            </tr>
                            <tr>
                                <td colspan="10">
                                    <div class="row-one">
                                        <div class="man"></div>
                                        <div class="row-one-right">
                                            <div class="it-type">Web前端工程师</div>
                                            <div class="it-type-explain">
                                                Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/flash等各种Web技术记性产品的开发。
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <!--表格第二行-->
                            <tr class="row-bottom">
                                <td class="row-two-left" colspan="5">
                                    <div class="table-word1">门槛</div><img class="star" src="img/task8.3/star.png">
                                </td>
                                <td class="row-two-right" colspan="5">
                                    <div class="table-word1">难易程度 </div>
                                    <img class="star" src="img/task8.3/star.png">
                                    <img class="star" src="img/task8.3/star.png">
                                </td>
                            </tr>
                            <!-- 表格第三行 -->
                            <tr class="row-bottom">
                                <td class="row-two-left" colspan="5">
                                    <div class="table-word1">成长周期
                                        <div class="table-word2">1-3</div>
                                        <div class="table-word3">年</div>
                                    </div>
                                </td>
                                <td class="row-two-right" colspan="5">
                                    <div class="table-word1">稀缺程度  
                                        <div class="table-word2">345</div>
                                        <div class="table-word3">家公司需要</div>
                                    </div>
                                </td>
                            </tr>
                            <!-- 表格第四行 -->
                            <tr class="row-bottom">
                                <td rowspan="3" colspan="4" class="row-four-left">薪资待遇</td>
                                <td rowspan="1" colspan="6">
                                    <div class="row-four-right">
                                        <div>0-1年</div>
                                        <div>5k-10k/月</div>
                                    </div>
                                </td>
                            </tr>
                            <!-- 表格第五行 -->
                            <tr class="row-bottom">
                                <td  colspan="10">
                                    <div class="row-four-right">
                                        <div>0-1年</div>
                                        <div>5k-10k/月</div>
                                    </div>
                                </td>
                            </tr>
                            <!-- 表格第六行 -->
                            <tr class="row-bottom">
                                <td  colspan="10">
                                    <div class="row-four-right">
                                        <div>0-1年</div>
                                        <div>5k-10k/月</div>
                                    </div>
                                </td>
                            </tr>
                            <!-- 表格第七行 -->
                            <tr class="row-bottom">
                                <td colspan="10">
                                    <div class="row-seven-word">有<span class="row-seven-number">286</span>人正在学</div>
                                </td>
                            </tr>
                            <tr class="row-bottom">
                                <td colspan="10">
                                    <div class="row-ten-word">提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</div>
                                </td>
                            </tr>
                        </table>

angular-ui-sortable拖动排序的配置问题

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

1

如何用css做一个导航栏

0

1

属性属性表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

                        <button class="menu">
                            <div class="across"></div>
                            <div class="acr"></div>
                            <div class="across"></div>
                        </button>
    .menu {
        display: flex;
        flex-direction: column;
        border-style: none;
        outline: none;
        border-radius: 4px;
        margin-right: 1.8rem;
        padding: 5px;
        background-color: rgb(238, 235, 235);
    }
    .across {
        width: 13px;
        border-bottom: 2px solid rgb(158, 157, 157);
    }
    .acr {
        margin: 2px 0;
        width: 13px;
        border-bottom: 2px solid rgb(158, 157, 157);
    }
    .menu:hover .gps {
        display: block;
    }

任务十流程图中制作黄线圆角的时候中间出现空白。

0

1

属性属性 hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.process1,.process{
    display: inline-block;
    color: #cccccc;
    padding-top:38px;
    padding-bottom: 14px;
    text-align: center;
    font-size: 0;
    margin-left: -2px;
}

.process:hover .circle,.process:hover .line,.process:hover .line3{
    background-color:#ff7f02 ;
    z-index: 1;
}
.line{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.line3{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 1;
}
.process:hover  span{color:#ff7f02 ;}
.circle1,.circle{
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #cccccc;
    color: white;
    font-size: 16px;
}
.line1,.line2,.line3,.line{
    display: inline-block;
    width: 60px;
    height: 5px;
    background-color: #cccccc;
    font-size: 18px;
}
.line1{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.line2{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
    z-index: 1;
}
.line1,.line2,.circle1{
    background-color:#ff7f02 ;
}

任务13的侧边栏按钮如何做，代码更省更规范；

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

   <header class="header-box">

        <input type="checkbox" id="sidemenu">

        <aside class="g-position">
            <ul class="sideul">
                <li>
                    <img src="../image/side-icon.png">公告<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">设置<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">帮助<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">关于<img src="../image/side-back.png">
                </li>
            </ul>
        </aside>
        <label for='sidemenu'></label>
        <!-- 侧滑按钮图片 -->
        <img src="../image/侧滑.png" class="cehua-botton g-position">
    </header>

flex布局

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

align-center:stretch

label标签内添加button标签，点击label范围默认点击button

0

1

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<label for="nav" class="nav-btn">
                    <button>
                            <div></div>
                            <div></div>
                            <div></div>
                    </button>
                </label>

任务四中滑动条的问题

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.track {
    margin: 0 auto 10px;
    width: 95%;
    height: 60px;
    background: #ffffff; 
    .t-left {
        float: left;
        margin: 15px 0 0 2.5%;
        border-radius: 6px;
        width: 30px;
        height: 30px;
        font-size: 30px;
        text-align: center;
        line-height: 28px;
        color: #ffffff;
        background: #FBB435;
        cursor: pointer;
    }
    .t-right {
        @extend .t-left;
        float: right;
        margin: 15px 2.5% 0 0;
    }
}
.input1 {
    display: block;
    margin: 0 auto 10px;
    width: 80%;
    height: 60px;
    outline: none;
    -webkit-appearance: none; 
}
.input1::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px gray;
    background: -webkit-linear-gradient(right,#059CFA, #059CFA) no-repeat;
    background-size: calc(100% / 14 * 4) 100%;
}
.input1::-webkit-slider-thumb {
    margin-top: -11px;
    border-radius: 15px;
    width: 30px;
    height: 30px;
    background: url(../../img/skill.jpg) 0 0/30px 30px;
    -webkit-appearance: none;
}