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，无法在webstorm中配置

2

2

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

sass里：nth-of-type()的问题

0

2

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

先上代码

html

<div class="first">
<div class="star">☆</div>
<p class="text">住家</p>
<div class="star">☆</div>
<p class="text">不含餐</p>
</div>
<div class="second">
<p class="job">从业年限</p>
<p class="years">0~3年</p>
</div>
<div class="second">
<p class="job">工作时间</p>
<p class="years">全天</p>
</div>
<div class="second">
<p class="job">服务价格</p>
<p class="years">25元/小时</p>
</div>
<div class="second">
<p class="job">自我介绍</p>
<p class="years"> 可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富。
</p>
</div>
scss

.second {
@extend %text;
margin-left: .6rem;
.job {
@extend %margin;
padding-right: .26rem;
color: nth($list: $color, $n: 3);
border-right: solid .01rem nth($list: $color, $n: 3);
}
.years {
@extend %margin;
padding-left: .1rem;
&:nth-of-type(3) {
color: #e26163;
}
}
}

该问题已被官方收录

gulp4打包出现问题，

0

2

打包工具

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/combined-98d825ae5e.css">
   
    <script src="scripts/combined-ddab469f1a.js"></script>

该问题已被官方收录

为什么没有给两个按钮设置任何属性它们之间会有间隙

3

2

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<button class="button-1">找雇主</button>
        <button class="button-2">找护工</button>

该问题已被官方收录

如何对sass进行环境搭建

0

2

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

图片不显示

4

2

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
    margin:0;
}


.header{
    position: fixed;
    width:100%;
    height:3rem;
    line-height: 3rem;
    text-align: center;
    background-color: #5fc0cd;
    color:#ffffff; 
    z-index: 1;
}
.back{
    position: absolute;
    left:1.5rem;
    top:0.7rem; 
}

该问题已被官方收录

文字居中的问题，假如太少了不知道怎么操作？

7

2

居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.good {
    margin: 2rem;
    font-size: 2rem;
    color: #ffc865;
    text-align: center;
}

该问题已被官方收录

如何去掉边框和内容的空隙

1

2

边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
     <!--minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/task7.2.css">
</head>
<body>
<div class="wrap">
    <div class="head">
      <img src="../img/task7.1.1.png" class="catalogue" alt="">
      <span class="vote">投票</span>
      <img src="../img/task7.1.2.png" class="wrong" alt="">
     </div>
    <div class="make">
      <span>发表讨论结果，大家请投票</span>
        <img src="../img/taask7.17.png" alt="">
        <audio src="../audio/财富自由.mp3" controls="controls">
            Your browser does not support the audio element.
        </audio>
    </div>
    <div class="makk">
    </div>
      <p class="cilck">点击票数最多人的头像</p>
    <div class="olk">
      <div class="center">
        <div class="cox">
           <p class="iu">水民</p>
           <p class="ui">一号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <P class="iu">水民</P>
            <p class="ui">2号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">警察</p>
            <p class="ui">3号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">法官</p>
            <p class="ui">4号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">狙击手</p>
            <p class="ui">5号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">医生</p>
            <p class="ui">6号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">杀手</p>
            <p class="ui">7号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">8号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">9号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">10号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">11号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">12号</p>
            <div class="mxc">
                <img src="../img/task7.7.png"  alt="">
            </div>
        </div>
      </div>
     </div>
    <footer class="vc">
        <a href="../html/task7.3html.html" >
        <button>投死</button>
        </a>
    </footer>
</div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
body{
    background: #29bde0;
}
.head{
    width: 100%;
    height: 14.59vw;
    background: #29bde0;
}
.catalogue{
    width: 6.093vw;
    height: 5.25vw;
    margin-top: 4.78vw;
    margin-left: 3.59vw;
}
.wrap{
    background: #29bde0;
}
.vote{
    position: absolute;
    margin-left: 38vw;
    font-size: 4vw;
    color: #ffffff;
    margin-top: 5vw;
}
.wrong{
    width: 3.78vw;
    margin-left: 34.31vw;
    margin-top: 6vw;
    margin-right: 4vw;
    float: right;
}
.make{
    height: 12.65vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.12rem;
    background: #b9e9f5;
}
.make audio{
    width: 5vw;
    height: 2vw;
    margin-right: 2.65vw;
    opacity: 0;
}
.make img{
    position: absolute;
    width: 8.125vw;
    margin-left: 88vw;
}
.make span{
    margin-left: 7.5vw;
    font-size: 3vw;
    padding-top:0.8vw;
}
.makk{
    width: 0;
    height: 0;
    margin-left: 11.25vw;
    border-width: 2vw;
    border-style: solid;
    border-color: #b9e9f5 transparent transparent transparent;
}
.cilck{
    color: #ffffff;
    font-size: 3vw;
    margin-left: 11.40vw;
}
.olk{
  margin-left: 2vw;
    margin-bottom: 16.5vw;
}
.center{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}
.cox{
    height: 25vw;
    width: 25vw;
    margin-right: 3vw;
    margin-bottom: 8vw;
    font-size: .17rem;
    text-align: center;
    border: 1vw solid white;
}
.iu{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
    margin: 0;
    color: #565656;
    background-color: #f5c97b;
    font-size: 3vw;

}
.ui{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
    margin: 0;
    background-color: #83b09a;
    font-size: 3vw;
}
.mxc img{
    margin-top: 2vw;
    display: none;
    width: 24vw;
    margin-left: -0.5vw;
}
.cox:hover img{
    display: block;
}
.vc{
    position: fixed;
    bottom: 0;
    padding: 1vw;
    width: 100%;
    height: 17vw;
    text-align: center;
    color: #fff;
    background-color: #29bde0;
}
.vc button{
    border: none;
    width: 80%;
    height: 9vw;
    background-color: #fbb435;
    margin-top: 5vw;
    font-size: 6vw;
    color: #ffffff;
}

该问题已被官方收录

页面中的描述文字无法达到自适应的效果

1

2

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="self-introduce">
     <span class="self-1" >自我介绍</span>
     <span class=>丨</span>
     <span class="selfcontent">可以洗衣、做饭、照顾老人。
        在护工方面有五年经验，经验丰富.可以洗衣、做饭、照顾老人。在护工方面有五年经验，经验丰富</span>
    </div>

该问题已被官方收录

有没有更方便的轮播图实现方案？

1

2

轮播

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

去第页

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