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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

使用vw进行布局，pc端垂直滚动条会占用额外的空间。

1

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 0 1.9rem;
    padding: 0;
    list-style: none;
}

li {
    width: 18.9vw;
    margin: 0 6.5vw;
}

.via {
    border: .69vw solid #fff;
    margin-bottom: 10vw;
    background: #F5C97B;
    text-align: center;
    letter-spacing: .05rem;
}

该问题已被官方收录

多个内联元素排成一行

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<span>2015-7-5至2015-7-12</span>
<span>25元/小时</span>
<a herf= "#"><img src= "back.png" /></a>

该问题已被官方收录

row的宽度没有沾满整个container

1

1

布局

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <style pyte="txrt/css">
    html{
    font-size: 312.5%;
}
body{
    font-size: initial;
}
ul{
    margin: 0;
}

/* header眉页 */
.padding-right{
    padding-right: 0;
}
.right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 0;
}
.service{
    line-height: .5rem;
    font-size: .14rem;
    color: #29B078;
}
.weixin{
    display: inline-block;
    width: .3rem;
    height: .3rem;
    margin-right: .19rem;
    background: url(picture/task-css8.png) no-repeat 0 0;
}
.qq{
    display: inline-block;
    width: .3rem;
    height: .3rem;
    margin-right: .19rem;
    background: url(picture/task-css8.png) no-repeat 0 -.58rem;
}
.weibo{
    display: inline-block;
    width: .3rem;
    height: .3rem;
    background: url(picture/task-css8.png) no-repeat 0 -1.3rem;
}

/*下拉 导航栏 */
.bg-green{
    background: #29B078;
}
.navbar{
    padding: 0;
}
.navbar-brand{
    margin-right: 0;
    font-size: 0;
}
.xiuzhenyuan{
    width: 3.5rem;
}
.navbar-toggler{
    padding: 0;
    margin: .25rem .75rem .25rem 0;
    border:none;
    outline: none !important;
    font-size: .5rem;
}
@media (max-width:767px){
    .navbar-nav{
        text-align: center;
    }
}


/* main主体 */
.picture-size{
    width: 100vw;
    height: 33vw;
}

    </style>


</head>
<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-6 padding-right">
                    <span class="service">客服热线：010-594-78634</span>
                </div>
                <div class="col-6  right">
                    <a class="weixin"></a>
                    <a class="qq"></a>
                    <a class="weibo"></a>
                </div>
            </div>
        </div> 


                        <nav class="navbar navbar-expand-md bg-green navbar-dark">
                                <div class="container">
                                        <div class="row">
                                            <div class="col-sm-12">
                                <a class="navbar-brand" href="#">
                                    <img class="xiuzhenyuan" src="picture/xiuzhenyuan.png">
                                </a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                                    <span class="navbar-toggler-icon"></span>
                                </button>
                                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                                    <ul class="navbar-nav">
                                        <li class="nav-item">                      
                                            <a class="nav-link" href="#">首页</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">职业</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">推荐</a>
                                        </li>    
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">关于</a>
                                        </li>
                                    </ul>
                                </div> 
                            </div>
                        </div>
                    </div>
                   </div> 
                            </nav>

    </header>










    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

该问题已被官方收录

当使用input number怎么限制数字的个数

1

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <input type="number" id="number1" min="1" max="5">

该问题已被官方收录

页面二hover半透明层位置

2

1

透明度 hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="web-list-col">
                <div class="web-peo">
                    <img class="web-peo-p" src="img/peo.jpg">
                    <span class="web-peo-t">Web前端工程师</span>
                    <div class="web-peo-text">
                        Web前端开发工程师，主要职责是利用（X）HTML /CSS /JavaScript /flash等各种Web技术进行产品的开发。
                    </div>
                </div>
                <div class="web2">
                    <span class="threshold">
                        门槛
                    </span>
                    <span class="difficult">
                        难易程度
                    </span>
                </div>
                <div class="web2">
                    <span class="grew">
                        成长周期
                        <span class="grew-num">1-3
                             <span class="grew-text">年</span>
                        </span>
                    </span>
                    <span class="scar">
                        稀缺程度
                        <span class="scar-num">345
                            <span class="scar-text">家公司需要</span>
                        </span>
                    </span>
                </div>
                <div class="money">
                    <div class="money-t">
                        薪资待遇
                    </div>
                    <div class="money-l">
                        <div class="money-one">
                            <span class="money-onel">0-1年</span>
                            <span class="money-one2">5k-10k/月</span>
                        </div>
                        <div class="money-two">
                            <span class="money-twol">1-3年</span>
                            <span class="money-two2">10k-20k/月</span>
                        </div>
                        <div class="money-three">
                            <span class="money-threel">3-6年</span>
                            <span class="money-three2">20k-50k/月</span>
                        </div>
                    </div>
                </div>
                <div class="studying">
                    <span class="studying-h">有</span>
                    <span class="studying-num">286</span>
                    <span class="studying-text">人正在学</span>
                </div>
                <div class="tips">
                    提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XXX等语言基础
                </div>
                <div class="web-hover">
                    <div class="web-hover-t">iOS工程师</div>
                    <div class="web-hover-text">
                    iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属
                    于类Unix的商业操作系统。国内iOS开
                    发起步相对较晚，人才培养机制更是远
                    远跟不上市场发展速度。有限的iOS开
                    发人才成了国内企业必争的资源。国内  iOS开发起步相对较晚，人才培养机制
                    更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
                    </div>
                </div>
            </div>

