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

咨询电话 : 010-59478634

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

sass中的相同变量，不同取值如何正确的使用，才能让css代码更加简洁。

3

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.back {
        position: absolute;
        left: 5%;
        top: 33%;
        display: inline-block;
        width: .3rem;
        height: .3rem;
        font-size: .36rem;
        // line-height: .88rem;
        border-top: .02rem solid #fff;
        border-right: .02rem solid #fff;
        transform: rotate(225deg);
    }

    .h-page {
        font-size: .36rem;
        line-height: .88rem;
        color: #fff;
    }

该问题已被官方收录

用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 轮播图怎么实现充满整个屏幕做到自适应

0

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>
    <style>
      *{ 
             margin: 0;
             padding: 0; 
             text-decoration: none;
         }
        ul{
            list-style: none;
        }
        
        #container{
            position: relative;
            width: 100%;
            
            overflow: hidden;/*隐藏溢出的图片*/
        }
        .pic{
            width:400%;/*4张图的宽度*/
            position: absolute;/*基于父容器进行定位*/
            left:0;
            clear: both;
            animation-name: focusmap;
            animation-duration: 12s;
            animation-iteration-count: infinite;

        }
         @keyframes focusmap {
            0%,30%{
                left: 0;
            }
            35%,65%{
                margin-left: -100%;
            }
            70%,99%{
                margin-left: -200%;
            }
            100%{
                margin-left: -300%;;
            }
           
        }
        .pic li{
            width: 25%;
            float: left;
            background: #5dd94e;
        }

        .pic li img {
            width: 100%;
            
        }
    </style>

</head>

<body>

        <div id="container">
                <ul class="pic">
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg"></a></li>
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg" ></a></li>
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg" ></a></li>
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg" ></a></li><!-- 克隆第一张 -->
                </ul>
                
            </div>
</body>

</html>

该问题已被官方收录

使用sass的时候是否可以一直用nth:child 嵌套，而不编写类名？

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html {
    font-size: 625%;
}

body {
    font-size: .14rem;
    margin: 0;
    padding: 0;
}

button {
    outline: none;
    border: none;
    color: none;
}

header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .1rem;
    background-color: #5FC0CD;
    @mixin button-style {
        width: .72rem;
        height: .35rem;
        font-size: .17rem;
        font-family: serif;
        border-radius: .05rem;
        font-weight: 300;
    }
    & :first-child {
        @include button-style;
        color: #fff;
        background-color: #55A8B3;
    } // 页眉左
    & :nth-child(2) {
        margin-left: -.05rem;
        @include button-style;
        color: #5FC0CD;
        background-color: #fff;
    } // 页眉中
    & :last-child::before {
        content: "";
        position: absolute;
        right: .35rem;
        top: .165rem;
        display: inline-block;
        background: url(../I/page2.png)no-repeat;
        width: 21px;
        height: 22px;
        background-position: 0 -33px;
    } // 页眉右
}

// 页眉
.nav-style {
    display: flex;
    justify-content: space-between;
    margin-top: .55rem;
    border-bottom: 1px solid #E1E5E7;
    &>:nth-child(2) {
        border-left: 1px solid #E1E5E7;
        border-right: 1px solid #E1E5E7;
    }
} // 包含整个菜单栏的样式
.navigation {
    @mixin navigation-style {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .03rem 0;
        padding: .1rem 0;
        color: #999;
    } // 菜单栏三栏通用样式
    @include navigation-style;
    position: relative;
    width: 100%;
    span {
        flex-basis: 80%;
        text-align: center;
    } // 导航栏样式
    &:hover>.menu {
        display: block;
    } // 隐藏内容显现
    & i::after {
        content: "";
        display: inline-block;
        border: .04rem solid transparent;
        border-top: .06rem solid #AFBAC0;
        width: 0;
        height: 0; // 下拉三角形
    }
    .menu {
        position: absolute;
        display: none;
        top: .42rem;
        width: 100%;
        background: #fff; // 隐藏内容
        span {
            display: block;
            box-shadow: 1px 1px 1px #E1E5E7;
            padding: .1rem 0; // 显示内容后的样式
            &:hover {
                background-color: #5FC0CD;
                color: #fff;
            }
        }
    }
}

