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

父元素使用伪类hover时出现了子元素出现同样效果的问题

0

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

           <div class="col-xs-12  col-sm-12 col-md-5 main4-box">
                <div class="main4-icobox">
                    <div class="main4-ico1 main4-clearhover"></div>
                </div>
            </div>
.main4-box :hover {
    box-shadow: 0 0 1px #9E9E9E;
}

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

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

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

轮播图能否不使用绝对定位

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.frame{
    box-sizing: border-box;
    position: fixed;
    overflow:hidden; 
    padding-bottom: 30%;
    min-width: 100%;
    .photos {  
        position: absolute;
        width: 100%;
        overflow: hidden;
        .roll { 
            float: left;
            width: 100%;
        }
        .boil {
            background: url(./images/Image.png) no-repeat;
            background-size:100% 100%;
        }
        .boil-one {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tow {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tir {
            animation: myfirst 10s ease  infinite normal;
        }
        @keyframes myfirst {
            30%,50% {margin-left: -100%;}
            55%,75% {margin-left: -200%;}
            80%,100% {margin-left: -300%;}
        }
    }    
}

怎么引用公共less文件，

1

Less

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@fullwidth:100%;
@fullheight:100%;
@bg-content:#fafafa;
@base:#29b078;
@font-size:14px;
@color:#bfbfbf;
@body:{margin:0;padding:0}
@p:{margin:0;padding:0}

怎样让轮播图下面的小圆点，当点击的时候切换到另一张图片时背景颜色能变成白色？

0

1

表单元素轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css：
/*轮播图*/
.carousel{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-open:checked + .carousel-item {
  position: relative;
  opacity: 1;
}
.carousel-item {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}
.carousel-control.prev {
  left: 2%;
}
.carousel-control.next {
  right: 2%;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3,
#carousel-4:checked ~ .control-4,
#carousel-5:checked ~ .control-5{display: block}
.carousel-item img {
  display: block;
  height: auto;
  max-width: 100%;}
.instructions{
  position: absolute;
  margin:0 auto;
  bottom: 10px;
  left: 0;
  right: 0;
  width: 90px;
  li{display: inline-block}
}
.bullet{display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  cursor: pointer;
  background-color: rgba(0,0,0,0);
  border: 1px solid #fff;
  border-radius: 10px;}

html：   <div class="carousel">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="../image/2.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/3.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/4.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-4" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/5.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-5" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/6.jpg">
        </div>
        <label for="carousel-5" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-4" class="carousel-control next control-3">›</label>
        <label for="carousel-3" class="carousel-control prev control-4">‹</label>
        <label for="carousel-5" class="carousel-control next control-4">›</label>
        <label for="carousel-4" class="carousel-control prev control-5">‹</label>
        <label for="carousel-1" class="carousel-control next control-5">›</label>
        <ol class="instructions">
            <li>
                <label for="carousel-1" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-2" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-3" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-4" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-5" class="bullet"></label>
            </li>
        </ol>
    </div>

横向的元素在纵向排列的时候，怎么保证居中

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 col-han">
            <div>
                <img src="media/rocket.png">
            </div>
            <h4>高效</h4>
            <p class="col-p">将五到七年的成长时间，缩短到一年到三年。</p>
        </div>
        <div class="col-xs-12 col-sm-3 col-han">
            <div>
                <img src="media/archive.png">
            </div>
            <h4>规范</h4>
            <p class="col-p">标准的实战教程，不会走弯路。</p>
        </div>
        <div class="col-xs-12 col-sm-3 col-han">
            <div>
                <img src="media/Shape-253.png">
            </div>
            <h4>人脉</h4>
            <p class="col-p">同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
        </div>

不能完美实现正方形

2

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
	height: 100%;
	margin: 0;
	display: block;
	text-align: center;
}
html{
	
	height: 100%;
}
.hezi1{
	width: 30%;
	height: 30%;
	margin: 1%;
	border-radius: 15%;
	background-color: yellow;
	float: left;
}

怎么改变botstrap的自带样式

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.logo img >.navbar-brand {
    position: relative;
    left: -73vh;
    width: 90px;
    height: 40px;
}

页面适配中单位的使用

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

:root {
    font-size: 20px;
}