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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

p标签和div标签的差异

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>homework</title>
    <link rel="stylesheet" href="work1.css">
</head>
<body>
    <header>
        <div class="word1">注册</div>
        <div class="word2" >登录</div>
        <div class="word3">关闭</div>
    </header>
</body>
</html>

该问题已被官方收录

页面二hover半透明层位置

2

1

hover 透明度

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="web-list-col">
                <div class="web-peo">
                    <img class="web-peo-p" src="img/peo.jpg">
                    <span class="web-peo-t">Web前端工程师</span>
                    <div class="web-peo-text">
                        Web前端开发工程师，主要职责是利用（X）HTML /CSS /JavaScript /flash等各种Web技术进行产品的开发。
                    </div>
                </div>
                <div class="web2">
                    <span class="threshold">
                        门槛
                    </span>
                    <span class="difficult">
                        难易程度
                    </span>
                </div>
                <div class="web2">
                    <span class="grew">
                        成长周期
                        <span class="grew-num">1-3
                             <span class="grew-text">年</span>
                        </span>
                    </span>
                    <span class="scar">
                        稀缺程度
                        <span class="scar-num">345
                            <span class="scar-text">家公司需要</span>
                        </span>
                    </span>
                </div>
                <div class="money">
                    <div class="money-t">
                        薪资待遇
                    </div>
                    <div class="money-l">
                        <div class="money-one">
                            <span class="money-onel">0-1年</span>
                            <span class="money-one2">5k-10k/月</span>
                        </div>
                        <div class="money-two">
                            <span class="money-twol">1-3年</span>
                            <span class="money-two2">10k-20k/月</span>
                        </div>
                        <div class="money-three">
                            <span class="money-threel">3-6年</span>
                            <span class="money-three2">20k-50k/月</span>
                        </div>
                    </div>
                </div>
                <div class="studying">
                    <span class="studying-h">有</span>
                    <span class="studying-num">286</span>
                    <span class="studying-text">人正在学</span>
                </div>
                <div class="tips">
                    提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XXX等语言基础
                </div>
                <div class="web-hover">
                    <div class="web-hover-t">iOS工程师</div>
                    <div class="web-hover-text">
                    iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属
                    于类Unix的商业操作系统。国内iOS开
                    发起步相对较晚，人才培养机制更是远
                    远跟不上市场发展速度。有限的iOS开
                    发人才成了国内企业必争的资源。国内  iOS开发起步相对较晚，人才培养机制
                    更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
                    </div>
                </div>
            </div>

//职业块
    .web-list-col {
      height: 4.48rem;
      width: 30%;
      margin-bottom: 0.2rem;
      background-color: #ffffff;
      border: #d3d4d6 solid 0.01rem;
      //头像
      .web-peo {
        border-bottom: #d3d4d6 solid 0.01rem;
        padding-left: 0.1rem;
        height: 1.74rem;
        .web-peo-p {
          height: 1.2rem;
          width: 1.2rem;
          margin-top: 0.2rem;
        }
        .web-peo-t {
          position: relative;
          bottom: 1.1rem;
          font-size: 0.14rem;
          font-weight: bold;
        }
        .web-peo-text {
          font-size: 0.12rem;
          width: 45%;
          position: relative;
          left: 1.25rem;
          bottom: 1rem;
        }
      }
      //门槛、成长周期等信息
      .web2 {
        @extend %between;
        color: #999999;
        font-size: 0.12rem;
        border-bottom: #d3d4d6 solid .01rem;
        .threshold,.difficult,.grew,.scar {
          display: inline-block;
          height: 0.42rem;
          line-height: 0.42rem;
        }
        .threshold {
          width: 35%;
          padding-left: 5%;
          background: url("../img/icon.png") no-repeat -4.3rem -5.87rem;
        }
        .difficult {
          width: 55%;
          background: url("../img/icon.png") no-repeat -4.3rem -4.87rem;
        }
        .grew {
          width: 35%;
          padding-left: 5%;
          .grew-num {
            color: red;
            .grew-text {
              color: black;
            }
          }
        }
        .scar {
          width: 55%;
          .scar-num {
            color: red;
            .scar-text {
              color: black;
            }
          }
        }
      }
      //薪资
      .money {
        @extend %between;
        height: 1.06rem;
        font-size: 0.14rem;
        color: #999999;
        .money-t {
          width: 40%;
          border: #d3d4d6 solid 0.01rem;
          border-left: 0;
          border-top: 0;
          text-align: center;
          line-height: 1.1rem;
        }
        .money-l {
          width: 60%;
          color: #000000;
          padding: 0;
          line-height: 0.36rem;
          .money-one,.money-two,.money-three {
            border-bottom: #d3d4d6 solid 0.01rem;
            height: .343rem;
            line-height: .343rem;
            .money-onel,.money-twol,.money-threel {
              padding-left: 0.2rem;
            }
            .money-one2,.money-two2,.money-three2 {
              padding-right: 0.3rem;
              float: right;
            }
          }
        }
      }
      //在学人数
      .studying {
        border-bottom: #d3d4d6 solid 0.01rem;
        height: 0.38rem;
        line-height: 0.38rem;
        font-size: 0.15rem;
        font-weight: bold;
        .studying-h {
          padding-left: 0.2rem;
        }
        .studying-num {
          color: red;
        }
      }
      //提示
      .tips {
        padding-left: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: #c6c6c6;
      }
      //ios介绍
      .web-hover {
        @extend %mid-center;
        flex-direction: column;
        height: 4.48rem;
        position: relative;
        top: -4.26rem;
        background-color:transparent;
        font-size: 0.18rem;
        color: #ffffff;
        font-weight: bold;
        &:hover {
          background-color:rgba(0,0,0,0.6);
        }
        &:hover .web-hover-t {
          display: block;
        }
        &:hover .web-hover-text {
          display: block;
        }
        .web-hover-t {
          height: .5rem;
          margin-top: -.8rem;
          display: none;
        }
        .web-hover-text {
          width: 80%;
          display: none   ;
        }
      }
    }