// 每栏菜单样式
.main-content-style {
    display: flex;
    justify-content: space-between;
    padding: .05rem .15rem;
    border-bottom: 1px solid #E1E5E7;
    span {
        display: block;
    }
    .sheet-left {
        overflow: hidden;
        span {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        @mixin font-style {
            color: #999;
            font-size: .13rem;
            margin: .1rem 0;
        }
        span:nth-child(1) {
            @include font-style;
        } // 表格左第一行字体
        span:nth-child(1)::before {
            content: "";
            margin-right: .07rem;
            background: url(../I/page2.png)no-repeat;
            width: 12px;
            height: 12px;
            background-position: 0 -113px;
            display: inline-block;
        } // 表格左第一行图标
        span:nth-child(2) {
            margin-left: .19rem;
            font-size: .14rem;
            color: #333;
        } // 表格左 第二行
        span:nth-child(3) {
            @include font-style;
        } // 表格左第三行
        span:nth-child(3)::before {
            content: "";
            margin-right: .07rem;
            background: url(../I/page2.png)no-repeat;
            width: 10px;
            height: 12px;
            background-position: 0 0;
            display: inline-block;
        } // 表格左第三行图标
    } // 表格左
    .sheet-right {
        display: flex;
        align-items: center;
        white-space: nowrap;
        span {
            display: flex;
            align-items: center;
            color: #E63B0E;
            font-size: .15rem;
        } // 表格右字体
        span::after {
            content: "";
            margin-left: .1rem;
            background: url(../I/page2.png)no-repeat;
            width: 10px;
            height: 17px;
            background-position: 0 -96px;
            display: inline-block;
        } // 表格右图标
    }
}

.bottom-footer-gap {
    margin-bottom: .7rem;
}

// 最后一行表格和页脚的距离，页脚设置了fixed定位
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .06rem 0;
    background-color: #F8FAFB; // 页脚样式
    .footer-left {
        text-align: center;
        i:before {
            content: "";
            display: inline-block;
            background: url(../I/page2.png)no-repeat;
            width: 23px;
            height: 20px;
            background-position: 0 -55px;
        }
        span {
            a {
                color: #5FC0CD;
                text-decoration: none;
            }
        }
    } // 页脚左边文字和图标
    .footer-center {
        display: flex;
        justify-content: center;
        align-items: center;
        width: .57rem;
        height: .57rem;
        border-radius: 50%;
        background-color: #5FC0CD;
        i::before {
            content: '';
            display: inline-block;
            background: url(../I/page2.png)no-repeat;
            width: 20px;
            height: 21px;
            background-position: 0 -12px;
        }
    } // 页脚中间文字和图标
    .footer-end {
        text-align: center;
        i::before {
            content: "";
            display: inline-block;
            background: url(../I/page2.png) no-repeat;
            width: 21px;
            height: 21px;
            background-position: 0 -75px;
        }
    } // 页脚右边文字和图标
}

该问题已被官方收录

安装ruby和sass时，无法添加源。

1

1

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

sass写的媒体查询，编译成css文件正确，但在浏览器打开后达到对应尺寸不起作用

0

1

sass 媒体查询

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//计算rem基准字体
$rem-base-font-size:100px;
//UI设计图的分辨率宽度
$UI-width:720px;
// 需要适配的屏幕宽度
$device-width:320px,375px,425px,768px;

// 根据不同设备的屏幕宽度，定义<html>的基准font-size
@mixin html-font-size {
    @each $current-width in $device-width {
        @media only screen and (max-width:$current-width) {
            $x:$UI-width/$current-width; // // 计算出是几倍屏
            font-size: $rem-base-font-size/$x;
        }
    }
}
@include html-font-size();

@media only screen and (max-width: 320px) {
  font-size: 44.44444px;
}

@media only screen and (max-width: 375px) {
  font-size: 52.08333px;
}

