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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

如何用纯CSS制作轮播图，不能使用框架

2

2

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css

该问题已被官方收录

gulp4打包出现问题，

0

2

打包工具

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/combined-98d825ae5e.css">
   
    <script src="scripts/combined-ddab469f1a.js"></script>

该问题已被官方收录

有没有更方便的轮播图实现方案？

1

2

轮播

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

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

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>

该问题已被官方收录

用hover实现折叠菜单

0

1

hover

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>
    /* nav */
ul,li{
    list-style: none;
}
.xiuzhenyuan{
    display: inline-block;
}    
.nav {
    position: relative;
    margin: 20px 0;
}
.menu{
    display: inline-block;
    position: absolute;
    right: 0px;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    margin: 0 5px 10px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.nav a {
    padding: 3px 12px;
    text-decoration: none;
    color: #999;
    line-height: 100%;
}
.nav a:hover {
    color: #000;
}

button div{
    width: 15px;
    height: 2px;
    background: gray;
    margin-bottom: 1px;

}
button{
    display: none;
}
.collapsed-menu{
        display: none;
    }


/* <!-- 媒体查询 --> */
@media screen and (max-width: 768px) {
    
    button{
        display: block;
        display: inline-block;
        position: absolute;
        right: 0;
    }

    button:hover.collapsed-menu{
        display: block;
    }

    .menu{
        display: none;
    }
    
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }
} 

.collapsed-menu li{
    color: gray;
    padding: 5px 0;
}

.collapsed-menu{
    width: 100px;
    height: 150px;
    border: 1px solid #dedede;
    border-radius: 10px;
    position: absolute;
    right: 0;
}


</style>



</head>
<body>
    
<nav class="nav">
<div class="xiuzhenyuan">修真院|技能树</div>

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

<ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">职业</a></li>
    <li><a href="#">推荐</a></li>
    <li><a href="#">关于</a></li>
</ul>
</nav>

<ul class="collapsed-menu">
    <li>首页</li>
    <li>职业</li>
    <li>推荐</li>
    <li>关于</li>
</ul>



</body>
</html>

该问题已被官方收录

能不能利用纯css自动轮播和点击轮换效果同时出现

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<section class="slider-contaner">
    <div class="banner-arrow">
        <a href="#a01" class="banner-left"></a>
        <a href="#" class="banner-right"></a>
    </div>
    <ul class="slider">
        <li id="a01" class="slider-item slider-item1"></li>
        <li class="slider-item slider-item2"></li>
        <li class="slider-item slider-item3"></li>
        <li class="slider-item slider-item4"></li>
        <li class="slider-item slider-item5"></li>
    </ul>
    <div class="focus-container">
        <ul class="floatfix">
            <li><div class="focus-item focus-item1"></div></li>
            <li><div class="focus-item focus-item2"></div></li>
            <li><div class="focus-item focus-item3"></div></li>
            <li><div class="focus-item focus-item4"></div></li>
            <li><div class="focus-item focus-item5"></div></li>
        </ul>
    </div>
</section>

/*css reset end*/

/*github展示统一样式start*/
a {
    text-decoration: none;
    color: #fff;
}
/*css public start*/
.floatfix {
    *zoom: 1;
}
.floatfix:after {
    content: "";
    display: table;
    clear: both;
}

/*css public end*/

/*slider start*/
.slider-contaner {
    width: 100%;
    position: relative;
}
.slider-item + .slider-item {
    opacity: 0;
}
.slider-item {
    width: 100%;
    position: absolute;
    animation-timing-function: linear;
    animation-name: fade;
    animation-iteration-count: infinite;
    background-size: 100%;
}
.focus-container {
    position: absolute;
    z-index: 7;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.focus-container li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    background: #fff;
}
.focus-item {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    animation-timing-function: linear;
    animation-name: fade;
    animation-iteration-count: infinite;
}
.focus-item2, .focus-item3, .focus-item4, .focus-item5 {
    opacity: 0;
}
.focus-container ul {
    margin-left: 46%;
}

/*设置轮播焦点的位置*/
.focus-container {
    bottom: 2%;
}

/*设置当前图片焦点的颜色*/
.focus-item {
    background: #51B1D9;
}

