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

}

该问题已被官方收录

响应式栅格布局如何居中

1

1

响应式居中 bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

       <div class="how"><b>战略合作企业</b></div>
        <div class=" col-md-2 col-md-offset-1 col-xs-4  ">
            <div class="cooperation cooperation1"></div>
        </div>
        <div class="col-md-2 col-xs-4 ">
            <div class=" cooperation cooperation2"></div>
        </div>
        <div class="col-md-2  col-xs-4 ">
            <div class=" cooperation cooperation3"></div>
        </div>
        <div class="col-md-2 col-xs-4">
            <div class=" cooperation cooperation4"></div>
        </div>
        <div class="col-md-2  col-xs-4">
            <div class=" cooperation cooperation5"></div>
        </div>

该问题已被官方收录

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

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

该问题已被官方收录

照片多余的怎么办？

2

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="../css/task8.2.css">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="wrap">
    <div class="container">
        <div class="header-main">
            <span>客服热线：010-594-78634</span>
            <div class="vx">
                <img src="../img/task8...png"  alt="">
                <img src="../img/task.8..png" alt="">
                <img src="../img/task.81.png"  alt="">
            </div>
        </div>
    </div>
    <div class="navigation">
        <div class="container">
            <div class="option">
                <div class="page">首页</div>
                <div class="profession">职业</div>
                <div class="recommend">推荐</div>
                <div class="regard">关于</div>
            </div>
        </div>
    </div>
            <div class="item active ">
                <img src="../img/task.8.223.png" alt="...">
            </div>
    <div class="container">
        <span>首页</span>>
        <span class="firm">合作企业</span>
    </div>
