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

该问题已被官方收录

怎么限制input number输入框的输入数字位数

5

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <input name="myInput_DRS" onkeypress="return isNumeric(event)" onkeydown="return isMoreThan(event)" oninput="maxLengthCheck(this)" type="number" placeholder="Type..." min="1" max="999" />
 2 
 3 <script>
 4   function maxLengthCheck(object) {
 5     if (object.value.length > object.max.length)
 6       object.value = object.value.slice(0, object.max.length)
 7   }
 8 
 9   function isNumeric(evt) {
10     var theEvent = evt || window.event;
11     var key = theEvent.keyCode || theEvent.which;
12     key = String.fromCharCode(key);
13     var regex = /[0-9]|\./;
14     if (!regex.test(key)) {
15       theEvent.returnValue = false;
16       if (theEvent.preventDefault) theEvent.preventDefault();
17     }
18   }
19 
20   function isMoreThan(evt) {
21     var theEvent = evt || window.event;
22     var target = theEvent.target;
23     var keyID = event.keyCode;
24     var isDelete = false;
25     switch (keyID) {
26       case 8:
27           isDelete = true;
28         // alert("backspace");
29         break;
30       case 46:
31           isDelete = true;
32         // alert("delete");
33         break;
34       default:
35         break;
36     }
37 
38     if (!isDelete && target.value.length == target.max.length) {
39       return false;
40     }
41   }
42 
43 </script>

该问题已被官方收录

盒子页面在进行到进度条时，使用了另一个办法，使用盒子的边框做底，做圆形盒子打底。

0

1

盒模型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css：


html {
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}

/*header区域开始*/
/*顶部登录页面*/
/*顶部最大容器*/
.loginbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4rem;
    background-color: #1d7ad9;
    font-size: 1.6rem;
    color: #ffffff;
}

/*顶部最大容器结束*/
.loginbar-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*文字框容器*/
.loginbar-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20%;
}

/*文字框容器*/

/*文字框设置*/
.loginbar-right-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 50%;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}

/*结束*/

/*顶部文字框hover*/
.loginbar-right-right:hover {
    background-color: #ffffff;
    color: #000;
}

/*导航栏*/
.bnt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.bnt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    width: 100%;
    height: 5rem;
}

.bnt-center {
    width: 9%;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    background-color: #ffffff;
    border-radius: 15%;
    font-size: 1.6rem;
}

.bnt-center:hover {
    background-color: #1d7ad9;
    color: #fff;
}

/*结束*/
/*进度条*/
.sidebar {
    width: 55%;
    border-top: 5px solid yellow;
    float: right;

}

.sidebar-top {
    display: flex;
    justify-content: space-around;
    position: relative;
    top: 0;
    left: 0;
}

.sidebar-center {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color:#ff7f02;
    position: absolute;
    
}

