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

轮播图的最后一张图切换到第一张图

0

2

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

annimation

margin： auto为什么只能水平居中，不能垂直居中

1

2

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div {
            margin: auto;
            width: 200px;
            height: 200px;
            background: black;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

css实现轮播图左右自然切换

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    .carouse-pic {
        width: 500vw;
        height: 30vw;
        overflow: hidden;
        animation: carouse 20s infinite linear;

        @keyframes carouse {
            0%,15% {margin-left: 0;}
            25%,40% {margin-left: -100vw;}
            50%,65% {margin-left: -200vw;}
            75%,90% {margin-left: -300vw;}
            100% {margin-left: -400vw;}
        }
}

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

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

1

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"> 代码

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

代码修改不知道如何修改

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

https://danji521.github.io/task14-15aac/index.html

如何用CSS实现响应式导航栏

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, "Times New Roman", "Microsoft YaHei", SimSun, SimHei;
}


main {
    background-color: #fafafa;
}

   /* height: 50px;   神坑定高！下拉出不来   */
header {
}

.head-top {
    display: flex;
    justify-content: space-between;
}

/*客服热线*/
.tel {
    margin-top: 0.5%;
    margin-left: 2%;
    margin-top: 3px;
    font-size: 12px;
    color: #29B078;
}

/*微信微博qq图标*/
.head-img {
    margin-right: 2%;
}


.head-img img {
    width: 20px;
    margin-left: 8px;
}


/*加跳转链接*/
.head-text a {
    text-decoration: none;
    color: #ffffff;
}


.carousel-caption .text-4 a {
    text-decoration: none;
    color: #ffffff;
}


.navbar-nav .nav-item .nav-link {
    padding: 15px;
    border: 1px solid #26a26f;
}


.navbar-nav .nav-item .nav-link:hover {
    border-bottom: 1px solid white;
}



/*下面是轮播图的Boot4组件*/

/*这个类，组件里自带了absolute，我这里修改的是文字上移的位置*/
.carousel-caption {
    bottom: 32% !important;
}

/* Make the image fully responsive 让图片全屏展示*/
.carousel-inner img {
    width: 100%;
    height: 100%;
}

.carousel-inner .text {
    text-align: center;
    font-weight: bold;
    font-size: 2.5vw;
    color: #ffffff;
}

.carousel-inner .text-2 {
    text-align: center;
    font-weight: bold;
    font-size: 3vw;
    letter-spacing: 2px;
    color: #ffffff;
}

.carousel-inner .text-2 span {
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #ffffff;
}


.carousel-inner .text-3 {
    text-align: center;
    font-weight: bold;
    font-size: 6.5vw;
    font-family: MicrosoftJhengHei;
    color: #ffffff;
}


.carousel-inner .text-4 {
    text-align: center;
    font-size: 5.5vw;
    font-family: MicrosoftJhengHei;
    letter-spacing: 2px;
    color: #ffffff;
}



.container.intro {
    margin-bottom: 120px;
}


h3 {
    padding-bottom: 35px;
    text-align: center;
}

.link-h {
    padding-bottom: 5px;
    text-align: center;
}


main .row {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
}


.container.intro .col-lg-3.col-md-6 {
    display: flex;
    flex-direction: column;
    justify-items: center;
    padding: 29px;
}


.container.intro .col-lg-3.col-md-6.adjust {
    display: flex;
    flex-direction: column;
    justify-items: center;
    padding-left: 80px;
    border-left: 1px solid rgba(128, 128, 128, 0.15);
}


.container.intro .col-lg-3.col-md-6:hover {
    box-shadow: 1px 1px 2px 1px rgba(128, 128, 128, 0.15);
}


.container.intro .col-lg-3.col-md-6.adjust:hover {
    box-shadow: 1px 1px 2px 1px rgba(128, 128, 128, 0.15);
}


.container.intro .pic {
    text-align: center;
}


.container.intro .pic-2 {
    /* margin-top: 25px; */
    text-align: center;
}


.container.intro .pic-3 {
    margin-top: 15px;
    text-align: center;
}


.container.intro .count-people-adjust {
    margin-top: 40px;
}


.container.intro .pic img {
    width: 40px;
}

.container.intro .pic-2 img {
    width: 40px;
}


.container.intro .pic-3 img {
    width: 40px;
}

