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

HTML
<div class="nav-top">
        <div class="nav-top-content">
            <div class="top-content1"><a href="#">首页</a></div>
            <div class="top-content"><a href="task14-3.html">职业</a></div>
            <div class="top-content"><a href="task14-2.html">推荐</a></div>
            <div class="top-content"><a href="task14-2.html">关于</a></div>
        </div>
    </div>
CSS
.nav-top {
  @include container;
  @include flex;
  justify-content: flex-end;
}
@media only screen and (max-width: 767px) {
  .nav-top {
    display: none;
  }
}
.nav-top-content {
  display: flex;
}
.top-content a,
.top-content1 a{
  font-size: .18rem;
  color: $white;
  @include flex;
  justify-content: center;
  padding: .2rem .3rem;
}
.top-content a:hover,
.top-content1 a:hover{
  @include border-bottom (2px, solid, $white);
}
.top-content1 a {
  @include border-bottom (2px, solid, $white);
}

该问题已被官方收录

轮播图如何用css完美实现

1

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html部分
<!--轮播图-->
        <div class="loop-wrap">
            <div class="loop-images-container">
                <img src="./img14/cover3.png" alt="" class="loop-image">
                <img src="./img14/cover3.png" alt="" class="loop-image">
                <img src="./img14/cover3.png" alt="" class="loop-image">

            </div>
            <div class="focus-container">
                <ul class="focus-box">
                    <li>
                        <div class="focus-item focus-item1"></div>
                    </li>
                    <li>
                        <div class="focus-item focus-item2"></div>
                    </li>
                    <li>
                        <div class="focus-item focus-item3"></div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

        </div>
css部分
.loop-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.loop-wrap .loop-images-container {
  width: 300vw;
  /* 横向排列 3张图片 宽度应为主容器3倍 */
  font-size: 0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  /* 初始位置位移 */
  -webkit-animation: loop 10s linear infinite;
          animation: loop 10s linear infinite;
}

.loop-wrap .loop-images-container .loop-image {
  width: 100vw;
}

.loop-wrap .focus-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
}

.loop-wrap .focus-container li {
  float: left;
  width: .1rem;
  height: .1rem;
  border-radius: 50%;
  margin: 0 .05rem;
  border: 1px solid #fff;
}

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

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

该问题已被官方收录

如何不用框架做响应式导航栏

0

1

响应式导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css

该问题已被官方收录

label点击效果会一直存在

0

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

以下为less代码

.nav {
  position: relative;
  .max-width();
}
// 图标
.nav-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}


// 点击按钮
.menu-button {
  padding: 2rem 0;
  overflow: hidden;
}
.icon-menu {
  float: right;
  position: relative;
  width: 1rem;
  height: 1rem;
  padding: .5rem;
  margin-right: 1rem;
  border-radius: 5px;
  background-color: darken(@green,15%);
  &:hover {
    cursor: pointer;
    background-color: darken(@green,10%);
  }  
  &::before {
    content: '';
  position: absolute;
  top: .95rem;
  left: .5rem;
  width: 1rem;
  height: 2px;
  background-color: @white;
  }
  &::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 1rem;
    height: 1rem;
    border-top: 2px solid @white;
    border-bottom: 2px solid @white;
  }
}
// 导航栏
.menu-list {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: @green;
  text-align: center;  
  list-style: none;
  a {
    display: block;
    padding: 2rem ;
    color: @white;
    &:hover {
      background-color: lighten(@green, 10%);
    }
  }
}
.current {
  border-bottom: 5px solid @white;
}
/* 折叠导航栏点击效果 */
input,
.menu-list {
  display: none;
}
input:checked ~ .menu-list {
  display: block;
  position: absolute;
  z-index: @modal-z-index;
  border-top: 1px solid @white;
}
/* 水平导航栏 */
@media (min-width: 768px) {
  .menu-button {display: none;}
  .menu-list {
    display: block;
    max-width: 1024px;
    margin: 0 auto;
    text-align: right;
    font-size: 0;
    li {
      display: inline-block;
      &:hover {
        border-bottom: 5px solid @white;
      }
    }
    a {
      display: inline-block;   
      font-size: initial;   
    }
  }
}

该问题已被官方收录

gulp4.0任务会报错

0

1

打包工具

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

1