@media only screen and (max-width: 425px) {
  font-size: 59.02778px;
}

@media only screen and (max-width: 768px) {
  font-size: 106.66667px;
}

该问题已被官方收录

button宽度设置为100%，下方button设置浮动，出现横向滚动轴

0

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<body>
<header></header>
<button class="buttonlogon" type="button" >登录</button>
<button class="buttompasswprd">忘记密码</button>
<footer></footer>
</body>

.buttonlogon{
  width: 100%;
  height: 3rem;
  margin-bottom: 1rem;
  border: none;
  outline: none;
  color: #ffffff;
  background: #5fc0cd;

}
.buttompasswprd{
  float: right;
  padding: 0;
  border: none;
  margin-right:1rem ;
  color: #5fc0cd;
  outline: none;
  border-bottom: 1px solid #5fc0cd;
  background: #eff0f4;
}

sass无法同步

1

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
  display: flex;
  flex-direction: row;


  margin: 0;
  background-color: rgba(240, 240, 240, 1);

  /*左拉菜单*/
  .menu {
    flex-basis: 55%;

    display: none;

    height: 6.2rem;
    font-size: .16rem;
    color: rgba(41, 189, 224, 1);
    background-color: #fff;


    ul {
      padding: 0;
      text-indent: 8px;
      list-style: none;


      li {
        line-height: 2.2;
        border-bottom: 1px solid rgba(225, 229, 231, 1);

        img {
          height: .22rem;
          vertical-align: -.05rem;
        }

        .menu-arrow {
          float: right;
          margin-top: .12rem;
          margin-right: .3rem;
          width: .1rem;
          height: .1rem;
          border-top: .02rem solid rgba(41, 189, 224, 1);
          border-right: .02rem solid rgba(41, 189, 224, 1);
          transform: rotate(45deg)
        }
      }
    }
  }

}

article {
  position: relative;
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  
header {
  z-index: 5;
  width: 100%;
  height: .5rem;
  background-color: rgba(41, 189, 224, 1);

  .head-logo {
    position: relative;

    i {
      display: block;
    }

    .logo-line-1 {
      position: absolute;
      top: 17px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
    }

    .logo-line-2 {
      position: absolute;
      top: 33px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
    }
  }
}


  .last-game {
    position: relative;
    margin-top: .15rem;
    width: 92%;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    font-size: .17rem;
    border: .01rem solid #C9C9C9;
    color: rgba(154, 154, 154, 1);
    background-color: #ffffff;

    i {
      position: absolute;
      top: 35%;
      right: 3%;
      width: .13rem;
      height: .13rem;
      border-top: .03rem solid rgba(231, 231, 231, 1);
      border-right: .03rem solid rgba(231, 231, 231, 1);
      transform: rotate(45deg)
    }
  }



  main {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 92%;
    height: 4.5rem;
    margin-top: .5rem;
    background-color: #ffffff;
    border: .01rem solid #C9C9C9;


    h3 {
      font-size: .12rem;
      color: #787878;
    }

    .game-begin {
      display: flex;
      height: 10%;
      width: 90%;
      justify-content: center;
      border-bottom: .01rem solid #FBB435;

      .game-btn {
        width: 100%;
        border-style: none;
        font-size: .19rem;
        outline: none;
        color: #FBB435;
        background-color: #fff;
      }
    }

    .edition {
      position: relative;
      margin-top: .2rem;
      width: 80%;
      height: 15%;
      outline: none;
      border-style: none;
      color: #fff;
      background-color: #69D1E9;
    }


    .arrow {
      position: absolute;
      right: -7px;
      top: 47%;
      height: 0;
      width: 0;
      border-width: 13px;
      border-style: solid;
      border-color: transparent transparent transparent #FBB435;
    }


    .bottom-circle {
      display: flex;
      height: .3rem;
      width: .6rem;
      justify-content: center;


      .circle {
        margin-left: .03rem;
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
        background-color: #F0F0F0;

        &:hover {
          background-color: #69D1E9;
        }

      }

    }

  }

}

webstrom创建sass时出现问题

0

1

sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

去第页

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

loading