该问题已被官方收录

怎么给hover添加动画效果

2

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

该问题已被官方收录

本地完成任务上传到GitHub后，bootstrap轮播图显示异常

0

1

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

webpack打包出错

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var base = require('./base.js');
var open = base.open;
import './css/base.css';
    if(open ) {
        document.body.innerHTML = `<a href="siginup.html">注册</a>`
    }

该问题已被官方收录

audio标签定义音频时,自动播放属性无效;

0

1

audio播放器

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>demo</title>
</head>
<body>
    <h4>演示音频</h4>
    <audio src="horse.ogg" controls autoplay></audio>
</body>
</html>

该问题已被官方收录

用sass如何重新实现任务11，和less有什么区别

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@font-size:4.86vw;
*{
  padding: 0;
  margin: 0;
}
body{
  background: #eff0f4;
.header{

  height: 11.25vw;
  background: #5fc0cd;
  width: 100vw;
  .close{
    font-size:3.47vw ;
    color: #FFFFFF;
    display: inline-block;
    margin-top: 3.4vw;
    margin-left: 5vw;
    text-decoration: none;
  }
  .loading{
    font-size: @font-size;
    color: #FFFFFF;
    display: inline-block;
    margin-top: 3.4vw;
    margin-left: 32.6vw;
    text-decoration: none;
  }
  .log{
    font-size:3.47vw ;
    color: #FFFFFF;
    display: inline-block;
    margin-top: 3.4vw;
    margin-left: 32.6vw;
    text-decoration: none;
  }
}
}
.dialog          input{
  margin-top: 2.7vw;
    width:81vw;
    height:13.8vw;
    background:white;
    border:none;
  outline: none;
  padding-left:19vw;
  position: relative;
  font-size: 4.17vw;

}
.chart{
  height: 5.55vw;
  width: 4.16vw;
  margin-top: 7.16vw;
  margin-left: 5.55vw;
  border-right: solid 0.27vw #EFF0F4;
  padding-right: 6.25vw;
  position: absolute;
  z-index: 2;
  color: #EFF0F4;
}
.idea input{
  margin-top: 2.7vw;
  width:81vw;
  height:13.8vw;
  background:white;
  border:none;
  outline: none;
  padding-left:19vw;
  position: relative;
  font-size: 4.17vw;
}
.zero{
  height: 5.55vw;
  width: 4.16vw;
  margin-top: 7.16vw;
  margin-left: 5.55vw;
  border-right: solid 0.27vw #EFF0F4;
  padding-right: 6.25vw;
  padding-right: 6.25vw;
  position: absolute;
  z-index: 2;
  color: #EFF0F4;
}
.glass{

  outline: none;
    margin-top: 9.72vw;
   height: 13.8vw;
   width: 100vw;
   font-size: @font-size;
  background: #68CDD5;
  color: #FFFFFF;
}
.foot{
  margin-top: 2.7vw;
  font-size: 3.47vw;
 color:#68CDD5;
  margin-left: 76.3vw;
  text-decoration: none;
}
.object{
margin-top: 97.2vw;
}

该问题已被官方收录

用css画的圆形显示会变形，不报错但是圆形的形状会改变

2

1

CSS图标

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  .circle1{
            display: inline-block;
            width: 2vw;
            height: 2vw;
            border-radius: 50%;
            /*border: 1px solid #e1e5e7;*/
            background-color: #e1e5e7;
            position: absolute;
            left: 40%;
            top: 80%;
            /*z-index: 4;*/
        }

该问题已被官方收录

在这副图上面，我的三个词语都是这样在上面的，想要让他们都保持居中

3

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>Document</title>
    <link rel="stylesheet" type="text/css" href="task4.css">
</head>

<body>
    <header>
        <span style="float: left;">关闭</span>
        <span>登陆</span>
        <span style="float:right;">注册</span>
    </header>
</body>

</html>





body{
    padding: 0;
    margin: 0;
}
span{
    margin: 0; 
}
header {
    width: 720px;
    height: 88px;
    padding: 0px;
    margin: 0px;
    background-color: #5fc0cd;
    text-align: center;
}
span{
    color: white;
    font-size: 20px; 
    display:inline-block;
   
}

该问题已被官方收录

设置了最大宽度，子元素设置百分比,同时设置了相对视窗定位，会超出我设定的最大宽度

0

1

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
  margin: 0;
  padding: 0; }

.max-wid {
  max-width: 780px;
  min-width: 320px;
  height: 100vh;
  margin: auto; }

header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  line-height: 40px;
  font-size: 20px;
  color: #ffffff;
  background: #5fc0cd; }
  header img {
    height: 20px; }

去第页

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