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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

git如何去删除自己的项目中的一个文件

2

1

git

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// var vm =new Vue({
//   el:"#op",
//   data:{
//     hello:true
//   }
// })
// for(let i=0;i<3;i++){
//     console.log(i);
// }
// console.log(i)
// let [a=111,b,c]=[,2,3]
// console.log(a,b,c)
// let[a,b,c,d]='hello';
// console.log(a,b,c,d)
// let url='admin/inderx.php';
// // console.log(url.endsWith('php'));
// let obj={
//     name:'李四',
//     age:'12',
//     gender:'male'
// }
// let t=`
//     <div>
//         <span>${obj.name}</span>
//         <span>${obj.age}</span>
//         <span>${obj.gender}</span>
//     </div>
// // `;
// // console.log(t)
// new Vue({
//     el:'#app',
//     data:{
//        mas:'jjk',
//        age:'18',
//        sbb:''
//     },
//     methods:{
//         cao(){
//             this.mas='ni'
//         },
//         ni(ki){
//             this.mas=ki
//         },
//         print(){
//             console.log('不跳');
//         },
//         sb(){
//             console.log('提交')
//         },
//         wo(){
//             if(this.sbb===''){
//                 this.sbb=true
//             }
//             else{
//                 this.sbb=''
//             }

该问题已被官方收录

引入less.js和less文件后打开报错

1

1

less

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

实现不出响应式

1

1

布局 bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <h6 class="title link">友情链接</h6>
                 </div>
             </div>
         </div>
         <div class="container">
             <ul class="now bottom-top">
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
             </ul>
             <ul class="now bottom-top">
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
             </ul>
         </div>

.bottom-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.column{
    list-style: inside;
    font-size: 7px;
    color: #999999 !important;
}
.underline-color{
    color: #999999;
}
.underline-color:hover{
    color: #999999;
    text-decoration: none;
    border-bottom: 1px solid green;
}
@media (max-width:767px){
    .bottom-top{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        flex-wrap: wrap;
        width: 50%;
    }
    .column{
        text-align: center;
        margin-bottom: 5px;
    }
}

该问题已被官方收录

在做任务十二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; }

该问题已被官方收录

怎么给hover添加动画效果

2

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.list-3:hover .list-4{
    opacity: 1;
}

该问题已被官方收录

saas继承没有作用

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//变量
$eliminate:0;
$blue:#29BDE0;
$white:#FFFFFF;
$text:auto;
$font:.26rem;
$width:80%;


//混合器
@mixin flex($x:center,$y:center){
    display: flex;
    justify-content:$x;
    align-items: $y;
}
@mixin guding{
    position: fixed;
    width: 100%;
}
@mixin box($w:.51rem,$h:.6rem){
    width: $w;
    height: $h;
}

@mixin font{
    width:$width;       
    font-size: $font;
    color: #A6A6A6;
}
@mixin button{
    width: 50%;
    height: .86rem;
    border-radius: .15rem;
    font-size: .4rem;
    color: #FFFFFF;
    
}




html{
    font-size: 312.5%;
}
body{
    padding: .72rem 0 1.2rem 0;
    margin: $eliminate;
    font-size: initial;
}
p{
    margin: $eliminate;
}

/*header 眉页*/
header{
    @include flex(space-between, center);
    @include guding;
    top: 0;
    /* border半透明 */
    border-bottom: .01rem solid rgba(200,200,200,.95);
    background: $blue;
    font-size:.34rem;
    /* 字符间距 */
    letter-spacing: .04rem;
    color: $white;

    a.left-header{
        @include box;
        margin: .1rem 0 0 .2rem;
        background: url(picture/task-css12.png) no-repeat -2.2rem -1.9rem;
    }
    a.right-header{
        @include box;
        margin:.1rem .2 rem 0 0 ;
        background: url(picture/task-css12.png) no-repeat -.96rem -1.95rem;
    }
}

/*main 主体*/
div.box{
    padding-top: .29rem;
    background: $blue;

    .logo{
        @include box(3.51rem,2.1rem );
        margin: $text;
        background: url(picture/task-css12.png) no-repeat -4.16rem 0;

        .logo-font{
            position: absolute;
            margin:1.3rem 0 0 .7rem;
            font-size: .48rem;
            /* 字符间距 */
            letter-spacing: .05rem;
            color: $white;
        }
    }
    p.introduce{
        width: $width;
        margin: .3rem $text .61rem $text;
        font-size: .33rem;
        color: #FFC865;
    }
    p.time{
            width: $width;
            margin: $text;
            font-size:$font;
            color: $white;

    }
    div.center-box{
        @extend .time;
        display: flex;

        span.font{
            margin-right: .5rem;
        }
    }

}

该问题已被官方收录

按钮是块级元素还是行内元素？

1

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html：
 <footer>
        <button class="leave">留言</button>
        <button class="telephone">电话联系</button>
    </footer>


css：
.leave {
    margin: 2%;
    width: 46%;
    /* 此处将宽度设置为48%是将整个按钮在整个宽度的46%  46%+2%+2%=50%刚好一半*/
    height: 40px;

    border: 1px solid rgba(95, 192, 205, 1);
    border-radius: 5px;
    font: 17px / 6px HiraginoSansGB-W3;

    font-weight: normal;
    color: rgba(95, 192, 205, 1);
    background-color: white;


}

.telephone {
    float: right;
    /* 为什么这里要设置浮动？而第一个按钮不用设置浮动？ */

    /* margin: auto; */

    margin: 2%;
    width: 46%;
    height: 40px;
    color: rgba(255, 255, 255, 1);
    background: rgba(95, 192, 205, 1);
    border: 1px solid rgba(95, 192, 205, 1);
    border-radius: 5px;
}

该问题已被官方收录

在父元素里面设置margin：0；p元素还有margin

2

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>
    <style pyte="txet/css">
html { 
    font-size:312.5%; 
} 
body { 
    font-size: initial; 
    margin: 0; 
}

header {
    width: 100%;
    height: 0.88rem;
    background-color: #5FC0CD;
}
    </style>
</head>
<body>
    <header>
        <p>注册</p>
    </header>
</body>
</html>

该问题已被官方收录

怎么用纯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;
}

该问题已被官方收录

任务十的进度条如何实现，以及进度条点击时的效果

5

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    .icon {
        width: 100%;
    }

    .icon .left, .icon .right {
        width: 45%;
        height: .05rem;
    }

    .caliber {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box-size {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .caliber>span {
        margin: .10rem .25rem;
    }

    .next {
        margin: .50rem 0;
    }

}


aside {
    margin-top: .50rem;
    padding: .60rem 0;
    font-size: .14rem;
    background: #f9f9f9;
}

.aside-left {
    padding-left: .30rem;
    padding-bottom: .20rem;
}

.aside-center div {
    margin-bottom: .20rem;
}

.aside-center a {
    color: #999999;
}

.aside-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

aside img {
    height: .92rem;
}

.adress {
    width: 1.5rem;
}

.aside-center a:hover {color: #1d7ad9;}

/*页脚*/

footer {
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
    padding: .12rem 0;
    background: #1d7ad9;
}

/*媒体查询*/

@media screen and (max-width: 992px) {

    aside {
    margin-top: .20rem;
    padding: .20rem 0;
    }   

    .aside-right {
        display: flex;
        justify-content: flex-start;
    }

    .aside-right img {
        position: absolute;
        left: .30rem;
    }

去第页

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