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-of-type()的问题

0

2

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

先上代码

html

<div class="first">
<div class="star">☆</div>
<p class="text">住家</p>
<div class="star">☆</div>
<p class="text">不含餐</p>
</div>
<div class="second">
<p class="job">从业年限</p>
<p class="years">0~3年</p>
</div>
<div class="second">
<p class="job">工作时间</p>
<p class="years">全天</p>
</div>
<div class="second">
<p class="job">服务价格</p>
<p class="years">25元/小时</p>
</div>
<div class="second">
<p class="job">自我介绍</p>
<p class="years"> 可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富。
</p>
</div>
scss

.second {
@extend %text;
margin-left: .6rem;
.job {
@extend %margin;
padding-right: .26rem;
color: nth($list: $color, $n: 3);
border-right: solid .01rem nth($list: $color, $n: 3);
}
.years {
@extend %margin;
padding-left: .1rem;
&:nth-of-type(3) {
color: #e26163;
}
}
}

该问题已被官方收录

为什么变成2560/2850的时候图片会变成这样？

3

2

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../img/task888png.png" class="xte" alt="Third slide">
            </div>
            <div class="item">
                <img src="../img/task888png.png" class="xte" alt="Third slide">
            </div>
            <div class="item">
                <img src="../img/task888png.png" class="xte" alt="Third slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
