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的时候是否可以一直用nth:child 嵌套，而不编写类名？

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html {
    font-size: 625%;
}

body {
    font-size: .14rem;
    margin: 0;
    padding: 0;
}

button {
    outline: none;
    border: none;
    color: none;
}

header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .1rem;
    background-color: #5FC0CD;
    @mixin button-style {
        width: .72rem;
        height: .35rem;
        font-size: .17rem;
        font-family: serif;
        border-radius: .05rem;
        font-weight: 300;
    }
    & :first-child {
        @include button-style;
        color: #fff;
        background-color: #55A8B3;
    } // 页眉左
    & :nth-child(2) {
        margin-left: -.05rem;
        @include button-style;
        color: #5FC0CD;
        background-color: #fff;
    } // 页眉中
    & :last-child::before {
        content: "";
        position: absolute;
        right: .35rem;
        top: .165rem;
        display: inline-block;
        background: url(../I/page2.png)no-repeat;
        width: 21px;
        height: 22px;
        background-position: 0 -33px;
    } // 页眉右
}

// 页眉
.nav-style {
    display: flex;
    justify-content: space-between;
    margin-top: .55rem;
    border-bottom: 1px solid #E1E5E7;
    &>:nth-child(2) {
        border-left: 1px solid #E1E5E7;
        border-right: 1px solid #E1E5E7;
    }
} // 包含整个菜单栏的样式
.navigation {
    @mixin navigation-style {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .03rem 0;
        padding: .1rem 0;
        color: #999;
    } // 菜单栏三栏通用样式
    @include navigation-style;
    position: relative;
    width: 100%;
    span {
        flex-basis: 80%;
        text-align: center;
    } // 导航栏样式
    &:hover>.menu {
        display: block;
    } // 隐藏内容显现
    & i::after {
        content: "";
        display: inline-block;
        border: .04rem solid transparent;
        border-top: .06rem solid #AFBAC0;
        width: 0;
        height: 0; // 下拉三角形
    }
    .menu {
        position: absolute;
        display: none;
        top: .42rem;
        width: 100%;
        background: #fff; // 隐藏内容
        span {
            display: block;
            box-shadow: 1px 1px 1px #E1E5E7;
            padding: .1rem 0; // 显示内容后的样式
            &:hover {
                background-color: #5FC0CD;
                color: #fff;
            }
        }
    }
}

// 每栏菜单样式
.main-content-style {
    display: flex;
    justify-content: space-between;
    padding: .05rem .15rem;
    border-bottom: 1px solid #E1E5E7;
    span {
        display: block;
    }
    .sheet-left {
        overflow: hidden;
        span {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        @mixin font-style {
            color: #999;
            font-size: .13rem;
            margin: .1rem 0;
        }
        span:nth-child(1) {
            @include font-style;
        } // 表格左第一行字体
        span:nth-child(1)::before {
            content: "";
            margin-right: .07rem;
            background: url(../I/page2.png)no-repeat;
            width: 12px;
            height: 12px;
            background-position: 0 -113px;
            display: inline-block;
        } // 表格左第一行图标
        span:nth-child(2) {
            margin-left: .19rem;
            font-size: .14rem;
            color: #333;
        } // 表格左 第二行
        span:nth-child(3) {
            @include font-style;
        } // 表格左第三行
        span:nth-child(3)::before {
            content: "";
            margin-right: .07rem;
            background: url(../I/page2.png)no-repeat;
            width: 10px;
            height: 12px;
            background-position: 0 0;
            display: inline-block;
        } // 表格左第三行图标
    } // 表格左
    .sheet-right {
        display: flex;
        align-items: center;
        white-space: nowrap;
        span {
            display: flex;
            align-items: center;
            color: #E63B0E;
            font-size: .15rem;
        } // 表格右字体
        span::after {
            content: "";
            margin-left: .1rem;
            background: url(../I/page2.png)no-repeat;
            width: 10px;
            height: 17px;
            background-position: 0 -96px;
            display: inline-block;
        } // 表格右图标
    }
}

.bottom-footer-gap {
    margin-bottom: .7rem;
}

// 最后一行表格和页脚的距离，页脚设置了fixed定位
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .06rem 0;
    background-color: #F8FAFB; // 页脚样式
    .footer-left {
        text-align: center;
        i:before {
            content: "";
            display: inline-block;
            background: url(../I/page2.png)no-repeat;
            width: 23px;
            height: 20px;
            background-position: 0 -55px;
        }
        span {
            a {
                color: #5FC0CD;
                text-decoration: none;
            }
        }
    } // 页脚左边文字和图标
    .footer-center {
        display: flex;
        justify-content: center;
        align-items: center;
        width: .57rem;
        height: .57rem;
        border-radius: 50%;
        background-color: #5FC0CD;
        i::before {
            content: '';
            display: inline-block;
            background: url(../I/page2.png)no-repeat;
            width: 20px;
            height: 21px;
            background-position: 0 -12px;
        }
    } // 页脚中间文字和图标
    .footer-end {
        text-align: center;
        i::before {
            content: "";
            display: inline-block;
            background: url(../I/page2.png) no-repeat;
            width: 21px;
            height: 21px;
            background-position: 0 -75px;
        }
    } // 页脚右边文字和图标
}

