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

轮播图能否不使用绝对定位

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.frame{
    box-sizing: border-box;
    position: fixed;
    overflow:hidden; 
    padding-bottom: 30%;
    min-width: 100%;
    .photos {  
        position: absolute;
        width: 100%;
        overflow: hidden;
        .roll { 
            float: left;
            width: 100%;
        }
        .boil {
            background: url(./images/Image.png) no-repeat;
            background-size:100% 100%;
        }
        .boil-one {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tow {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tir {
            animation: myfirst 10s ease  infinite normal;
        }
        @keyframes myfirst {
            30%,50% {margin-left: -100%;}
            55%,75% {margin-left: -200%;}
            80%,100% {margin-left: -300%;}
        }
    }    
}

组件库规范

0

1

框架

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@mixin module-imgscale($width,$height,$margin,$image,$position,$scale) {
  width: $width;
  height: $height;
  margin: $margin;
  background-image: $image;
  background-position: $position;
  -webkit-transform: scale($scale);
  -moz-transform: scale($scale);
  -ms-transform: scale($scale);
  -o-transform: scale($scale);
  transform: scale($scale);
}

css任务7的下拉框怎么做

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<select></select>

怎么将公司的github和自己的github关联起来

2

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

PS 以及PSCC怎么快速切图

2

1

PhotoShop

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

切图有什么工具

去除inline-block元素间间距

1

内外边距布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box {
            width: 100%;
            height: 600px;
            background-color: red;
        }

        .box1{
            display: inline-block;
            width: 100px;
            height: 200px;
            background-color: blue;
        }


    </style>

</head>
<body>

<div class="box">
    <div class="box1">124124</div>
    <div class="box1">14124</div>
    <div class="box1">141414</div>

</div>
</body>
</html>

怎么引用公共less文件，

1

Less

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@fullwidth:100%;
@fullheight:100%;
@bg-content:#fafafa;
@base:#29b078;
@font-size:14px;
@color:#bfbfbf;
@body:{margin:0;padding:0}
@p:{margin:0;padding:0}

在header中运用absolute出现的问题

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.triangle {
    width: 0;
    height: 0;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #b9e9f5 transparent transparent;
    margin: 10px auto;
}

九宫格

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

div {
    width:30% ;
    padding-bottom:30% ;
    /* border-radius 意思是给图形加圆角 */
    border-radius:20% 
    background-color:rgb(221, 159, 43);
    float:left;
    margin:1%
     height
    
    }

任务十流程图中制作黄线圆角的时候中间出现空白。

0

1

属性属性 hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.process1,.process{
    display: inline-block;
    color: #cccccc;
    padding-top:38px;
    padding-bottom: 14px;
    text-align: center;
    font-size: 0;
    margin-left: -2px;
}

.process:hover .circle,.process:hover .line,.process:hover .line3{
    background-color:#ff7f02 ;
    z-index: 1;
}
.line{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.line3{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 1;
}
.process:hover  span{color:#ff7f02 ;}
.circle1,.circle{
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #cccccc;
    color: white;
    font-size: 16px;
}
.line1,.line2,.line3,.line{
    display: inline-block;
    width: 60px;
    height: 5px;
    background-color: #cccccc;
    font-size: 18px;
}
.line1{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.line2{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
    z-index: 1;
}
.line1,.line2,.circle1{
    background-color:#ff7f02 ;
}