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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

用类名控制

0

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

··

该问题已被官方收录

flex在ul中对list-style的一个奇怪现象

0

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<ul class="ul-left">
             <li class="li-left"><a class="list-a" href="">阿里巴巴</a></li>
              <li class="li-left"><a class="list-a" href="">腾讯视频</a></li>
             <li class="li-left ing"><a class="list-a ing" href="">土豆网</a></li>
</ul>




这里是CSS
.ul-left {
display:flex;
flex-diretion:colunm;
justify-content:center;
align-item:center;
...
}

该问题已被官方收录

首页如何学习栏的绿色箭头如何让其自适应宽度缩进

0

1

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

            <div class="rstudy row">
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">1</div>
                        <div class="study-text">匹配你现在的个人情况寻找适合自己的岗位</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">2</div>
                        <div class="study-text">了解职业前景薪金待遇、竞争压力等</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">3</div>
                        <div class="study-text">掌握行业内顶级技能</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">4</div>
                        <div class="study-text">查看职业目标任务</div>
                        <div class="study-arrow study-arrow2"></div>
                    </div>
                </div>
            </div>

.content .study .cstudy .study-num {
    background: url("img/icon.png") no-repeat -1rem -3rem;
    height: 0.72rem;
    width: 0.72rem;
    text-align: center;
    line-height: 0.72rem;
    color: #1db176;
    font-weight: bold;
    float: left;
}
.content .study .cstudy .study-text {
    height: 0.72rem;
    width: 1.5rem;
    color: #9e9e9e;
    font-size: 0.14rem;
    padding-left: 0.1rem;
    display:table-cell;vertical-align:middle;
}
.content .study .cstudy .study-arrow {
    background: url("img/icon.png") no-repeat -2rem -3rem;
    height: 0.3rem;
    width: 0.3rem;
    display: inline-block;
    position: relative;
    top: -0.5rem;
    left: 2.3rem;
}

该问题已被官方收录

如何不适用bootstrap用纯css写一个轮播图

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div id="picture" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicator">
        <li data-target="#picture" data-slide-to="0" class="active"></li>
        <li data-target="#picture" data-slide-to="1" class></li>
        <li data-target="#picture" data-slide-to="3" class></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/pic1.jpg ">
        </div>
        <div class="item">
            <img src="images/pic2.jpg ">
        </div>
        <div class="item">
            <img src="images/pic3.jpg ">
        </div>
    </div>
    <a class="left carousel-control" href="#picture" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true "></span>
    </a>
    <a class="right carousel-control" href="#picture" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>
</div>

该问题已被官方收录

样式受到挤压，导致并行。

2

1

属性 bottstrap 属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="row height">
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">1</span>
          <p class="font">匹配你现在的个人情况 寻找适合自己的岗位</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">2</span>
          <p class="font">了解职业前景薪金待遇、 竞争压力等</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">3</span>
          <p class="font font-right">掌握行业内顶级技能</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">4</span>
          <p class="font font-right">查看职业目标任务</p>
          <span class="arrows"></span>
        </div>
      </div>

该问题已被官方收录

文字居中的同时保持整体左对齐

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

      <div class="row">
                <p class="col-12 clr-333 px-18 bold">如何学习</p>
                <div class="arrows col-md-6 col-xl-3">
                    <span class="no"></span>
                    <p>匹配你现在的个人情况、寻找适合自己的岗位</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>了解职业前景薪金待遇、竞争压力等</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>掌握行业内顶级技能</p>
                </div>
                <div class="col-md-6 col-xl-3">
                    <p>查看职业目标任务</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>参考学习资源，掌握 技能点，逐个完成任务</p>
                    </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>加入班级，和小伙伴们 互帮互助，一块学习</p>
                </div>
                <div class="arrows col-md-6 col-xl-3">
                    <p>选择导师，一路引导， 加速自己成长</p>
                </div>
                <div class="col-md-6 col-xl-3">
                    <p>完成职业技能，升 级业界大牛</p>
                </div>
            </div>
        </div>

该问题已被官方收录

轮播图中的背景图片和文字如何实现自适应

0

1

轮播自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html：
<div id="demo" class="carousel slide" data-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
            </ul>
            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="img8/cover1.png">
                    <div class="carousel-caption">
                        <p>你作为一个初级菜鸟，你是否想要了解</p>
                        <p>50万的程序员，都会哪些技能呢？</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img8/cover1.png">
                    <div class="carousel-caption">
                        <p>你作为一个初级菜鸟，你是否想要了解</p>
                        <p>50万的程序员，都会哪些技能呢？</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img8/cover1.png">
                    <div class="carousel-caption">
                        <p>你作为一个初级菜鸟，你是否想要了解</p>
                        <p>50万的程序员，都会哪些技能呢？</p>
                    </div>
                </div>
            </div>
            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>

        </div>

css部分
.carousel img{
    width: 100%;
}
.carousel-indicators li {
    width: .1rem !important;
    height: .1rem !important;
    border-radius: 50%;
}
.carousel-caption p{
    font-size: .4rem;
}

该问题已被官方收录

点击导航栏不能下拉菜单

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <nav class=" col-4 navbar navbar-expand-md navbar-dark ">

                    <button class="navbar-toggler but-1" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <!-- 要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。
                        然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id: -->
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link  font" href="#">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link font" href="#">职业</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link font" href="#">推荐</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link font" href="#">关于</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </span>
        </div>

table布局出了问题

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <!-- 第二行 -->
                        <tr class="p-two">
                            <td colspan="2" class="p-two-one">门槛 <img src="../img/xxx.png" /></td>
                            <td colspan="2" class="p-two-one">难易程度 <img src="../img/xxx.png" /> <img src="../img/xxx.png" /></td>
                        </tr>
                        <!-- 第三行 -->
                        <tr class="p-three">
                            <td colspan="2" class="p-two-one">成长周期 <span style="color: red;">1-3</span><span style="color: black;">年</span></td>
                            <td colspan="2" class="p-two-one">稀缺程度 <span style="color: red;">345</span><span style="color: black;">家公司需要</span></td>
                        </tr>
                        <!-- 第四行 -->
                        <tr class="p-four">
                            <td rowspan="3" class="p-four-one">薪资待遇</td>
                            <td colspan="3" class="p-two-two">0-1年 <span  style="float:right;">5k-10k/月</span></td>
                        </tr>
                        <!-- 第五行 -->
                        <tr class="p-four">
                            <td colspan="3" class="p-two-two">0-1年 <span  style="float:right;">5k-10k/月</span></td>
                        </tr>
                        <!-- 第六行 -->
                        <tr class="p-four">
                            <td colspan="3" class="p-two-two">0-1年 <span  style="float:right;">5k-10k/月</span></td>
                        </tr>
                        <!-- 第七行 -->
                        <tr class="p-three">
                            <td colspan="4" class="p-seven-one">有<span style="color: red;">286</span>人在学</td>
                        </tr>
                        <!-- 第八行 -->
                        <tr class="p-three">
                            <td colspan="4" class="p-two-one">提示：在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</td>
                        </tr>
                    </table>

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

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

去第页

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