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

1

占位符 Sass 响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

%icon {  transition: background-color ease .2s;  margin: 0 .5em;}

@media screen { 

     .info-icon {    @extend %icon;  }

}

该问题已被官方收录

能不能在把hover写在一块

0

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
			<div class="row text-left">
				<div class="col-md-3 first">
						<div class="squ"></div>
						<div class="cir">1</div>
						<div class="text-font">1.定制纸箱</div>
				</div>

.first {
	padding: 20px 0;
}
.squ {
	background-color: #ccc;
  	height: 5px;
  	width: 100%;
  	border-radius: 2px;
}
.cir {
	text-align: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #ccc;
	position: relative;
	top: -15px;
	left: 40%;
	color: #fff;
}
.text-font {
	text-align: center;
	color: #ccc;
}
.first:hover .squ {
	background-color: #ff7f02;
}
.first:hover .cir {
	background-color: #ff7f02;
}
.first:hover .text-font {
	color: #ff7f02;
}

该问题已被官方收录

如何让胶囊式导航栏实现下拉的动画效果

0

1

css动画导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  .nvb-ul {
    display: none;
    text-align: center;
    width: 100%;
    padding: 0;
    height: auto;
    transition: display .5s ease;//这里是报错的
  }
  .nvb-li {
    background-color: #29b078;
    line-height: 3rem;
    border-bottom: none!important;
    overflow-x: hidden;
    width: 100%;
    &:first-child {
      border-top: .1rem solid #fff;
    }
  }
}
#menu:checked~ .nvb-ul {
  display: block;
}

该问题已被官方收录

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

该问题已被官方收录

hover子元素(div="bastard")没有办法居中