如何css手写轮播+点击的轮播图

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <section class="header-slider-contaner">
    <ul class="header-slider">
      <li class="header-slider-item slider-item1"></li>
      <li class="header-slider-item slider-item2"></li>
      <li class="header-slider-item slider-item3"></li>
      <li class="header-slider-item slider-item4"></li>
      <li class="header-slider-item slider-item5"></li>
    </ul>
    <div class="header-focus-container">
      <ul class="clearfix">
        <li>
          <div class="header-focus-item focus-item1"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item2"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item3"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item4"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item5"></div>
        </li>
      </ul>
    </div>
  </section>




  ul,li{
  list-style: none;
  }
  /*css reset end*/
  
  /*css public start*/
  .clearfix {
    &:after {
      content: "";
      display: table;
      clear: both;
    }
}
  /*css public end*/
  
  /*slider start*/
  .header-slider-contaner{
  width:100%;
  position:relative;
  }
  .header-slider-item {
  opacity:0;
  }
  .header-slider-item{
  width:100%;
  position:absolute;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  background-size:100%;
  }
  .header-focus-container{
  position:absolute;
  z-index:7;
  margin:0 auto;
  width: 1rem;
  left:0;
  right:0;
  }
  .header-focus-container li{
  width:0.1rem;
  height:0.1rem;
  border-radius:50%;
  float:left;
  margin-right:0.05rem;
  margin-left: 0.05rem;
  background:#fff;
  }
  .header-focus-item{
  width:100%;
  height:100%;
  border-radius:inherit;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  }
  .focus-item2,.focus-item3,.focus-item4,.focus-item5{
  opacity:0;
  }

  /*设置轮播焦点的位置*/
  .header-focus-container{
  bottom:2%;
  }
  /*设置当前图片焦点的颜色*/
  .header-focus-item{
  background:#51B1D9;
  }
  /*设置动画，请根据实际需要修改秒数*/
  .header-slider-item,.header-focus-item{
  animation-duration: 20s;
  }
  .slider-item1,.focus-item1{
  animation-delay: -1s;
  }
  .slider-item2,.focus-item2{
  animation-delay: 3s;
  }
  .slider-item3,.focus-item3{
  animation-delay: 7s;
  }
  .slider-item4,.focus-item4{
  animation-delay: 11s;
  }
  .slider-item5,.focus-item5{
  animation-delay: 15s;
  }
  @keyframes fade{
  0%{
  opacity:0;
  z-index:2;
  }
  5%{
  opacity:1;
  z-index: 1;
  }
  20%{
  opacity:1;
  z-index:1;
  }
  25%{
  opacity:0;
  z-index:0;
  }
  100%{
  opacity:0;
  z-index:0;
  }
  }
  /*设置背景，响应式请利用媒体查询根据断点修改路径*/
  .slider-item1{
  background-image:url(../start-a-project/sss/CSS/task8/task8-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item2{
  background-image:url(../start-a-project/sss/CSS/task8/picture-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item3{
  background-image:url(../start-a-project/sss/CSS/task8/picture-2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item4{
  background-image:url(../start-a-project/sss/CSS/task8/task8-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item5{
  background-image:url(../start-a-project/sss/CSS/task8/picture-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  /*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
  .header-slider,.header-slider-item{
  padding-bottom:31%;
  }

class命名方式有哪些通俗易懂的。

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

轮播图能否不使用绝对定位

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.frame{
    box-sizing: border-box;
    position: fixed;
    overflow:hidden; 
    padding-bottom: 30%;
    min-width: 100%;
    .photos {  
        position: absolute;
        width: 100%;
        overflow: hidden;
        .roll { 
            float: left;
            width: 100%;
        }
        .boil {
            background: url(./images/Image.png) no-repeat;
            background-size:100% 100%;
        }
        .boil-one {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tow {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tir {
            animation: myfirst 10s ease  infinite normal;
        }
        @keyframes myfirst {
            30%,50% {margin-left: -100%;}
            55%,75% {margin-left: -200%;}
            80%,100% {margin-left: -300%;}
        }
    }    
}

组件库规范

0

1

框架

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@mixin module-imgscale($width,$height,$margin,$image,$position,$scale) {
  width: $width;
  height: $height;
  margin: $margin;
  background-image: $image;
  background-position: $position;
  -webkit-transform: scale($scale);
  -moz-transform: scale($scale);
  -ms-transform: scale($scale);
  -o-transform: scale($scale);
  transform: scale($scale);
}

去第页

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