该问题已被官方收录

使用sass写组件化文件_bootstrap.scss时，媒体查询未完全生效

1

1

媒体查询

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//媒体查询的基本设置
//xl
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}
//lg
@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}
//md
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
//sm
@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}
//列的媒体查询
$list:(sm:576px, md:768px, lg:992px, xl:1200px);

@each $q,
$w in $list {
  @media (min-width: $w) {
    @for $var from 1 through 12 {
      .col-#{$q}-#{$var} {
        flex: 0 0 100%/12*$var;
        position: relative;
        width: 100%/12*$var;
        margin: 0 15px;
      }
    }
  }
}

  @for $var from 1 to 12 {
    .col-#{$var} {
      flex: 0 0 100%/12*$var;
      position: relative;
      width: 100%/12*$var;
      margin: 0 15px;
    }
}

该问题已被官方收录

用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模拟轮播图的时候如何实现点击效果与animation效果共存？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.loop-wrap {
    position: relative;
    width: 100%;
  
    overflow: hidden;
    .loop-images-container {
        
        width: 300vw;
        /* 横向排列 3张图片 宽度应为主容器3倍 */
        font-size: 0;
        transform: translate(0, 0);
        /* 初始位置位移 */
        animation: loop 10s linear infinite;
        .loop-image {
            width: 100vw;
            
        }
    }
    .focus-container {
        @include flex-center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5%;
            li {
                float: left;
                width: .1rem;
                height: .1rem;
                border-radius: 50%;
                margin: 0 .05rem;
                border: 1px solid #fff;
            }
        
    }
}

@keyframes loop {
    0% {
        transform: translate(0, 0);
    }
    30% {
        transform: translate(0, 0);
    }
    /* 停留1500ms */
    35% {
        transform: translate(-33.3%, 0);
    }
    /* 切换500ms 位移-20% */
    60% {
        transform: translate(-33.3%, 0);
    }
    65% {
        transform: translate(-66.6%, 0);
    }
    95% {
        transform: translate(-66.6%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
    /* 复位到第一张图片 */
}

该问题已被官方收录

如何用固定定位fixed来实现任务十二选项框，fixer和absolute的区别

2

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.footer{
     position: fixed;
     left: 0;
     bottom: 0;
     right: 0;
     .tele{
       width:43vw;
       height:12vw;
       border-radius:0.6vw;
       border:none;
       outline: none;
       font-size:4.17vw;
       margin-bottom:3vw;
       margin-left:4.5vw;
     }
     .tele1{
       background:white;
       border: solid #5fc0cd 0.2vw;;
       color:#5fc0cd;
     }
     .tele2{
       background:#5fc0cd;
       color: #FFFFFF;
     }

该问题已被官方收录

github organizations push文件失败

0

1

git

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

关于Buton的一个疑问

1

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.btn-left,
.btn-right {
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
}
.btn-right {
    float: right;
    margin-right: 1rem;
}
.btn-left {
    float: left;
    margin-left: 1rem;
}

该问题已被官方收录

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>

该问题已被官方收录

文字环绕图片

1

1

浮动

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="kuaitou">
                            <div>
                                <img src="../images/zhiweitouxiang.jpg">
                            </div>
                            <div>
                                <h1>Web前端工程师</h1>
                                <p>
                                    Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。
                                </p>
                            </div>
                        </div>

该问题已被官方收录

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

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>

去第页

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