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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

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

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

该问题已被官方收录

用hover实现折叠菜单

0

1

hover

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>
    /* nav */
ul,li{
    list-style: none;
}
.xiuzhenyuan{
    display: inline-block;
}    
.nav {
    position: relative;
    margin: 20px 0;
}
.menu{
    display: inline-block;
    position: absolute;
    right: 0px;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    margin: 0 5px 10px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.nav a {
    padding: 3px 12px;
    text-decoration: none;
    color: #999;
    line-height: 100%;
}
.nav a:hover {
    color: #000;
}

button div{
    width: 15px;
    height: 2px;
    background: gray;
    margin-bottom: 1px;

}
button{
    display: none;
}
.collapsed-menu{
        display: none;
    }


/* <!-- 媒体查询 --> */
@media screen and (max-width: 768px) {
    
    button{
        display: block;
        display: inline-block;
        position: absolute;
        right: 0;
    }

    button:hover.collapsed-menu{
        display: block;
    }

    .menu{
        display: none;
    }
    
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }
} 

.collapsed-menu li{
    color: gray;
    padding: 5px 0;
}

.collapsed-menu{
    width: 100px;
    height: 150px;
    border: 1px solid #dedede;
    border-radius: 10px;
    position: absolute;
    right: 0;
}


</style>



</head>
<body>
    
<nav class="nav">
<div class="xiuzhenyuan">修真院|技能树</div>

<button>
    <div></div>
    <div></div>
    <div></div>
</button>

<ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">职业</a></li>
    <li><a href="#">推荐</a></li>
    <li><a href="#">关于</a></li>
</ul>
</nav>

<ul class="collapsed-menu">
    <li>首页</li>
    <li>职业</li>
    <li>推荐</li>
    <li>关于</li>
</ul>



</body>
</html>

该问题已被官方收录

css实现纯轮播图时轮播的图片如何与左右按钮绑定，实现点击图片轮转？

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="boxx7">

      <div class="boxx7-1"><
        <label for="lunbo1"></label>
        <label for="lunbo2"></label>
        <label for="lunbo3"></label>
      </div>



        <input type='radio' id='lunbo1' name="only">
        <input type='radio' id='lunbo2' name="only">
        <input type='radio' id='lunbo3' name="only">
        <ul class="boxx7-2">
          <li class="boxx7-3"><img src="background-pic1.jpg" style="width: 100vw;"></li>
          <li class="boxx7-3"><img src="background-pic2.jpg" style="width: 100vw;"></li>
          <li class="boxx7-3"><img src="background-pic3.jpg" style="width: 100vw;"></li>
        </ul>

     </div>

/*轮播图开始*/
.boxx7{
  overflow: hidden;
  width: 100%;
}
.boxx7-1{
  position: absolute;
  top: 12rem;
  margin: 1.5rem 0;
  font-size: 4rem;
}
.boxx7-2{
  padding: 0;
  width: 300vw;
  list-style: none;
  transition: 0.5s ease-out;
}
.boxx7-3{
  float: left;
}

     input:nth-of-type(1):checked ~ ul{
            margin-left: 0%;
        }

        #lunbo2:checked ~ ul{
            margin-left: -100%;
        }

        #lunbo3:checked ~ ul{
            margin-left: -200%;
        }

 /*当radio选中后，相应的下一个左箭头移动到图片的上层以供点击*/
        input:nth-of-type(1):checked ~ .boxx7-1 label:nth-of-type(2)
        input:nth-of-type(2):checked ~ .boxx7-1 label:nth-of-type(3)
        input:nth-of-type(3):checked ~ .boxx7-1 label:nth-of-type(1)

该问题已被官方收录

表格的边框显示不出来

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

该问题已被官方收录

用css画的圆形显示会变形，不报错但是圆形的形状会改变

2

1

CSS图标

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  .circle1{
            display: inline-block;
            width: 2vw;
            height: 2vw;
            border-radius: 50%;
            /*border: 1px solid #e1e5e7;*/
            background-color: #e1e5e7;
            position: absolute;
            left: 40%;
            top: 80%;
            /*z-index: 4;*/
        }

该问题已被官方收录

如何用纯CSS写一个手动轮播图

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" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="task14.css">
</head>
<body>
</body>
</html>

该问题已被官方收录

组件库改如何引用？

0

1

组件库

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

axios({
  method: 'get',
  url: '/static/style/cart.json',
  data: {
 
  }
 })
<script type="text/javascript" src="static/style/vue.min.js"></script>
<script type="text/javascript" src="static/style/vue-resource.min.js"></script>
<script type="text/javascript" src="static/style/cart.js"></script>
cartView:function(){
 var _this=this //记得写在get上面，不然取不到值
 this.$http.get('/static/style/cart.json',{'id':123}).then(function(res){
 this.pro=res.body.name;
 //_this.produceList=res.body.result.list;
 console.log(res.body.name)
 })
}

该问题已被官方收录

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

}

该问题已被官方收录

左右切换按钮点击切换图片

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="rotation-chart">
            <div class="images">
                <img src="../img/h.png" height="360px">
                <img src="../img/m.png" height="360px">
                <img src="../img/z.png" height="360px">
            </div>
            <a class="left" href="#"></a>
            <a class="right" href="#"></a>
            <ul class="indicators">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

.rotation-chart{
    position: relative;
    width: 100%;
    overflow: hidden;
    //轮播图片
    .images{
        width: 300vw;
        white-space: nowrap;
        animation: Naruto 10s linear infinite; //线性  重复循环
        img{
            margin-right: -.1rem;
            width: 100vw;
        }
    }
    @keyframes Naruto {
        0%    {transform: translate(0,0);}
        11.11%  {transform: translate(0,0);}
       22.22%  {transform: translate(-33.3%,0);}
       33.33%  {transform: translate(-33.3%,0);}
       44.44% {transform: translate(-66.6%,0);}
       55.55%  {transform: translate(-66.6%,0);}
       66.66% {transform: translate(-33.3%,0);}
       77.77% {transform: translate(-33.3%,0);}
       88.88% {transform: translate(0,0);}
       100% {transform: translate(0,0);}
    }
    //左切换
    .left{
        position: absolute;
        top: 50%;
        margin-top: -.2rem;
        left: 15%;
       @include w-h(.4rem,.4rem);
        border-top: .1rem solid $bg;
        border-left: .1rem solid $bg;
        transform: rotate(-45deg);
    }
    //右切换
    .right{
        position: absolute;
        top: 50%;
        margin-top: -.2rem;
        right: 15%;
       @include w-h(.4rem,.4rem);
        border-top: .1rem solid $bg;
        border-right: .1rem solid $bg;
        transform: rotate(45deg);
    }
    //指示符
    .indicators{
        position: absolute;
        bottom: 15%;
        left: 50%;
        margin-left: -.5rem;
        @include flex(space-between);
        @include w-h(1rem,.2rem);
        li{
            @include w-h(.16rem,.16rem);
            border-radius: 50%;
            border: .01rem solid $bg;
        }
    }
    
}

该问题已被官方收录

怎么用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)
        }
    }
}

去第页

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