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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

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

该问题已被官方收录

子元素为行内元素不在父元素内

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" type="text/css" href="task6.css">
</head>

<body>
    <header>
        <button class="btn">找雇主</button>
        <button class="btn">招护工</button>
    </header>
</body>

</html>

html{
    font-size: 625%; 
}
body{
    margin: 0;
    
}
header{
    position: fixed;
    top: 0;
    text-align: center;
    height: .64rem;
    width: 100%;
    background-color: #5fc0cd;   
}
.btn{
    font-size: 16px;
    color: #ffffff;
    background-color: #55a8b3;
    border-radius: 7px;  
    padding: .1rem .2rem .1rem .13rem;  
    border: none;
    outline:none
}

该问题已被官方收录

如何用纯CSS写一个手动轮播图

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" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="task14.css">
</head>
<body>
</body>
</html>

该问题已被官方收录

关于Buton的一个疑问

1

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.btn-left,
.btn-right {
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
}
.btn-right {
    float: right;
    margin-right: 1rem;
}
.btn-left {
    float: left;
    margin-left: 1rem;
}

该问题已被官方收录

怎么用纯css3写一个轮播图

2

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/demo.css">
    <title>轮播图（纯CSS）</title>
</head>
<body>
<div class="wrap">
    <div class="viewport">
        <img src="../image/pic1/pic-a.png" alt="#">
        <img src="../image/pic1/pic-b.png" alt="#">
        <img src="../image/pic1/pic-c.png" alt="#">
        <img src="../image/pic1/pic-a.png" alt="#">
    </div>
</div>
</body>
</html>


CSS：
body {
     margin: 0;
     padding: 0;
    line-height: 1;
 }
html {
    font-size: 62.5%;
}
.wrap {
    width: 100vw;
    overflow: hidden;
}

.viewport {
    position: relative;
    width: 400vw;
    clear: both;
    -webkit-animation-name: carouse;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
}
@keyframes carouse {
    0% {
        left: 0;
}
    10% {
        left: 0;
    }
    30% {
        left: -100vw;
    }
    40% {
        left: -100vw;
    }
    60% {
        left: -200vw;
    }
    70% {
        left: -200vw;
    }
    90% {
        left: -300vw;
    }
    95% {
        left: -300vw;
    }
}
.viewport>img {
    width: 100vw;
    float: left;
}

该问题已被官方收录

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

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

该问题已被官方收录

如何用固定定位fixed来实现任务十二选项框，fixer和absolute的区别

2

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.footer{
     position: fixed;
     left: 0;
     bottom: 0;
     right: 0;
     .tele{
       width:43vw;
       height:12vw;
       border-radius:0.6vw;
       border:none;
       outline: none;
       font-size:4.17vw;
       margin-bottom:3vw;
       margin-left:4.5vw;
     }
     .tele1{
       background:white;
       border: solid #5fc0cd 0.2vw;;
       color:#5fc0cd;
     }
     .tele2{
       background:#5fc0cd;
       color: #FFFFFF;
     }

该问题已被官方收录

设置了宽高的小盒子，在加入“首页”文字之后，原有的高度就塌陷了

1

1

浮动

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Title</title>
   <style>
       * {
                      margin: 0;
           padding: 0;
       }
       .foot{
                      position:fixed;
           bottom:0;
           width:100%;
           height:4rem;
           background-color:#fff;
           box-sizing:border-box;;
           padding:0.3rem;
           text-align:center;
       }
       .house,
       .write,
       .man {
                      display:inline-block;
           background-image: url("形状4.png");
           background-repeat:no-repeat;
       }
       .house,
       .man {
                      width:2rem;
           height:3rem;
           background-size:8rem;
       }
       .house {
                      background-position:left top;
       }
       .write {
                      width:4rem;
           height:3.5rem;
           background-size:7rem;
           background-position:4px bottom;
       }
       .man {
                      background-position:-50px top;
       }
       .house div {
                      display: inline-block;
           font-size:1rem;
       }
   </style>
</head>
<body>
<div "foot">
   <div "house">
       <div>首页</div>
   </div>
   <div "write">
   </div>
   <div "man">
   </div>
</div>
</body>
</html>

该问题已被官方收录

select下拉菜单样式修改

1

1

表单元素下拉菜单

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<select class="list-ads" name="list-ads">
                <option value="a1" style="font-size: 13px;">所在地</option>
                <option value="a2" style="font-size: 13px;">上海</option>
                <option value="a3" style="font-size: 13px;">广州</option>
                <option value="a4" style="font-size: 13px;">深圳</option>
            </select>

该问题已被官方收录

select下拉框的默认样式

0

1

下拉菜单

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <select>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

去第页

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