/*设置动画，请根据实际需要修改秒数*/
.slider-item, .focus-item {
    animation-duration: 20s;
}
.slider-item1, .focus-item1 {
    animation-delay: -1s;
}
.slider-item2, .focus-item2 {
    animation-delay: 3s;
}
.slider-item3, .focus-item3 {
    animation-delay: 7s;
}
.slider-item4, .focus-item4 {
    animation-delay: 11s;
}
.slider-item5, .focus-item5 {
    animation-delay: 15s;
}
@keyframes fade {
    0% {
        opacity: 0;
        z-index: 2;
    }
    5% {
        opacity: 1;
        z-index: 1;
    }
    20% {
        opacity: 1;
        z-index: 1;
    }
    25% {
        opacity: 0;
        z-index: 0;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}

/*设置背景，响应式请利用媒体查询根据断点修改路径*/
.slider-item1 {
    background-image: url(backimage1.png);
}
.slider-item2 {
    background-image: url(backimage2.png);
}
.slider-item3 {
    background-image: url(backimage1.png);
}
.slider-item4 {
    background-image: url(backimage2.png);
}
.slider-item5 {
    background-image: url(backimage1.png);
}

/*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
.slider, .slider-item {
    padding-bottom: 30%;
}

该问题已被官方收录

表格的边框显示不出来

0

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@charset"UTF-8";
@import"_layout";
// job主体
main.job {
    .home-box {
        padding: .31rem 0;
        border-bottom: $main-border;
        .black-font {
            font-size: .16rem;
            color: $black;
        }
        .green-font {
            font-size: .16rem;
            color: $green;
        }
    }
    .direction-box {
        padding: .23rem 0;
        border-bottom: $main-border;
        .direction {
            line-height: .14rem;
            font-size: .14rem;
            color: $text;
        }
        .option-box {
            margin: 0;
            padding: 0;
            .option {
                line-height: .14rem;
                font-size: .14rem;
                color: $black;
                &:hover {
                    background: $green;
                    color: $white;
                }
            }
        }
    }
    @media(max-width:575px) {
        .center {
            line-height: .6rem;
            text-align: center;
        }
    }
    .headline-box {
        padding: .31rem 0;
        border-bottom: $main-border;
        font-size: .16rem;
        color: $black;
    }
    .intro-box {
        position: relative;
        margin-top: .47rem;
        perspective: 1000;
        transform-style: preserve-3d;
        .shade {
            visibility: hidden;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 2.8rem .93rem 1.76rem .82rem;
            background: rgba(8, 1, 3, 0.6);
            font-size: .16rem;
            color: $white;
            transition: 0.6s;
            transform-style: preserve-3d;
        }
        &:hover .shade {
            visibility: visible;
            transform: rotateY(360deg);
        }
        th.width1 {
            width: 40%;
        }
        th.width2 {
            width: 10%;
        }
        th.width3 {
            width: 50%;
        }
        tr.box {
            border: $main-border;

            .picture {
                margin: .2rem .08rem .16rem .11rem;
            }
            @media(max-width:375px) {
                .picture {
                    @include box(1.85rem, 1.85rem);
                    margin: .2rem .08rem .16rem .3rem;
                }
            }
            @media(min-width:376px) and (max-width:470px) {
                .picture {
                    @include box(2.1rem, 2.1rem);
                    margin: .2rem .08rem .16rem .5rem;
                }
            }
            @media(min-width:490px) and (max-width:767px) {
                .picture {
                    margin: .2rem .08rem .16rem .6rem;
                }
            }
            strong.font {
                font-size: .16rem;
                color: $black;
            }
            p.font {
                margin: .16rem .09rem 0 0;
                font-size: .14rem;
                color: $black;
            }
        }
        .standard-font{
            padding: .28rem  .1rem;
            font-size: .12rem;
            color: $text;
            border: $main-border;

            .wjx::after{
                display: inline-block;
                content:"";
                @include box(.16rem,.16rem);
                margin-left:.24rem;
                background: url(../picture/task-css14.png) no-repeat 0 -2.66rem;
            }
            .wjx2::before{
                display: inline-block;
                position: absolute;
                content:"";
                @include box(.16rem,.16rem);
                margin: .12rem 0 0 1.48rem;
                background: url(../picture/task-css14.png) no-repeat 0 -2.66rem;
            }
            .red{
                font-size: .12rem;
                color: #F01400;
            }
            .black{
                font-size: .12rem;
                color: $black;
            }
            .center{
                display:block;
                text-align: center;
            }
            .left{
                margin-left: .24rem;
            }
            .right-txet{
                float: right;
            }
        }
    }
    @media (min-width:767px) and (max-width: 991px){
        .col-sm-6 {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
    @media(max-width:767px){
        .col-12{
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
}

该问题已被官方收录

在使用css模拟轮播图的时候如何实现点击效果与animation效果共存？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.loop-wrap {
    position: relative;
    width: 100%;
  
    overflow: hidden;
    .loop-images-container {
        
        width: 300vw;
        /* 横向排列 3张图片 宽度应为主容器3倍 */
        font-size: 0;
        transform: translate(0, 0);
        /* 初始位置位移 */
        animation: loop 10s linear infinite;
        .loop-image {
            width: 100vw;
            
        }
    }
    .focus-container {
        @include flex-center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5%;
            li {
                float: left;
                width: .1rem;
                height: .1rem;
                border-radius: 50%;
                margin: 0 .05rem;
                border: 1px solid #fff;
            }
        
    }
}

@keyframes loop {
    0% {
        transform: translate(0, 0);
    }
    30% {
        transform: translate(0, 0);
    }
    /* 停留1500ms */
    35% {
        transform: translate(-33.3%, 0);
    }
    /* 切换500ms 位移-20% */
    60% {
        transform: translate(-33.3%, 0);
    }
    65% {
        transform: translate(-66.6%, 0);
    }
    95% {
        transform: translate(-66.6%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
    /* 复位到第一张图片 */
}

该问题已被官方收录

如何让胶囊式导航栏实现下拉的动画效果

0

1

css动画导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  .nvb-ul {
    display: none;
    text-align: center;
    width: 100%;
    padding: 0;
    height: auto;
    transition: display .5s ease;//这里是报错的
  }
  .nvb-li {
    background-color: #29b078;
    line-height: 3rem;
    border-bottom: none!important;
    overflow-x: hidden;
    width: 100%;
    &:first-child {
      border-top: .1rem solid #fff;
    }
  }
}
#menu:checked~ .nvb-ul {
  display: block;
}

去第页

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