*{
    margin: 0;
    padding: 0;
}
.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;
}
.option{
    font-size: 2.5rem;
    display: flex;
    float: right;
    color: #ffffff;
    margin-top: 3.5rem;
    text-indent: 3.5rem;
}
.first-row {
    margin: 10rem 0;
}
.text-first {
    height: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-first-aside {
    border-left: 1px #dedede dashed;
    display: flex;
    justify-content: center;
}

.box-img {
    width: 10rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

该问题已被官方收录

关于使用用hover效果完全覆盖原有的div的方法

1

2

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.hoverbox{                                      

    opacity: 0;                                                                              
}
.hoverbox:hover{                         
    opacity: 1;
}

该问题已被官方收录

option如何居中

1

2

下拉菜单表单元素居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

option {
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
    text-align:center;
}

该问题已被官方收录

纯css的响应式导航栏有什么方法

3

2

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.

该问题已被官方收录

如何实现在响应式过后的文件对齐

2

2

布局响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css
@gerrn:#29b078;
@fff:#fff;
@color:#fafafa;

.dfjsb{
  display:flex;
  justify-content:space-between;
  align-items:center;

}

a{
  text-decoration:none;
}

.yui{
  .dfjsb;
  padding:0 2rem;
}

.rty{
  .dfjsb
}

.dfjsa{
  display:flex;
  justify-content:space-around;
  align-items:center;
}

.dfffr{
  display:flex;
  flex-flow:column;
  align-items:center;
  padding-left:1.5em;
  justify-content:center;
}

.dfrr{
  display:flex;
  flex-direction:row-reverse;
  color:@fff;
}

.tac{
  text-align:center;
}

html{
  font-size:62.5%;
  overflow-x: hidden;
}

body{
  margin:0;
  padding:0;
  background:#fafafa;
}

.hdtp{
  .dfjsb;
  padding:0 2rem;
  .hdct{
    color:@gerrn;
  }
  .hdbm{
    .dfjsb;
    padding-right:2rem;
    width:15%;
  }
}

.hdmn{
  .dfrr;
  justify-content:space-between;
  padding:0 2rem;
  background:@gerrn;
  height:7.2rem;
  font-size:1.6vw;
  .hdmnq{
    display:flex;
    flex-flow:row-reverse;
    width:70%;
    padding-right:2rem;
  }
  .hdmnc{
    text-align:center;
    height:7rem;
    line-height:7rem;
    width:8%;
    &:hover{
      border-bottom:3px solid #fff;
    }
  }
}

@media screen and(max-width:1000px){
  .hdmn .hdmnc{
    width:25%;
  }
}

.mnftr{
  margin-top:1.3em;
}

.setting{
  height:3em;
  margin:0 4em 0 24px;
  font-size:1.6em;
  border-bottom:1px solid #ccc;
  a{
    color:green;
  }
}

.text{
  margin:0 64px 0 2em;
  height:2em;
  border-bottom:1px solid #ccc;
  a{
    color:#000;
    &:hover{
      background:green;
      color:#fff;
    }
  }
}


strong{
  display:block;
  height:3em;
  border-bottom:1px solid #ccc;
  margin:0 64px 0 24px;
  font-size:16px;
  text-align:center;
}

.tab{
  width:330px;
  margin-top:1em;
  border:1px solid #ccc;
  img{
    width:90px;
    height:90px;
    margin:1em;
  }
}

.tae{
  width:330px;
  border:1px solid #ccc;
  border-top:0;
  .w200{
    width:180px;
    height:2em;
    border-right:1px solid #ccc;
  }
  b{
    color:red;
  }
  img{
    width:10px;
    height:10px;
  }
}

.boa{
  border:1px solid #ccc;
  .w145{
    text-align:center;
    width:130px;
    border-right:1px solid #ccc;
  }
  .w199{
    width:187px;
    border-bottom:1px solid #ccc;
  }
}

.dsf{
  display:flex;
  justify-content:space-between;
  margin:0 2em;
}



.ttt{
  font-size:12px;
  width:330px;
  border:1px solid #ccc;
}

.footer-top{
  background:@gerrn;
  color:@fff;
}

.footer-center{
  padding-right:.5em;
  border-right:1px solid @fff;
}

.footer-bottom{
  padding-bottom:.3em;
  height:1.3rem;
  &:hover{
    border-bottom:2px solid @fff;;
  }
}

@media screen and (max-width:1000px){
  .yui{
    display:flex;
    flex-flow:column;
  }
}
@media screen and (max-width:1000px){
  .dsf{
    display:flex;
    flex-flow:column;
    width:100%;
  }
  .text{
    margin:0;
  }
  strong{
    margin:0;
    display: block;
    height: 3em;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    text-align: center;
  }

  .hdmn{
    padding:0;
  }
.setting{
  margin:0;
}
  .center{
    margin:0 auto;
  }

  .tab{
    width:90%;
  }

  .tae{
    width:90%;
  }

  .boa{
    width:90%;
  }

  .ttt{
    width:90%;
  }
}
.summary{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 310px;
  transition: ALL 3s ease-in-out;
}
.re{
   display:block;
  position:relative;
  top:0;
 }
.summary:hover{
  display:block;
  opacity: .8;
  background:black;
  color: white;
  transform: rotate(360deg);
  padding: 0 2rem;
  margin: 1rem 2rem 0 2px;
}

@media screen and (max-width:1000px){
  .summary{
    width:83%;
  }
}
@media screen and (max-width:600px){
  .summary{
    width:73%;
  }
}

该问题已被官方收录

html,body{height:100%}为什么还要设html的高度？

1

2

自适应

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>
    html,body{height:100%}
    .parentElement{
        position:relative;
        background-color:aqua;
        width:200px;
        height:50%; 
    }

 .childElement{
     position:absolute;
     top:50%;
     transform:translateY(-50%);
     background-color:blueviolet;
        width:50%; 
        height: 25%;
        margin-left:25%;
 }
    </style>

</head>
<body>
    <div class="parentElement">
    <div class="childElement"></div>
    </div>
    
</body>
</html>

该问题已被官方收录

怎么修改bootstrap框架导航栏的默认link样式

2

2

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav>
    <div class="container">
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">在线定制</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">标准箱</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">品质保障</a>
            </li>
        </ul>
    </div>
</nav>

CSS部分

/*导航栏*/
nav{
    height: 8rem;
    background: #f9f9f9;
}
nav>.container{
    height: 100%;
}
.nav{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.nav-link{
    background-color: #fff;
    padding: 1rem 1.4rem;
    margin: 0 1rem;
    border-radius: 2px;
    color: #000;
}
.nav-item:hover .nav-link{
    background: #007bff;
    color: #fff;
}

该问题已被官方收录

css:hover状态改变另一个元素样式的使用

4

2

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 .register{
            display: inline-block;
            text-align: center;
            line-height: 42px;
            width: 80px;
            background-color: #FFFFFF;
        }
        .entry{
            display: inline-block;
            /*!*position: relative;*!   这里的属性用于去掉右边框*/
            /*left: 4px;*/
            text-align: center;

            line-height: 42px;
            width: 40px;
            color: #FFFFFF;
            border-left: 1px solid #FFFFFF;
        }

该问题已被官方收录

怎么用PS一键切图?

4

2

PhotoShop

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

去第页

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