//职业块
    .web-list-col {
      height: 4.48rem;
      width: 30%;
      margin-bottom: 0.2rem;
      background-color: #ffffff;
      border: #d3d4d6 solid 0.01rem;
      //头像
      .web-peo {
        border-bottom: #d3d4d6 solid 0.01rem;
        padding-left: 0.1rem;
        height: 1.74rem;
        .web-peo-p {
          height: 1.2rem;
          width: 1.2rem;
          margin-top: 0.2rem;
        }
        .web-peo-t {
          position: relative;
          bottom: 1.1rem;
          font-size: 0.14rem;
          font-weight: bold;
        }
        .web-peo-text {
          font-size: 0.12rem;
          width: 45%;
          position: relative;
          left: 1.25rem;
          bottom: 1rem;
        }
      }
      //门槛、成长周期等信息
      .web2 {
        @extend %between;
        color: #999999;
        font-size: 0.12rem;
        border-bottom: #d3d4d6 solid .01rem;
        .threshold,.difficult,.grew,.scar {
          display: inline-block;
          height: 0.42rem;
          line-height: 0.42rem;
        }
        .threshold {
          width: 35%;
          padding-left: 5%;
          background: url("../img/icon.png") no-repeat -4.3rem -5.87rem;
        }
        .difficult {
          width: 55%;
          background: url("../img/icon.png") no-repeat -4.3rem -4.87rem;
        }
        .grew {
          width: 35%;
          padding-left: 5%;
          .grew-num {
            color: red;
            .grew-text {
              color: black;
            }
          }
        }
        .scar {
          width: 55%;
          .scar-num {
            color: red;
            .scar-text {
              color: black;
            }
          }
        }
      }
      //薪资
      .money {
        @extend %between;
        height: 1.06rem;
        font-size: 0.14rem;
        color: #999999;
        .money-t {
          width: 40%;
          border: #d3d4d6 solid 0.01rem;
          border-left: 0;
          border-top: 0;
          text-align: center;
          line-height: 1.1rem;
        }
        .money-l {
          width: 60%;
          color: #000000;
          padding: 0;
          line-height: 0.36rem;
          .money-one,.money-two,.money-three {
            border-bottom: #d3d4d6 solid 0.01rem;
            height: .343rem;
            line-height: .343rem;
            .money-onel,.money-twol,.money-threel {
              padding-left: 0.2rem;
            }
            .money-one2,.money-two2,.money-three2 {
              padding-right: 0.3rem;
              float: right;
            }
          }
        }
      }
      //在学人数
      .studying {
        border-bottom: #d3d4d6 solid 0.01rem;
        height: 0.38rem;
        line-height: 0.38rem;
        font-size: 0.15rem;
        font-weight: bold;
        .studying-h {
          padding-left: 0.2rem;
        }
        .studying-num {
          color: red;
        }
      }
      //提示
      .tips {
        padding-left: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: #c6c6c6;
      }
      //ios介绍
      .web-hover {
        @extend %mid-center;
        flex-direction: column;
        height: 4.48rem;
        position: relative;
        top: -4.26rem;
        background-color:transparent;
        font-size: 0.18rem;
        color: #ffffff;
        font-weight: bold;
        &:hover {
          background-color:rgba(0,0,0,0.6);
        }
        &:hover .web-hover-t {
          display: block;
        }
        &:hover .web-hover-text {
          display: block;
        }
        .web-hover-t {
          height: .5rem;
          margin-top: -.8rem;
          display: none;
        }
        .web-hover-text {
          width: 80%;
          display: none   ;
        }
      }
    }

该问题已被官方收录

怎么用sass方便的编译栅格布局

0

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$grid: ( xm:0px, sm :768px, md:992px, lg:1200px);
@mixin reactive($para, $list) {
    @each $e, $px in $grid {
        @media screen and (min-width: $px) {
            #{$para}:map-get($map:$list, $key: $e)
        }
    }
}

该问题已被官方收录

栅格系统如何一栏显示十个

3

1

bottstrap 布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <div class="col-xs-3 col-md-1 box">
                <div class=" link-content">
                    <a class="link">
                        <span class="circle2"></span> 手机软件
                    </a>
                </div>
            </div>

该问题已被官方收录

给背景图片大小不管用

0

1

css概念元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
				background: url("IMG/wolf.png") no-repeat;
				width:100%;
				height:100%;
			}

该问题已被官方收录

关于sacc代码的简写

0

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@mixin border-bottom {
    border-bottom: solid 1px #e1e5e7;
    width: 100%;
}
@mixin border-top {
    border-top: solid 1px #e1e5e7;
    width: 100%;
}

@mixin border-left {
    border-left: solid 1px #e1e5e7;
}

@mixin border {
    border: solid 1px #e1e5e7;
}

该问题已被官方收录

栅格式布局5张图片使用col-lg-怎么铺满整个屏幕且不溢出

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
    <div class="row business">
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm1.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm2.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm3.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm4.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm5.png"></span>
        </div>
    </div>
</div>

去第页

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