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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

sass写的媒体查询，编译成css文件正确，但在浏览器打开后达到对应尺寸不起作用

0

1

sass 媒体查询

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//计算rem基准字体
$rem-base-font-size:100px;
//UI设计图的分辨率宽度
$UI-width:720px;
// 需要适配的屏幕宽度
$device-width:320px,375px,425px,768px;

// 根据不同设备的屏幕宽度，定义<html>的基准font-size
@mixin html-font-size {
    @each $current-width in $device-width {
        @media only screen and (max-width:$current-width) {
            $x:$UI-width/$current-width; // // 计算出是几倍屏
            font-size: $rem-base-font-size/$x;
        }
    }
}
@include html-font-size();

@media only screen and (max-width: 320px) {
  font-size: 44.44444px;
}

@media only screen and (max-width: 375px) {
  font-size: 52.08333px;
}

@media only screen and (max-width: 425px) {
  font-size: 59.02778px;
}

@media only screen and (max-width: 768px) {
  font-size: 106.66667px;
}

该问题已被官方收录

英文单词太长，不知道怎么处理？

1

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

没有代码，http://www.baidu.com/s?wd=pica&rsv_spt=1&rsv_iqid=0x930769df0003fb2d&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1

就像是上面的，浏览器会以为是一个单词。所以要想个办法解决。

该问题已被官方收录

怎么限制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>

该问题已被官方收录

nginx怎么做两个跨域

1

1

nginx

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无

该问题已被官方收录

表格的边框显示不出来

