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

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

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

table td宽度问题

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

                    <table>
                        <tr>
                            <td colspan="4" rowspan="2">
                                <div class="table-image1"></div>
                            </td>
                            <td colspan="6" class="border1">Web前端工程师</td>
                        </tr>
                        <tr>
                            <td colspan="6"  class="border1-1">Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</td>
                        </tr>
                        <tr >
                            <td colspan="5" class="border2"> 门槛<div class="table-image2"></div></td>
                            <td colspan="5" class="border2"> 难易程度</td>
                        </tr>
                        <tr>
                            <td colspan="5"  class="border2"> 成长周期</td>
                            <td colspan="5"  class="border2"> 稀缺程度</td>
                        </tr>
                        <tr >
                            <td colspan="4" rowspan="3"   class="border3-1"> 薪资待遇</td>
                            <td colspan="6" class="border3-2"> 稀缺程度</td>
                        </tr>
                        <tr>
                            <td  colspan="6" class="border3-2"> 稀缺程度</td>
                        </tr>
                        <tr>
                            <td  colspan="6" class="border3-2"> 稀缺程度</td>
                        </tr>

                        <tr>
                            <td  colspan="10" class="border4"> 稀缺程度</td>
                        </tr>
                        <tr>
                            <td  colspan="10" class="border5"> 稀缺程度</td>
                        </tr>
                    </table>

测

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

测

布局页面三的卡片时，英文不能同一行，有一部分出现空白，怎样可以让英文处在同一行

0

1

定位布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="row">
            <ul class="col-md-4 col-sm-6 card">
                    <li class="flex">
                        <img class="headPortrait" src="1.jpg">
                        <div class="text">
                        <p class="professionalName">Web前端工程师</p><br>
                        <p class="describe">Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/
                            flash等各种Web技术进行产品的开
                            发。</p>
                        </div>

                    </li>
            </ul>
            </div>
        </div>
CSS代码：
.card{
    background-color: white;
    border: 1px solid #e2e2e2;
    color: #333333;
}
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.headPortrait{
    margin-top: 20px;
    margin-bottom: 16px;
    margin-left: 10px;
}
.text{
    display: block;
    margin-top: 34px;
    margin-left: 8px;
}
.professionalName{
    font-size: 16px;
    margin: 0;
}
.describe{
    display: block;
    font-size: 14px;
}
.

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>

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

怎么使导航悬停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;
}

bootstrap中的col-xs-*,col-sm-*,col-的意义

0

1

媒体查询响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>

    </div>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-3">col-md-3</div>
  
    </div>

如何将 footer 保持在底部？

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header{
    flex: 0 0 auto;
}
.main{
    flex: 1 0 auto;
}
.footer{
    flex: 0 0 auto;
}

除了弄个盒子加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;
}