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

select 旁边小图标点击无效，不能使用lable解决

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <div class="Selectionlr"   >
     <form  action="">
      <i class="icon8 "></i>
        <select>
        <option selected>所在地</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
             </select>
             
     </form>  
    </div>

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

在flex布局中，text-overflow：ellipsis不生效的问题

1

flex 页面显示

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css代码
.txt2{
    width: 50%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-bottom: 1.3rem;
    margin-top: 1.3rem;
    font-size: 1.4rem;
}
.listtxt{
    position: relative;
    display: flex;
    padding-left: 1.5rem;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: end;
    width: 100%;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #e1e5e7
}
html代码
<div class="listtxt">
<div class="txt2">
        <p>2015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-12</p>
    </div>
</div>

怎么让元素具有点击后出现hover的效果

2

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.lump a:hover {
    text-decoration: none;
    color: #ff6d1b;
}
.lump a:hover .circle-left {
    background: #ff6d1b;
}

bootstrap,导航栏组的颜色怎么更改?

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <!--nav-->
        <div class="container-fluid  nav-container">
            <div class="row">
                <div class="col-sm-8 offset-sm-2">
                    <nav class="navbar navbar-expand-sm navbar-dark" style="padding:0">
                        <a class="navbar-brand" href="#">
                         <img style="width:20rem" src="home-logo-hs.png" />
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#collapsiblejnshu">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="collapsiblejnshu">
                            <ul class="navbar-nav justify-content-end" style="width:100%">
                                <!--链接组(导航组)-->
                                <li class="nav-item">

                                    <a class="nav-link nav-a" href="task8-1.html">首页 </a>
                                    <div class="nav-li"></div>

                                    <!--链接-->
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link nav-a" href="../task8.1.3/task8-3.html">职业</a>
                                    <div class="nav-li"></div>
                                    <!--链接-->
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link nav-a" href="../task8.1.3/task8-3.html">推荐</a>
                                    <div class="nav-li"></div>
                                    <!--链接-->
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link nav-a" href="../task8.1.2/task8-2.html">关于</a>
                                    <div class="nav-li"></div>
                                    <!--链接-->
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
/*nav样式*/
.nav-container {
    background-color: rgb(41, 176, 120);
    color: white;
}

.nav-a {
    font-size: 1.7rem;
    padding: 20px 0 20px 10px;

}

.nav-item:hover .nav-li {
    visibility: visible;
}

.nav-li {
    visibility: hidden;
    border-bottom: 1px solid white;

}

关于按钮的hover和focus状态

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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <link rel="stylesheet" href="./css/clearStyle.css">
	<title>demo</title>
	<style>
		nav.navbar { 
			min-height: 59px;
			background-color: #29b078;
		}
		button.navbar-toggle {
			margin-top: 10px;
			margin-bottom: 10px;
			border: none;
			background-color: #47D096;
		}
		.navbar-default .navbar-toggle:hover { background-color: #218C60; }
		.navbar-default .navbar-toggle:focus { background-color: #47D096; }
		.navbar-collapse {
			width: 100%;
			padding: 0;
			border: none;
		}
		.navbar-collapse ul.navbar-nav { margin: 0; }
		.navbar-collapse ul.navbar-nav li a {
			height: 40px;
			width: 100%;
			display: flex;
			color: #fff;
			font-size: 16px;
			border: none;
			background-color: #29b078;
		}
	</style>
</head>
<body>
	</header>
	<div class="navigate">
		<nav class="navbar navbar-default" role="navigation"> 
		    <div class="navbar-header">
		        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
		            <span class="sr-only">展开导航</span>
		            <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/skill_html/images/menu.png"> 
		        </button>
		        <a class="navbar-brand" href="http://www.jnshu.com/"><div class="logo"></div></a>
		    </div>
		    <div class="collapse navbar-collapse" id="menu">
		        <ul class="nav navbar-nav">
		            <li class="active"><a href="#">首页</a></li>
		            <li><a href="#">职业</a></li>
		            <li><a href="#">推荐</a></li>
		            <li><a href="#">关于</a></li>
		        </ul>
		    </div>
		</nav>
	</div>
</body>
</html>

bootstrap框架的结构需要怎么放才好。

0

1

媒体查询

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="container">
      <div class="youxiu">优秀学员展示</div>
      <div class="row">
        <div class="col-lg-3 col-md-6  col-12  ">
          <div class="yxbox">
            <img src="../image/学员展示/1.png" class="xyimg">
            <span>发型顾问：汤小尼</span>
            <p>百度技术总监：互联网基础
              服务领域，从事虚拟主机、
              云服务器、域名。曾任新网
              高级技术经理，负责技术研
              发、团队管理与建设。</p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6  col-12  ">
          <div class="yxbox1 ">
            <img src="../image/学员展示/1.png" class="xyimg">
            <span>发型顾问：汤小尼</span>
            <p>百度技术总监：互联网基础
              服务领域，从事虚拟主机、
              云服务器、域名。曾任新网
              高级技术经理，负责技术研
              发、团队管理与建设。</p>
          </div>
        </div>

如何上下对齐

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.partner{
    padding-top: 20px;
    /*box-shadow: 1px 1px 1px lightgrey;*/
    width: 1200px;
    margin: 0 auto;
}
.partner1{
    text-align: center;
    padding-bottom: 20px;
}

.logo1 {
    display: inline-block;
    width: 18%;
}
.logo1 img{
    /*margin: auto 20px;*/
    width: 100%;
    height: 150px;
}
ul{
    padding:0;
}

链接跳转问题；做九宫格的时候，为什么会用到字体尺寸

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<style type="text/css">
        *{padding: 0;margin: 0;}
        ul{
         font-size: 0;
        }
        li{
            background: yellow;
            width: 31.3%;
            padding-bottom: 31.3%;
            border-radius: 10%;
            margin: 1%;
            list-style-type: none;
            display: inline-block;
        }
    </style>

如何修改radio单选按钮的样式

1

radio

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body{
      max-width: 1200px;
      margin: 20px auto;
    }
    [type="radio"]{
      border: 0;
      background: white;
    }
  </style>
</head>
<body>
  <input type="radio" name="1">选项一
  <br>
  <input type="radio" name="1">选项二
</body>
</html>