</div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
.wrap{
    background: #fafafa;
}
.header-main{
    width: 100%;
    color: #29b078;
    display: flex;
    justify-content:space-between ;
    margin-top:1rem;
    margin-bottom: 0.5rem;
}
.navigation{
    width: 100%;
    background: #29b078;
    height:9.4rem;
}
.xte{
    width: 100%;
}
.option{
    font-size: 2.5rem;
    display: flex;
    float: right;
    color: #ffffff;
    margin-top: 3.5rem;
}
.page{
    margin-right: 1.5rem;
}
.page:hover{
    color: #fff;
    background-color: transparent;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.profession{
    margin-right: 1.5rem;
}
.profession:hover{
    color: #fff;
    background-color: transparent;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.recommend{
    margin-right: 1.5rem;
}
.recommend:hover{
    color: #fff;
    background-color: transparent;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.regard{
    margin-right: 1.5rem;
}
.regard:hover{
    color: #fff;
    background-color: transparent;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.firm{
    color:#29b078;
}

该问题已被官方收录

雪碧图和文字放在同一个元素，文字换行显示

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>详情</title>
    <style pyte="txet/css">
html { 
    font-size:312.5%; 
} 
body { 
    margin:0 ;
    font-size: initial;  
}
header {
    position: sticky;
    top:0;
    height: .88rem;
    background-color: #5FC0CD;
    line-height: .88rem;
    text-align: center;
    word-spacing:-.16rem;
    z-index: 1;
}
.guzhu{
    width:1.44rem;
    height: .7rem;
    border-radius:.15rem;
    border: none;
    background-color:#55A8B3;
    outline: none; 
    font-size: .34rem;
    color:#FFFFFF;
}
.hugong{
    width:1.44rem;
    height: 0.7rem;
    border-radius: .15rem;
    border: none;
    background-color:#FFFFFF;
    font-size: .34rem;
    font-size: 0.34rem;
    outline: none; 
    color:#55A8B3;
}
.top-right{
    float: right;
    width: .42rem;
    height: .42rem;
    margin: .22rem .3rem 0 -.5rem;
    background:url(task7-css6.png) no-repeat 0 0;

}
.box{
    display:flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    background-color:#FFFFFF;
}

/* 下拉框 */
.dropdown {
    flex: 1;
    position: relative;
    display: inline-block;
    border-top:0.01rem solid #e1e5e7;
    border-bottom: 0.01rem solid #e1e5e7;
    line-height:0.8rem;
    text-align: center;
    font-size:0.28rem;
    color:#999999;
}
.sjx{
    float: right;
    border-width: 0.1rem;
    border-style: solid;
    border-color: #AFBAC0 transparent transparent transparent;
    margin: 0.36rem 0.12rem 0 0;
}
ul,li{
    margin: 0;
    padding:0;
    list-style: none;
}

/* 下拉菜单 */
.dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #f9f9f9;
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* 下拉项点击颜色 */
li.li:hover{
    background-color: #5FC0CD;
}
.main-box{
    display: flex;
    align-items: center;
    height: 1.8rem;
    border-bottom: .001rem solid #E1E5E7;
    background: #FFFFFF;
}
.content-box{
    width: 100%;
    height: 1.2rem;
    border: .01rem solid red;
    line-height: 1.2rem;
}
.date{
    height: .3rem;
    padding-left: .4rem;
    margin: 0 0 0 .3rem;
    background: url(task7-css6.png) no-repeat 0 -.6rem;
    font-size:.24rem;
    /* 字符间距 */
    letter-spacing: .03rem;
    color: #999999;
}

    </style>
</head>
<body>
    <header>
        <button type="button" class="guzhu">找雇主</button>
        <button type="button" class="hugong">找护工</button>
        <a class="top-right" href="www.xxxxx.com"></a>  
    </header>
    <main>
        <div class="box">
            <div class="dropdown">
                <span>所在地
                    <span class="sjx"></span>
                </span>
                <ul class="dropdown-content">
                    <li class="li">北京</li>
                    <li>上海</li>
                    <li>苏州</li>
                </ul>
            </div>
            <div class="dropdown">
                <span>食宿
                    <span class="sjx"></span>
                </span>
                <ul class="dropdown-content">
                    <li>一日一餐</li>
                    <li>一日两餐</li>
                    <li>一日三餐</li>
                </ul>
            </div>
            <div class="dropdown">
                <span>病人情况
                    <span class="sjx"></span>
                </span>
                <ul class="dropdown-content">
                    <li>能自理</li>
                    <li>不能自理</li>
                    <li>手术后</li>
                </ul>
            </div>
        </div>
        <ul>
            <li class="main-box">
                <ul class="content-box">
                    <li class="date">服务日期</li>

                </ul>
            </li>
        </ul>
    </main>

</body>
</html>

该问题已被官方收录

导航标签栏的左边在屏幕缩小会缩下去

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="box12"></div>
                <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#" class="headleft1" onmouseover="this.style.color='white'">首页
                                <span class="whitebox1"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="headleft1" onmouseover="this.style.color='white'">职业
                                <span class="whitebox1"></span>

                            </a>
                        </li>
                        <li>
                            <a href="#" class="headleft1" onmouseover="this.style.color='white'">推荐
                                <span class="whitebox1"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="headleft1" onmouseover="this.style.color='white'">关于
                                <span class="whitebox1"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

该问题已被官方收录

使用display:inline-block属性做九宫格不能三格一行

2

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>flextest1</title>
    <style type="text/css">
    *{ 
        margin: 0; 
        padding: 0; 
    } 
    
    
    .box{
        display: inline-block;
        padding-left: 31.33%; 
        padding-bottom: 31.33%; 
        background-color: orange;
        margin: 1%;
        border-radius: 10%;
    }
    </style>
</head>
<body>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
</body>
</html>

该问题已被官方收录

怎么用纯css3写一个轮播图

2

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/demo.css">
    <title>轮播图（纯CSS）</title>
</head>
<body>
<div class="wrap">
    <div class="viewport">
        <img src="../image/pic1/pic-a.png" alt="#">
        <img src="../image/pic1/pic-b.png" alt="#">
        <img src="../image/pic1/pic-c.png" alt="#">
        <img src="../image/pic1/pic-a.png" alt="#">
    </div>
</div>
</body>
</html>


CSS：
body {
     margin: 0;
     padding: 0;
    line-height: 1;
 }
html {
    font-size: 62.5%;
}
.wrap {
    width: 100vw;
    overflow: hidden;
}

.viewport {
    position: relative;
    width: 400vw;
    clear: both;
    -webkit-animation-name: carouse;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
}
@keyframes carouse {
    0% {
        left: 0;
}
    10% {
        left: 0;
    }
    30% {
        left: -100vw;
    }
    40% {
        left: -100vw;
    }
    60% {
        left: -200vw;
    }
    70% {
        left: -200vw;
    }
    90% {
        left: -300vw;
    }
    95% {
        left: -300vw;
    }
}
.viewport>img {
    width: 100vw;
    float: left;
}

该问题已被官方收录

saas继承没有作用

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//变量
$eliminate:0;
$blue:#29BDE0;
$white:#FFFFFF;
$text:auto;
$font:.26rem;
$width:80%;


//混合器
@mixin flex($x:center,$y:center){
    display: flex;
    justify-content:$x;
    align-items: $y;
}
@mixin guding{
    position: fixed;
    width: 100%;
}
@mixin box($w:.51rem,$h:.6rem){
    width: $w;
    height: $h;
}

@mixin font{
    width:$width;       
    font-size: $font;
    color: #A6A6A6;
}
@mixin button{
    width: 50%;
    height: .86rem;
    border-radius: .15rem;
    font-size: .4rem;
    color: #FFFFFF;
    
}




html{
    font-size: 312.5%;
}
body{
    padding: .72rem 0 1.2rem 0;
    margin: $eliminate;
    font-size: initial;
}
p{
    margin: $eliminate;
}

/*header 眉页*/
header{
    @include flex(space-between, center);
    @include guding;
    top: 0;
    /* border半透明 */
    border-bottom: .01rem solid rgba(200,200,200,.95);
    background: $blue;
    font-size:.34rem;
    /* 字符间距 */
    letter-spacing: .04rem;
    color: $white;

    a.left-header{
        @include box;
        margin: .1rem 0 0 .2rem;
        background: url(picture/task-css12.png) no-repeat -2.2rem -1.9rem;
    }
    a.right-header{
        @include box;
        margin:.1rem .2 rem 0 0 ;
        background: url(picture/task-css12.png) no-repeat -.96rem -1.95rem;
    }
}

/*main 主体*/
div.box{
    padding-top: .29rem;
    background: $blue;

    .logo{
        @include box(3.51rem,2.1rem );
        margin: $text;
        background: url(picture/task-css12.png) no-repeat -4.16rem 0;

        .logo-font{
            position: absolute;
            margin:1.3rem 0 0 .7rem;
            font-size: .48rem;
            /* 字符间距 */
            letter-spacing: .05rem;
            color: $white;
        }
    }
    p.introduce{
        width: $width;
        margin: .3rem $text .61rem $text;
        font-size: .33rem;
        color: #FFC865;
    }
    p.time{
            width: $width;
            margin: $text;
            font-size:$font;
            color: $white;

    }
    div.center-box{
        @extend .time;
        display: flex;

        span.font{
            margin-right: .5rem;
        }
    }

}

该问题已被官方收录

F12，再不同的缩放比例下，列表框的下拉框的大小不一

1

1

开发者工具

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

去第页

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