1

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css:
.grandpa{ 
    background: #29bde0;
    /*width: 90%;
    height: 90%;*/
    
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: row;
    margin: 10px auto;
  }  
      
  .dad{
      width: 31vw;
      height: 31vw;
      background: #29bde0;
  }  
  
  .son{
      width: 20vw;
      height: 20vw;
      background: yellow;
      margin: 0 auto;
      display: flex;
      flex-direction:column;
      background: #f5c97b;
      border: 2px solid white;
  }
  .para1{
      flex:2;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .para2{
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #83b09a;
      color: white;
  }
  
  .bastard{
      width: 20vw;
      line-height: 10vw;
      margin: 0 auto;
      background: #29bde0;
      display: none;
      
  }
  .bastard img{
      width: 4vw;
      height: 4vw;
      margin-right: 1px;
  }
  /*hover the son element*/
  .dad:hover>.bastard{
      display: block;
  }
  
html:
<div class="grandpa">

        <div class="dad">
            <div class="son">
                <span class="para1">水民</span>
                <span class="para2">1号</span>
            </div>
            <div class="bastard">
                <img src="./p2-sprite1.png"><img src="./p2-sprite2.png"><img src="./p2-sprite3.png"><img src="./p2-sprite4.png">
            </div>
        </div>

该问题已被官方收录

表格的边框显示不出来

0

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@charset"UTF-8";
@import"_layout";
// job主体
main.job {
    .home-box {
        padding: .31rem 0;
        border-bottom: $main-border;
        .black-font {
            font-size: .16rem;
            color: $black;
        }
        .green-font {
            font-size: .16rem;
            color: $green;
        }
    }
    .direction-box {
        padding: .23rem 0;
        border-bottom: $main-border;
        .direction {
            line-height: .14rem;
            font-size: .14rem;
            color: $text;
        }
        .option-box {
            margin: 0;
            padding: 0;
            .option {
                line-height: .14rem;
                font-size: .14rem;
                color: $black;
                &:hover {
                    background: $green;
                    color: $white;
                }
            }
        }
    }
    @media(max-width:575px) {
        .center {
            line-height: .6rem;
            text-align: center;
        }
    }
    .headline-box {
        padding: .31rem 0;
        border-bottom: $main-border;
        font-size: .16rem;
        color: $black;
    }
    .intro-box {
        position: relative;
        margin-top: .47rem;
        perspective: 1000;
        transform-style: preserve-3d;
        .shade {
            visibility: hidden;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 2.8rem .93rem 1.76rem .82rem;
            background: rgba(8, 1, 3, 0.6);
            font-size: .16rem;
            color: $white;
            transition: 0.6s;
            transform-style: preserve-3d;
        }
        &:hover .shade {
            visibility: visible;
            transform: rotateY(360deg);
        }
        th.width1 {
            width: 40%;
        }
        th.width2 {
            width: 10%;
        }
        th.width3 {
            width: 50%;
        }
        tr.box {
            border: $main-border;

            .picture {
                margin: .2rem .08rem .16rem .11rem;
            }
            @media(max-width:375px) {
                .picture {
                    @include box(1.85rem, 1.85rem);
                    margin: .2rem .08rem .16rem .3rem;
                }
            }
            @media(min-width:376px) and (max-width:470px) {
                .picture {
                    @include box(2.1rem, 2.1rem);
                    margin: .2rem .08rem .16rem .5rem;
                }
            }
            @media(min-width:490px) and (max-width:767px) {
                .picture {
                    margin: .2rem .08rem .16rem .6rem;
                }
            }
            strong.font {
                font-size: .16rem;
                color: $black;
            }
            p.font {
                margin: .16rem .09rem 0 0;
                font-size: .14rem;
                color: $black;
            }
        }
        .standard-font{
            padding: .28rem  .1rem;
            font-size: .12rem;
            color: $text;
            border: $main-border;

            .wjx::after{
                display: inline-block;
                content:"";
                @include box(.16rem,.16rem);
                margin-left:.24rem;
                background: url(../picture/task-css14.png) no-repeat 0 -2.66rem;
            }
            .wjx2::before{
                display: inline-block;
                position: absolute;
                content:"";
                @include box(.16rem,.16rem);
                margin: .12rem 0 0 1.48rem;
                background: url(../picture/task-css14.png) no-repeat 0 -2.66rem;
            }
            .red{
                font-size: .12rem;
                color: #F01400;
            }
            .black{
                font-size: .12rem;
                color: $black;
            }
            .center{
                display:block;
                text-align: center;
            }
            .left{
                margin-left: .24rem;
            }
            .right-txet{
                float: right;
            }
        }
    }
    @media (min-width:767px) and (max-width: 991px){
        .col-sm-6 {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
    @media(max-width:767px){
        .col-12{
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
}

该问题已被官方收录

做下拉菜单时，发现下拉菜单的宽度会继承row的宽度

0

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 第二行右侧下拉选框  */

.down-line {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.down-line button {
    display: inline-flex;
    align-items: center;
    width: 1.27rem;
    height: .37rem;
    border: 1px solid #f2f2f2;
    font-size: .14rem;
    color: #999999;
    background-color: #ffffff;
    outline: none;
}

/* 右侧下拉图标 */

.down-box {
    display: inline-block;
    width: .24rem;
    height: .28rem;
    margin-left: .25rem;
    border-radius: .05rem;
    background: #1d7ad9;
}

.down-box::after {
    content: "";
    position: absolute;
    margin-top: 0.08rem;
    margin-left: -.07rem;
    border-left: .07rem solid transparent;
    border-right: .07rem solid transparent;
    border-top: .12rem solid #ffffff;
}

/*下拉菜单*/

#downlist {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 100%;
    z-index: 1000;
    display: none;
    width: 1.27rem;
    height: 100%;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
}

#downlist.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

#downlist li a {
    display: block;
    padding: 0;
    clear: both;
    color: #212529;
    font-size: .14rem;
    text-decoration: none;
}
html代码
<div class="col-md-3 col-sm-12 view-details">
                    <div class="down-line">
                        <button data-toggle="collapse" data-target="#downlist2">
                            查看详情
                            <span class="down-box"></span>
                        </button>
                        <ul id="downlist2" class="collapse">
                            <li>
                                <a class="" href="#">xxxx</a>
                            </li>
                        </ul>
                    </div>
                </div>

该问题已被官方收录

怎么用sass方便的编译栅格布局

0

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$grid: ( xm:0px, sm :768px, md:992px, lg:1200px);
@mixin reactive($para, $list) {
    @each $e, $px in $grid {
        @media screen and (min-width: $px) {
            #{$para}:map-get($map:$list, $key: $e)
        }
    }
}

该问题已被官方收录

在设置媒体查询的时候,没有层级的观念，随意摆放，想要达成的效果不一

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@media (max-width: 768px) {
	.nav-1 {        
		width: 100%;
	}
	.contact  {
		width: 100%;
	}
	.picture span {
		margin-left: 8rem;
		font-size: 2rem;
	}
	.picture a {
		font-size: 5rem;
	}
	.picture p {
		font-size: 2.2rem;
		padding-left: 1rem;
	}
	.contact a {
		display: none;
	}
	.nav ul {
		margin-right: 0;
		margin-bottom: 0;
		width: max-content;
	}
	
	.piece {
		width: 100%;
		text-align: center;
	}
	.weap {
		width: 100%;
	}
	.top-method {
		position: relative;
	}
	.method img {
		margin-right: 1rem;
		position: absolute;
		right: 1rem;
		top: 1.2rem;
	}
	.method span {
		width: 100%;
	}
	.stud {
		height: 40rem;
		text-align: center;
	}
	.stud .blue {
		width: 27rem;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
	.company img {
		height: initial;
		text-align: -webkit-center;
	}
	.company .logo {
		height: initial;
	}
	.fa {
		width: 100%;
	}
	.fa li {
		font-size: 1rem;
	}
	.fa span {
		width: 1.4rem;
	}
	.company .logo {
		width: 100%;
	}
	.fa li {
		width: 4rem;
	}
	.left-ending p {
		margin-bottom: 0;
	}
	.ending-1 {
		width: 100%;
		height: 30rem;
	}
	.centre-ending p {
		margin-bottom: 0;
	}
	.right-ending {
		text-align: -webkit-auto;
		margin-top: 1rem;
	}
	.look {
	width: 100%;
	height: 30rem;
	text-align: center;
}
.typeface {
    margin-top: 10rem;
}
.typeface ul {
	margin-top: 0;
}
.contact img {
	display: none;
}
.good{
	position: absolute;
	top: 30%;
}
}

webstorm里面检测不到git

1

1

代码管理 git

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

去第页

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