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进行环境搭建

0

2

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

用sass转译出的css文件媒体查询达到分辨率条件不起作用，还是原来的css样式

0

2

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@media screen and (max-width: 768px) {
  .footer_box, .footer .footer_box-right {
    display: grid;
    width: 100%; }
  .footer .footer_box-right {
    float: none; } }

@media screen and (max-width: 768px){
  
    .footer_box{
      display: grid;
      width:100%;
    }
    .footer_box-right{
      float:none;
    }
 
}

该问题已被官方收录

安装sass，无法在webstorm中配置

2

2

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;
}

该问题已被官方收录

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

1

1

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

怎么使用sass

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
  .header{
    width:100vw;
    height:11.11vw;
    background:#5fc0cd;
    color: white;
    .close{
      font-size:@font-size;
      float: left;
      padding-left:4.17vw;
      padding-top:3vw;
    }
    .login{
      font-size:5vw;
      padding-left:32.2vw;
      line-height:11.11vw;
    }
    .enroll{
      font-size:@font-size;
      float: right;
      padding-right:4.17vw;
      padding-top:3vw;
    }
  }
  .foot{
     input{
      width:79.17vw;
      height:14.17vw;
      padding-left:20.83vw;
      border: none;
      outline: none;
      font-size:4.17vw;
    }
    .number{
      position: relative;
      margin-top:2.22vw;
    }
    .vertical{
      position: absolute;
      width:0.42vw;
      height:7.36vw;
      background:#eff0f4;
      top:3.33vw;
      left:15.97vw;
    }
    .iphone{
      width:3.89vw;
      height:5.69vw;
      position: absolute;
      top:4.17vw;
      left:5.97vw;
    }
    .password{
      position: relative;
      margin-top:2.22vw;
      margin-bottom:9.72vw;
    }
    .ver{
      position: absolute;
      width:0.42vw;
      height:7.36vw;
      background:#eff0f4;
      top:3.33vw;
      left:15.97vw;
    }
    .locked{
      width:4.17vw;
      height:6.11vw;
      position: absolute;
      top:4.17vw;
      left:5.97vw;
    }
  }
  .logon{
    font-size:4.72vw;
    width:100%;
    height:13.89vw;
    background:#5fc0cd;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
  }
  .forget{
    color:#5fc0cd;
    font-size:4.58vw;
    float: right;
    margin-top:2.5vw;
    margin-right:4.86vw;
  }

}

该问题已被官方收录

用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;
}

该问题已被官方收录

使用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;
        }
    } // 页脚右边文字和图标
}

该问题已被官方收录

页面布局问题，十万火急！大佬速来！

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>Document</title>
</head>
<style>
    div{
        background: #ccc;
        width:500px;
        height:500px;
        position:absolute;
        left:-300px;
    }
</style>
<body>
    <div></div>
</body>
</html>

该问题已被官方收录

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;
    }

去第页

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