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"> 代码

 <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"> 文本

该问题已被官方收录

scss中@media中无法使用@extend。

0

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

%border-color{
    border-color: red;
};
div{
    @media screen {
        margin:10px;
        @extend %border-color;
    }
}

该问题已被官方收录

session保留在不同的web服务器下，结果不一样

0

1

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

使用perspective-origin 3D旋转没有反应怎么回事？

0

1

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="veil">
                <p class="veil-1">iOS工程师</p>
                <p> iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属 于类Unix的商业操作系统。国内iOS开 发起步相对较晚，人才培养机制更是远 远跟不上市场发展速度。有限的iOS开 发人才成了国内企业必争的资源。国内 iOS开发起步相对较晚，人才培养机制 更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。</p>
            </div>

.veil {
        width: 36.5rem;
        height: 44.3rem;
        background: #120e0b;
        opacity: 0;
        position: absolute;
        padding: 8.5rem 4.3rem;
        color: #FFFFFF;
        font-size: 1.4rem;
        transition:all 2s;
        transform-origin: 50% 0;
        .veil-1 {
          text-align: center;
          margin-bottom: 3.5rem;
        }
      }

该问题已被官方收录

如何让侧边导航栏推走footer？

1

1

侧边栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

footer {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: .85rem;
    background: #29bde0;
    div {
        width: 100%;
        line-height: .85rem;
        border-top: 1px solid white;
        text-align: center;
        button {
            vertical-align: middle;
            width: 60%;
            height: 0.435rem;
            font-size: 0.2rem;
            color: white;
            background: #fbb435;
        }
    }
}

.box {
    position: relative;
    overflow: hidden;
    input {
        display: none;
    }
    .side-nav {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 70%;
        background: white;
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: .5rem;
                border-bottom: 1px solid #999999; 
                list-style: none;
                &::after {
                    content: "";
                    display: inline-block;
                    width: .16rem;
                    height: .16rem;
                    transform: rotate(45deg);
                    border-top: 3px solid #69D1E9;
                    border-right: 3px solid #69D1E9;
                    margin-right: .1rem;
                }
                &:hover {
                    background: #f0f0f0;
                }
            }

    }
    #sidemenu:checked~.content {
        margin-left: 70%;
    }
    .content {
        position: relative;
        overflow: hidden;
        transition: margin-left 1s;
    }
}

该问题已被官方收录

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

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>

去第页

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