.sidebar-bottom {
    display: flex;
    justify-content: space-around;
    height: 3rem;
    line-height: 3rem;
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task10</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/task10.css">
</head>
<body>
<header>
    <div class="loginbar">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 loginbar-left">
                    <div>客服热线：1234123412342</div>
                    <div class="loginbar-right">
                        <div class="loginbar-right-right">登录</div>
                        <div class="loginbar-right-right">注册</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bnt-top">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 bnt">
                    <div style="width: 50%;"></div>
                    <div class="bnt-center">首页</div>
                    <div class="bnt-center">在线定制</div>
                    <div class="bnt-center">标准箱</div>
                    <div class="bnt-center">品质保证</div>
                </div>
            </div>
        </div>
    </div>
    <br><br>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div style="width: 50%;"></div>
            <div class="sidebar"></div>
        </div>
    </div>
</div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-top">
                <div style="width: 40%;"></div>
                <div class="sidebar-center">1</div>
                <div class="sidebar-center">2</div>
                <div class="sidebar-center">3</div>
                <div class="sidebar-center">4</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-bottom">
                <div style="width: 40%;"></div>
                <div>1.定制纸箱</div>
                <div>2.上传附件</div>
                <div>3.选择数量</div>
                <div>4.确认下单</div>
            </div>
        </div>
    </div>
</header>
</body>
</html>

该问题已被官方收录

文字左右对齐，盒子高度怎么自由变化

2

1

背景图片

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.portrait {
    position: absolute;
    top: 30px;
    left: 16px;
    width: 84px;
    height: 84px;
}

.wenzi{
    position: absolute;
    left: 120px;
    top: 50px;
}
.tuone{
    color: #ffffff;
    font-size: 15px;
    letter-spacing: 2px;

}
.tutwo{
   float: right;
    color: #ffffff;
    font-size: 5px;

}
.shape{
    height: 11px;
    margin-right: 8px;
   }

该问题已被官方收录

导航栏高亮

0

1

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

HTML
<div class="nav-top">
        <div class="nav-top-content">
            <div class="top-content1"><a href="#">首页</a></div>
            <div class="top-content"><a href="task14-3.html">职业</a></div>
            <div class="top-content"><a href="task14-2.html">推荐</a></div>
            <div class="top-content"><a href="task14-2.html">关于</a></div>
        </div>
    </div>
CSS
.nav-top {
  @include container;
  @include flex;
  justify-content: flex-end;
}
@media only screen and (max-width: 767px) {
  .nav-top {
    display: none;
  }
}
.nav-top-content {
  display: flex;
}
.top-content a,
.top-content1 a{
  font-size: .18rem;
  color: $white;
  @include flex;
  justify-content: center;
  padding: .2rem .3rem;
}
.top-content a:hover,
.top-content1 a:hover{
  @include border-bottom (2px, solid, $white);
}
.top-content1 a {
  @include border-bottom (2px, solid, $white);
}

该问题已被官方收录

wangEditor富文本编辑器，无法获取和存储输入框里边的内容。

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

if ($stateParams.id) {
            $scope.theme = "编辑Article";
            $http({
                method: "GET",
                url: "/carrots-admin-ajax/a/article/" + $stateParams.id
            }).then(function (res) {
                //console.log(res);
                $scope.param = res.data.data.article;
                $scope.title = res.data.data.article.title;
                $scope.img = res.data.data.article.img;
                $scope.param.content = editor.txt.html($scope.param.content);
                $scope.url = res.data.data.article.url;
                $scope.createAt = res.data.data.article.createAt;
            }, function (res) {
                alert(res.data.message);
            });
            //立即上线
            $scope.onLine = function () {
                if ($stateParams.id) {
                    $http({
                        method: "PUT",
                        url: "/carrots-admin-ajax/a/u/article/" + $stateParams.id,
                        params: {
                            status: 2,
                            title: $scope.title,
                            type: $scope.param.type,
                            industry: $scope.param.industry,
                            img: $scope.img,
                            content: editor.txt.html(),
                            url: $scope.url,
                            createAt: $scope.createAt
                        }
                    }).then(function (res) {
                        console.log(res);

该问题已被官方收录

在做任务十二header部分的返回小图标一直都是用的图片，如何用纯css实现呢？

3

1

CSS图标

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>护工个人主页</title>
	<link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="task12-1.css">
</head>
<body>
    <header>
        <a href="task12-2.html"><</a>
        <span>个人主页</span> 
    </header>
    <main>
        <div class="background">
            <div><img src="../task5/images/head.png"></div>
            <p>高素雅 51岁<br>
            <img src="../task5/images/icon-1.png" class="dingwei">
            <span>北京·通州·报纸林</span>
            </p>
        </div>
        <p>专业技能</p><hr>
        <div class="list">
            <p><span class="red">☆</span><span class="left-text-first">住家</span><span class="red">☆</span><span>不含餐</span></p><hr>
            <p><span class="left-text">从业年限</span>0~3</p><hr>
            <p><span class="left-text">工作时间</span>全天</p><hr>
            <p><span class="left-text">服务价格</span><span class="red">25元/小时</span></p><hr>
            <div class="last">
                <div class="myself">
                    <span>自我介绍</span>
                </div>
                <div class="oneself">
                    <span>可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富</span>
                </div>
            </div><hr>
        </div>
    </main>
    <footer>
        <button class="btn-left">留言</button>
        <button class="btn-right">电话联系</button>
    </footer>
</body>
</html>
a {
    color: #ffffff;
    text-decoration: none; }
  
  html {
    font-size: 625%; }
  
  body {
    margin: 0.4rem 0 0.5rem;
    padding: 0;
    font-size: .18rem; }
  
  header {
    position: fixed;
    top: 0;
    text-align: center;
    line-height: .40rem;
    width: 100%;
    color: #ffffff;
    background: #5fc0cd; }
    header a {
      position: absolute;
      left: 0;
      padding: 0 .15rem; }
  
  main {
    margin: .40rem 0 .50rem 0; }
    main .background {
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 2rem;
      background: url(../task5/images/bg.png) no-repeat;
      background-size: cover; }
      main .background div {
        width: .80rem;
        height: .80rem;
        padding: 0 .30rem; }
      main .background .dingwei {
        position: relative;
        top: .08rem;
        transform: scale(0.6); }
      main .background span {
        font-size: .12rem; }
      main .background img {
        max-width: 100%;
        max-height: 100%; }
    main > p {
      margin-left: .18rem;
      padding-left: .18rem;
      border-left: 2px solid #5fc0cd; }
    main .list {
      padding: 0 .18rem; }
      main .list .red {
        color: #e26163;
        font-weight: 500; }
      main .list .left-text-first {
        color: black;
        padding-right: .20rem;
        margin-right: .20rem;
        border-right: 1px #999999 solid; }
      main .list .left-text {
        color: #999999;
        width: 1.12rem;
        padding: 0 .20rem;
        margin-right: .20rem;
        border-right: 1px #999999 solid;
        white-space: nowrap; }
      main .list .last {
        display: flex;
        align-items: center; }
        main .list .last .myself {
          color: #999999;
          position: absolute;
          width: 1.12rem;
          border-right: 1px #999999 solid;
          text-align: center;
          white-space: nowrap; }
        main .list .last .oneself {
          margin-left: 1.35rem; }
  
  footer {
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: .50rem;
    width: 100%;
    background: #ffffff; }
    footer .btn-left {
      padding: 0;
      outline: none;
      border: 1px solid #5fc0cd;
      border-radius: .1rem;
      width: 48%;
      height: .40rem;
      font-size: .18rem;
      color: #5fc0cd;
      background: #ffffff; }
    footer .btn-right {
      padding: 0;
      outline: none;
      border: 1px solid #5fc0cd;
      border-radius: .1rem;
      width: 48%;
      height: .40rem;
      font-size: .18rem;
      color: #ffffff;
      background: #5fc0cd; }

该问题已被官方收录

css实现纯轮播图时轮播的图片如何与左右按钮绑定，实现点击图片轮转？

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="boxx7">

      <div class="boxx7-1"><
        <label for="lunbo1"></label>
        <label for="lunbo2"></label>
        <label for="lunbo3"></label>
      </div>



        <input type='radio' id='lunbo1' name="only">
        <input type='radio' id='lunbo2' name="only">
        <input type='radio' id='lunbo3' name="only">
        <ul class="boxx7-2">
          <li class="boxx7-3"><img src="background-pic1.jpg" style="width: 100vw;"></li>
          <li class="boxx7-3"><img src="background-pic2.jpg" style="width: 100vw;"></li>
          <li class="boxx7-3"><img src="background-pic3.jpg" style="width: 100vw;"></li>
        </ul>

     </div>

/*轮播图开始*/
.boxx7{
  overflow: hidden;
  width: 100%;
}
.boxx7-1{
  position: absolute;
  top: 12rem;
  margin: 1.5rem 0;
  font-size: 4rem;
}
.boxx7-2{
  padding: 0;
  width: 300vw;
  list-style: none;
  transition: 0.5s ease-out;
}
.boxx7-3{
  float: left;
}

     input:nth-of-type(1):checked ~ ul{
            margin-left: 0%;
        }

        #lunbo2:checked ~ ul{
            margin-left: -100%;
        }

        #lunbo3:checked ~ ul{
            margin-left: -200%;
        }

 /*当radio选中后，相应的下一个左箭头移动到图片的上层以供点击*/
        input:nth-of-type(1):checked ~ .boxx7-1 label:nth-of-type(2)
        input:nth-of-type(2):checked ~ .boxx7-1 label:nth-of-type(3)
        input:nth-of-type(3):checked ~ .boxx7-1 label:nth-of-type(1)

该问题已被官方收录

在使底部footer背景透明的时候如果使用opacity

1

透明度

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.65rem;
    opacity: 0.8;
    background: rgba(41, 189, 224, 0.8);
}
footer button {
    position: relative;
    width: 40vw;
    height: 0.43rem;
    font-size: 0.2rem;
    border-radius: 0.07rem;
    color: white;
    opacity: initial;
}

该问题已被官方收录

汉堡菜单划出来后，右边的隐藏内容能用手划出来，怎么解决

0

1

侧边栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<input type="checkbox" id="sidebar">
<!--汉堡侧栏开始-->
<div class="sidebar-menu">
    <ul>
        <li>
            <span>
                <img src="../images/laba.png" alt="">
                公告
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/chilun.png" alt="">
                设置
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/wenhao.png" alt="">
                帮助
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/xiaoguanji.png" alt="">
                关于
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
    </ul>
</div>
<!--汉堡侧栏结束-->

<!--头部开始-->
<header>
    <label for="sidebar">
        <img src="../images/celan.png" alt="">
        <img src="../images/guanbi.png" alt="">
    </label>
</header>
<!--头部结束-->
<!--主体开始-->
<a href="task13-2.html" class="last-game">
    <span>上次游戏：捉鬼猜词版</span>
    <img src="../images/baijiantou.png" alt="">
</a>
<div class="nav-game">
    <h1>捉鬼游戏</h1>
    <div class="row">
        <a href="task13-2.html" class="nav-item">简化版</a>
    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="row row-middle">
        <a href="task13-2.html" class="nav-item">猜词版</a>
        <a href="task13-2.html" class="next"><img src="../images/huangjiantou.png" alt=""></a>

    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="row">
        <a href="task13-2.html" class="nav-item">白痴版</a>
    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="nav-circle">
        <a href="###" class="active"></a>
        <a href="###"></a>
        <a href="###"></a>
        <a href="###"></a>
    </div>

</div>
<!--主体结束-->

该问题已被官方收录

多元素如何水平居中？

2

1

居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码