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转译出的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进行环境搭建

0

2

Sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

用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写的媒体查询，编译成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;
}

该问题已被官方收录

如何配置aginx

0

1

跨域工具nginx

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

server {
		listen       1007;
		server_name  localhost;
		 autoindex on;

		location /{
			root  C:/Users/A/Desktop/turnip;

			index  index.html index.htm;
			
		}
		
	    location /carrots-admin-ajax/{ 
		proxy_pass http://dev.admin.carrots.ptteng.com/; 
		}
		
	}
 }

该问题已被官方收录

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

该问题已被官方收录

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

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>

该问题已被官方收录

纯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中的相同变量，不同取值如何正确的使用，才能让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