任务15的代码规范有哪几种，哪些会好用通俗一点

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 重置 */
div,p,ul,ol,li{margin:0;padding:0;}
/* 默认 */
strong,em{font-style:normal;font-weight:bold;}
/* 统一调用背景图 */
.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
/* 统一清除浮动 */
.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}
.g-bdc,.m-dimg ul,.u-tab{zoom:1;}
/* 布局 */
.g-sd{float:left;width:300px;}
/* 模块 */
.m-logo{width:200px;height:50px;}
/* 元件 */
.u-btn{height:20px;border:1px solid #333;}
/* 功能 */
.f-tac{text-align:center;}
/* 皮肤 */
.s-fc,a.s-fc:hover{color:#fff;}

CSS实现手动轮播+自动轮播，但是焦点无法跟随图片

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<input type="radio" name="rdo" class="rdo" id="rdo1" checked>
    <input type="radio" name="rdo" class="rdo" id="rdo2">
    <input type="radio" name="rdo" class="rdo" id="rdo3">
    <input type="radio" name="rdo" class="rdo" id="rdo4">
    <input type="radio" name="rdo" class="rdo" id="rdo5">
    <div class="lunbo">
        <ul class="list li-float clearfix">
            <li class="item">
                <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg">
            </li>
            <li class="item">
                <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/bedeaa60-ae9b-4e50-93b2-2c4182ad8c70.jpg">
            </li>
            <li class="item">
                <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/3a15425b-c947-4222-8558-0bf01cc36513.png">
            </li>
            <li class="item">
                <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/0d9944f1-6aad-4894-b42e-72dadcfef058.png">
            </li>
            <li class="item">
                <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/ddc121d2-b7ef-4d8e-812a-af9c6caef0d2.jpg">
            </li>
            <li class="item">
                <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg">
            </li>
        </ul>
        <ul class="dots li-float">
            <li><label for="rdo1" class="btn1"></label></li>
            <li><label for="rdo2" class="btn2"></label></li>
            <li><label for="rdo3" class="btn3"></label></li>
            <li><label for="rdo4" class="btn4"></label></li>
            <li><label for="rdo5" class="btn5"></label></li>
        </ul>
    </div>

.rdo{
    width: 0;
    height: 0;
    position: fixed;
}
.lunbo{
position: relative;
width: 100%;
margin: 30px auto;
background-color: #5ac0ce;
}
.dots{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}
.dots li label{
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 5px;
}


.lunbo{
    overflow: hidden;
}
.list{
    display: flex;
    flex-wrap: nowrap;
    font-size: 0;
    animation: move 10s ease;
    animation-iteration-count: infinite;
}
/*hover暂停*/
.list:hover {
    animation-play-state:paused;
    cursor:pointer;
}
.item{
    flex: none;
    width: 100%;
}
.item img{
    width: 100%;
}


/*按钮颜色*/
#rdo1:checked ~ .lunbo .btn1{
    background-color: #ace;
}
#rdo2:checked ~ .lunbo .btn2{
    background-color: #ace;
}
#rdo3:checked ~ .lunbo .btn3{
    background-color: #ace;
}
#rdo4:checked ~ .lunbo .btn4{
    background-color: #ace;
}
#rdo5:checked ~ .lunbo .btn5{
    background-color: #ace;
}

/* ------------- 动画效果 --------------*/
@keyframes move1 {
    0%{transform: translateX(0);}
    15%{transform: translateX(0);}
    20%{transform: translateX(-100%);}
    35%{transform: translateX(-100%);}
    40%{transform: translateX(-200%);}
    55%{transform: translateX(-200%);}
    60%{transform: translateX(-300%);}
    75%{transform: translateX(-300%);}
    80%{transform: translateX(-400%);}
    95%{transform: translateX(-400%);}
    100%{transform: translateX(-500%);}
}
@keyframes move2 {
    0%{transform: translateX(-100%);}
    15%{transform: translateX(-100%);}
    20%{transform: translateX(-200%);}
    35%{transform: translateX(-200%);}
    40%{transform: translateX(-300%);}
    55%{transform: translateX(-300%);}
    60%{transform: translateX(-400%);}
    75%{transform: translateX(-400%);}
    80%{transform: translateX(0);}
    95%{transform: translateX(0);}
    100%{transform: translateX(-100%);}
}
@keyframes move3 {
    0%{transform: translateX(-200%);}
    15%{transform: translateX(-200%);}
    20%{transform: translateX(-300%);}
    35%{transform: translateX(-300%);}
    40%{transform: translateX(-400%);}
    55%{transform: translateX(-400%);}
    60%{transform: translateX(0);}
    75%{transform: translateX(0);}
    80%{transform: translateX(-100%);}
    95%{transform: translateX(-100%);}
    100%{transform: translateX(-200%);}
}
@keyframes move4 {
    0%{transform: translateX(-300%);}
    15%{transform: translateX(-300%);}
    20%{transform: translateX(-400%);}
    35%{transform: translateX(-400%);}
    40%{transform: translateX(0);}
    55%{transform: translateX(0);}
    60%{transform: translateX(-100%);}
    75%{transform: translateX(-100%);}
    80%{transform: translateX(-200%);}
    95%{transform: translateX(-200%);}
    100%{transform: translateX(-300%);}
}
@keyframes move5 {
    0%{transform: translateX(-400%);}
    15%{transform: translateX(-400%);}
    20%{transform: translateX(0);}
    35%{transform: translateX(0);}
    40%{transform: translateX(-100%);}
    55%{transform: translateX(-100%);}
    60%{transform: translateX(-200%);}
    75%{transform: translateX(-200%);}
    80%{transform: translateX(-300%);}
    95%{transform: translateX(-300%);}
    100%{transform: translateX(-400%);}
}

/*修改动画名称*/
#rdo1:checked ~ .lunbo .list {
    animation-name:move1;
}

#rdo2:checked ~ .lunbo .list {
    animation-name:move2;
}

#rdo3:checked ~ .lunbo .list {
    animation-name:move3;
}
#rdo4:checked ~ .lunbo .list {
    animation-name:move4;
}
#rdo5:checked ~ .lunbo .list {
    animation-name:move5;
}
/*短暂地取消动画名称，模拟重启动画*/
#rdo1:active ~ .lunbo .list {
    -webkit-animation-name:none;
    transform: translateX(0);
}

#rdo2:active ~ .lunbo .list {
    -webkit-animation-name:none;
    transform: translateX(-800px);
}

#rdo3:active ~ .lunbo .list {
    -webkit-animation-name:none;
    transform: translateX(-1600px);
}
#rdo4:active ~ .lunbo .list {
    -webkit-animation-name:none;
    transform: translateX(-2400px);
}
#rdo5:active ~ .lunbo .list {
    -webkit-animation-name:none;
    transform: translateX(-3200px);
}