0

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@charset"UTF-8";
@import"_layout";
// job主体
main.job {
    .home-box {
        padding: .31rem 0;
        border-bottom: $main-border;
        .black-font {
            font-size: .16rem;
            color: $black;
        }
        .green-font {
            font-size: .16rem;
            color: $green;
        }
    }
    .direction-box {
        padding: .23rem 0;
        border-bottom: $main-border;
        .direction {
            line-height: .14rem;
            font-size: .14rem;
            color: $text;
        }
        .option-box {
            margin: 0;
            padding: 0;
            .option {
                line-height: .14rem;
                font-size: .14rem;
                color: $black;
                &:hover {
                    background: $green;
                    color: $white;
                }
            }
        }
    }
    @media(max-width:575px) {
        .center {
            line-height: .6rem;
            text-align: center;
        }
    }
    .headline-box {
        padding: .31rem 0;
        border-bottom: $main-border;
        font-size: .16rem;
        color: $black;
    }
    .intro-box {
        position: relative;
        margin-top: .47rem;
        perspective: 1000;
        transform-style: preserve-3d;
        .shade {
            visibility: hidden;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 2.8rem .93rem 1.76rem .82rem;
            background: rgba(8, 1, 3, 0.6);
            font-size: .16rem;
            color: $white;
            transition: 0.6s;
            transform-style: preserve-3d;
        }
        &:hover .shade {
            visibility: visible;
            transform: rotateY(360deg);
        }
        th.width1 {
            width: 40%;
        }
        th.width2 {
            width: 10%;
        }
        th.width3 {
            width: 50%;
        }
        tr.box {
            border: $main-border;

            .picture {
                margin: .2rem .08rem .16rem .11rem;
            }
            @media(max-width:375px) {
                .picture {
                    @include box(1.85rem, 1.85rem);
                    margin: .2rem .08rem .16rem .3rem;
                }
            }
            @media(min-width:376px) and (max-width:470px) {
                .picture {
                    @include box(2.1rem, 2.1rem);
                    margin: .2rem .08rem .16rem .5rem;
                }
            }
            @media(min-width:490px) and (max-width:767px) {
                .picture {
                    margin: .2rem .08rem .16rem .6rem;
                }
            }
            strong.font {
                font-size: .16rem;
                color: $black;
            }
            p.font {
                margin: .16rem .09rem 0 0;
                font-size: .14rem;
                color: $black;
            }
        }
        .standard-font{
            padding: .28rem  .1rem;
            font-size: .12rem;
            color: $text;
            border: $main-border;

            .wjx::after{
                display: inline-block;
                content:"";
                @include box(.16rem,.16rem);
                margin-left:.24rem;
                background: url(../picture/task-css14.png) no-repeat 0 -2.66rem;
            }
            .wjx2::before{
                display: inline-block;
                position: absolute;
                content:"";
                @include box(.16rem,.16rem);
                margin: .12rem 0 0 1.48rem;
                background: url(../picture/task-css14.png) no-repeat 0 -2.66rem;
            }
            .red{
                font-size: .12rem;
                color: #F01400;
            }
            .black{
                font-size: .12rem;
                color: $black;
            }
            .center{
                display:block;
                text-align: center;
            }
            .left{
                margin-left: .24rem;
            }
            .right-txet{
                float: right;
            }
        }
    }
    @media (min-width:767px) and (max-width: 991px){
        .col-sm-6 {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
    @media(max-width:767px){
        .col-12{
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
}

该问题已被官方收录

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)

该问题已被官方收录

如何实现下拉式导航

1

1

导航栏下拉菜单

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    input:checked ~ ul{
        display: block;
        height: 252px;

该问题已被官方收录

使用perspective-origin 3D旋转没有反应怎么回事？

0

1

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="veil">
                <p class="veil-1">iOS工程师</p>
                <p> iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属 于类Unix的商业操作系统。国内iOS开 发起步相对较晚，人才培养机制更是远 远跟不上市场发展速度。有限的iOS开 发人才成了国内企业必争的资源。国内 iOS开发起步相对较晚，人才培养机制 更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。</p>
            </div>

.veil {
        width: 36.5rem;
        height: 44.3rem;
        background: #120e0b;
        opacity: 0;
        position: absolute;
        padding: 8.5rem 4.3rem;
        color: #FFFFFF;
        font-size: 1.4rem;
        transition:all 2s;
        transform-origin: 50% 0;
        .veil-1 {
          text-align: center;
          margin-bottom: 3.5rem;
        }
      }

该问题已被官方收录

目前流行的组件库有哪些？css，js各有哪些流行的库？

0

1

框架

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.

该问题已被官方收录

制作侧边栏时，怎么样让侧边栏点击后推开主题内容？

0

1

侧边栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
    <title>首页</title>
    <link rel="stylesheet" href="task13-1.css">
  </head>
  <body>
    <input type="checkbox" name="male" id="male">
    <label for="male"><img src="../task7/images/icon-2.png"></label>
    <aside>
      <ul>
        <li>公告<img src="../task7/images/icon-back.png"></li>
        <li>设置<img src="../task7/images/icon-back.png"></li>
        <li>关注<img src="../task7/images/icon-back.png"></li>
        <li>关于<img src="../task7/images/icon-back.png"></li>
      </ul>
    </aside>
    <header></header>
    <nav>
      <span>上次游戏:捉鬼猜词版</span>
      <a href="task13-2.html"><img src="../task7/images/icon-back.png"></a>
    </nav>
    <main>
      <div></div>
      <p>捉鬼游戏</p>
      <a href="task13-2.html"><span>简化版</span></a>有1133个用户正在玩这款游戏
      <a href="task13-2.html"><span>猜词版</span></a>有1133个用户正在玩这款游戏
      <a href="task13-2.html"><span>白痴版</span></a>有1133个用户正在玩这款游戏
      <span><span class="the-one">•</span>••• </span>
    </main>
  </body>
</html>

@charset "UTF-8";
/* 重置样式 */
button {
  padding: 0;
  border: none;
  background: transparent;
  outline: none; }

a {
  text-decoration: none;
  outline: none; }

p {
  margin: 0; }

ul {
  margin: 0;
  padding: 0;
  outline: none;
  list-style: none; }

.flt-right {
  float: right; }

/* 基础样式 */
::-webkit-scrollbar {
  display: none; }

img {
  transform: scale(0.5); }

/* 全局样式 */
html {
  font-size: 625%;
  overflow-x: hidden; }

body {
  font-size: .12rem;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; }

body {
  background: #f0f0f0;
  overflow: hidden; }

input[type=checkbox]:checked ~ aside {
  transform: translateX(0);
  transition: 0.2s ease-out; }

input[type=checkbox]:checked + label {
  margin-top: 0.05rem;
  transform: translateX(75vw);
  z-index: 9999;
  transition: 0.2s ease-out; }

input[type=checkbox]:checked ~ header {
  transform: translateX(75vw);
  transition: 0.2s ease-out; }

input[type=checkbox]:checked ~ nav {
  transform: translateX(75vw);
  transition: 0.2s ease-out; }

input[type=checkbox]:checked ~ main {
  transform: translateX(75vw);
  transition: 0.2s ease-out; }

label {
  position: absolute;
  top: 0.05rem;
  z-index: 9999; }

input {
  position: absolute;
  opacity: 0; }

aside {
  position: absolute;
  height: 100%;
  width: 75vw;
  background: #ffffff;
  box-shadow: 0 0 25px #9a9a9a;
  z-index: 1;
  transform: translateX(-75vw);
  transition: 0.2s ease-out; }
  aside > ul {
    line-height: .40rem;
    font-size: .15rem; }
    aside > ul > li {
      display: flex;
      justify-content: space-around;
      align-content: center;
      border-bottom: 1px #f0f0f0 solid; }
      aside > ul > li:hover {
        background: #69d1e9;
        color: #ffffff; }

header {
  height: .40rem;
  background: #29bde0; }

nav {
  margin: .12rem .18rem;
  border: 1px #c9c9c9 solid;
  height: .60rem;
  background: #ffffff;
  white-space: nowrap;
  text-align: center;
  transition: 0.2s ease-out; }
  nav span {
    font-size: .16rem;
    color: #9a9a9a;
    line-height: .60rem; }
  nav img {
    float: right;
    position: relative;
    top: .10rem;
    right: .10rem; }

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 4rem;
  margin: .12rem .18rem;
  border: 1px #c9c9c9 solid;
  color: #9a9a9a;
  background: #ffffff;
  transition: 0.2s ease-out; }
  main > div {
    position: absolute;
    top: 3.05rem;
    right: calc(5% - 12px);
    position: absolute;
    border-style: solid;
    border-width: 20px;
    border-color: transparent transparent transparent #fbb435; }
  main p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: .40rem;
    margin: 0;
    border-bottom: 1px solid #fbb435;
    font-size: .18rem;
    color: #fbb435; }
  main a {
    margin: .12rem 0;
    border: 0;
    height: .70rem;
    width: 80%;
    text-align: center;
    font-size: .15rem;
    color: #ffffff;
    background: #69d1e9; }
    main a > span {
      line-height: .70rem; }
  main span {
    transform: scale(2); }
    main span span {
      color: #29bde0; }

/*# sourceMappingURL=task13-01.css.map */

去第页

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