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

input复选框，另作一行再制作后，没有相应的点击效果

0

1

input

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

HTML代码
 <div class="container">
            <div class="box-1">
                <input id="box1" type="radio" name="boxes">
                <label for="box1">对口箱</label>
                <input id="box2" type="radio" name="boxes">
                <label for="box2">飞机盒</label>
                <input id="box3" type="radio" name="boxes">
                <label for="box3">天地盖</label>
                <div class="dropdown box-2">
                    <button class="btn btn-default dropdown-tggle" type="button" id="menu1" data-toggle="dropdown" aria-expanded="false">
                        参看详情
                        <div class="box-3">
                            <span class="box-4"></span>
                        </div>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li>
                            <a href="#">详情1</a>
                        </li>
                        <li role="presentation" class="bottom"></li>
                        <li>
                            <a href="#">详情2</a>
                        </li>
                        <li role="presentation" class="bottom"></li>
                        <li>
                            <a href="#">详情3</a>
                        </li>
                        <li role="presentation" class="bottom"></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container win">
            <div class="box">
                <div class="bg-2"></div>确定尺寸
            </div>
        </div>
        <div class="container">
            <div class="box-5">.
                <input id="box2" type="radio" name="boxes-2">
                <label for="box2">外径</label>
                <input id="box2" type="radio" name="boxes-2">
                <label for="box2">内径</label>
            </div>
        </div>

css代码
.box-1 {
    display: inline-block;
    padding: 2.3rem 1.8rem 2.3rem 4.5rem;
    width: 100%;
    text-align: left;
    background-color: #fbfcff;
    border: 1px solid #e8e8e8;
}

input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label {
    float: left;
    margin-top: .5rem;
    margin-right: 6rem;
    font-weight: 400;
    font-size: 1.8rem;
    color: #666;
    cursor: pointer;
}

input[type="radio"] + label::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-top: -.3rem;
    margin-right: 1.6rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid #d6d6d6;
    background-color: #f8f9fb;
}

input[type="radio"]:checked + label::before {
    border: 8px solid #1d7ad9;
    background-color: #fff;
}

.box-2 {
    float: right;
    width: 13.5rem;
    height: 3.7rem;
}

.box-2 > button {
    padding: .5rem 0 .5rem 1.5rem;
    border-radius: 0;
    width: 100%;
    height: 100%;
    font-size: 1.4rem;
    line-height: 2.5rem;
    color: #999;
}

.box-3 {
    display:inline-block;
    margin-left: 1.5rem;
    width: 2.5rem;
    height: 100%;
    vertical-align: middle;
    background-color: #1d7ad9;
    color: #fff;
}

.box-4 {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: .4rem solid;
    border-left: .4rem solid transparent;
    border-right: .4rem solid transparent;
}

.dropdown-menmu > li >a {
    display: block;
    padding: .6rem 3rem;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.win {
    margin-top: -.5rem;
}

.bg-2 {
    display: inline-block;
    margin-left: -2.9rem;
    margin-right: 1rem;
    width: 2.2rem;
    height: 2rem;
    background: url(./images/4.png) -2rem -7.5rem;
}

.box-5 {
    display: inline-block;
    padding: 2.3rem 1.8rem 2.3rem 4.5rem;
    width: 100%;
    text-align: left;
    background-color: #fbfcff;
    border: 1px solid #e8e8e8;
}

怎么使导航悬停2个字变成4个字的同时下边框出现在底部

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="task8-2.css">
</head>

<body>
    <header class=" container none">
        <div class="d-flex justify-content-between align-items-center padding-lf-1rem">
            <span class="color-main font-size-14">
                客服热线：010-594-78634
            </span>
            <div>
                <i class="samll-icon nav-icon-1"></i>
                <i class="samll-icon nav-icon-2"></i>
                <i class="samll-icon nav-icon-3"></i>
            </div>
        </div>
    </header>
    <nav class="bg-main" >
        <div class="container">
            <div class="navbar navbar-expand-lg nav-height navbar-dark" >
                <a class="navbar-brand" href="#"><img src="img/home-logo.png" class="nav-logo"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active" style="display: flex;align-items: center;">
                            <p class="wwwww"></p>
                            <a class="nav-link font-size-18 nav-link-width" href="#">首页机缘</a>
                            
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link font-size-18 nav-link-width" href="#">职业咨询</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link font-size-18 nav-link-width" href="#">合作企业</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link font-size-18 nav-link-width" href="#">关于修真</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</body>

</html>

.nav-link-width {
  width: 37px;
  height: 21px;
  line-height: 21px;
  overflow: hidden;
  padding: 0 !important;
  text-overflow: ellipsis;
  display: inline-block;
  margin-left: 2rem !important;
}
.nav-height {
  height: 100px;
}
.nav-item:hover .nav-link-width {
  width: 75px;
  margin-left: 2rem !important;

  border-bottom: 2px solid #fff;
}

webstorm里面检测不到git

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

为什么表格给予宽度10%会有100%的效果

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

height: 40px;
    width:10%;
   padding-left: 18px;

下拉菜单出不来

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

main {
    background-color: #fafafa;
}

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

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

底部的按钮不能随着屏幕同步缩放

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    <footer>
        <div class="end">
             <button class="stay">留言</button>
             <button class="coll">电话联系</button>
        </div>
    </footer>

.end{
    display:flex;
    justify-content:space-around; 
    position:fixed;
    bottom: 5px;
}
.stay {
    background-color: #ffffff;    
    color: #66cccc;
    padding: 8px 50px 8px 50px;
    margin: 0 5px 2px 12px;
    border-radius: 0.5rem;
    border-color: #66cccc;
}
.coll {
    background-color: #66cccc;    
    color: #ffffff;
    padding: 8px 48px 8px 48px;
    margin: 0  12px 2px 12px;
    border-radius: 0.5rem;
    border-color: #66cccc;
}

除了弄个盒子加margin-left设置底边框做成这样的样式还有其他方法吗。

0

1

背景图片属性边距定位属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.home {
    width: calc(100% - 1.65rem);
    height: 5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 1.65rem;
    border-bottom: 1px solid #e1e5e7;
}

父元素使用伪类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);
}