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

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

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

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

该问题已被官方收录

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

3

2

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.

该问题已被官方收录

gulp4.0任务会报错

0

1

打包工具

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

1

该问题已被官方收录

页面二hover半透明层位置

2

1

透明度 hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="web-list-col">
                <div class="web-peo">
                    <img class="web-peo-p" src="img/peo.jpg">
                    <span class="web-peo-t">Web前端工程师</span>
                    <div class="web-peo-text">
                        Web前端开发工程师，主要职责是利用（X）HTML /CSS /JavaScript /flash等各种Web技术进行产品的开发。
                    </div>
                </div>
                <div class="web2">
                    <span class="threshold">
                        门槛
                    </span>
                    <span class="difficult">
                        难易程度
                    </span>
                </div>
                <div class="web2">
                    <span class="grew">
                        成长周期
                        <span class="grew-num">1-3
                             <span class="grew-text">年</span>
                        </span>
                    </span>
                    <span class="scar">
                        稀缺程度
                        <span class="scar-num">345
                            <span class="scar-text">家公司需要</span>
                        </span>
                    </span>
                </div>
                <div class="money">
                    <div class="money-t">
                        薪资待遇
                    </div>
                    <div class="money-l">
                        <div class="money-one">
                            <span class="money-onel">0-1年</span>
                            <span class="money-one2">5k-10k/月</span>
                        </div>
                        <div class="money-two">
                            <span class="money-twol">1-3年</span>
                            <span class="money-two2">10k-20k/月</span>
                        </div>
                        <div class="money-three">
                            <span class="money-threel">3-6年</span>
                            <span class="money-three2">20k-50k/月</span>
                        </div>
                    </div>
                </div>
                <div class="studying">
                    <span class="studying-h">有</span>
                    <span class="studying-num">286</span>
                    <span class="studying-text">人正在学</span>
                </div>
                <div class="tips">
                    提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XXX等语言基础
                </div>
                <div class="web-hover">
                    <div class="web-hover-t">iOS工程师</div>
                    <div class="web-hover-text">
                    iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属
                    于类Unix的商业操作系统。国内iOS开
                    发起步相对较晚，人才培养机制更是远
                    远跟不上市场发展速度。有限的iOS开
                    发人才成了国内企业必争的资源。国内  iOS开发起步相对较晚，人才培养机制
                    更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
                    </div>
                </div>
            </div>

//职业块
    .web-list-col {
      height: 4.48rem;
      width: 30%;
      margin-bottom: 0.2rem;
      background-color: #ffffff;
      border: #d3d4d6 solid 0.01rem;
      //头像
      .web-peo {
        border-bottom: #d3d4d6 solid 0.01rem;
        padding-left: 0.1rem;
        height: 1.74rem;
        .web-peo-p {
          height: 1.2rem;
          width: 1.2rem;
          margin-top: 0.2rem;
        }
        .web-peo-t {
          position: relative;
          bottom: 1.1rem;
          font-size: 0.14rem;
          font-weight: bold;
        }
        .web-peo-text {
          font-size: 0.12rem;
          width: 45%;
          position: relative;
          left: 1.25rem;
          bottom: 1rem;
        }
      }
      //门槛、成长周期等信息
      .web2 {
        @extend %between;
        color: #999999;
        font-size: 0.12rem;
        border-bottom: #d3d4d6 solid .01rem;
        .threshold,.difficult,.grew,.scar {
          display: inline-block;
          height: 0.42rem;
          line-height: 0.42rem;
        }
        .threshold {
          width: 35%;
          padding-left: 5%;
          background: url("../img/icon.png") no-repeat -4.3rem -5.87rem;
        }
        .difficult {
          width: 55%;
          background: url("../img/icon.png") no-repeat -4.3rem -4.87rem;
        }
        .grew {
          width: 35%;
          padding-left: 5%;
          .grew-num {
            color: red;
            .grew-text {
              color: black;
            }
          }
        }
        .scar {
          width: 55%;
          .scar-num {
            color: red;
            .scar-text {
              color: black;
            }
          }
        }
      }
      //薪资
      .money {
        @extend %between;
        height: 1.06rem;
        font-size: 0.14rem;
        color: #999999;
        .money-t {
          width: 40%;
          border: #d3d4d6 solid 0.01rem;
          border-left: 0;
          border-top: 0;
          text-align: center;
          line-height: 1.1rem;
        }
        .money-l {
          width: 60%;
          color: #000000;
          padding: 0;
          line-height: 0.36rem;
          .money-one,.money-two,.money-three {
            border-bottom: #d3d4d6 solid 0.01rem;
            height: .343rem;
            line-height: .343rem;
            .money-onel,.money-twol,.money-threel {
              padding-left: 0.2rem;
            }
            .money-one2,.money-two2,.money-three2 {
              padding-right: 0.3rem;
              float: right;
            }
          }
        }
      }
      //在学人数
      .studying {
        border-bottom: #d3d4d6 solid 0.01rem;
        height: 0.38rem;
        line-height: 0.38rem;
        font-size: 0.15rem;
        font-weight: bold;
        .studying-h {
          padding-left: 0.2rem;
        }
        .studying-num {
          color: red;
        }
      }
      //提示
      .tips {
        padding-left: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: #c6c6c6;
      }
      //ios介绍
      .web-hover {
        @extend %mid-center;
        flex-direction: column;
        height: 4.48rem;
        position: relative;
        top: -4.26rem;
        background-color:transparent;
        font-size: 0.18rem;
        color: #ffffff;
        font-weight: bold;
        &:hover {
          background-color:rgba(0,0,0,0.6);
        }
        &:hover .web-hover-t {
          display: block;
        }
        &:hover .web-hover-text {
          display: block;
        }
        .web-hover-t {
          height: .5rem;
          margin-top: -.8rem;
          display: none;
        }
        .web-hover-text {
          width: 80%;
          display: none   ;
        }
      }
    }

该问题已被官方收录

响应式布局出现滚动条

0

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, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./SCSS/task14-3/task14-3.css">
    <!-- 自己外部引用css文件 -->
</head>

<body>
    <header>
        <div class="container">
            <!-- 固定宽度，响应式布局 -->
            <div class="row headd">
                <!-- 栅格布局列部分 -->
                <div class="col-6 box-left">
                    <!-- 顶部盒子左边部分栅格布局 -->
                    <p class="call">客服热线：010-594-78634</p>
                </div>
                <!-- 网格系统左边部分 -->
                <div class="col-6 box-right">
                    <!-- 栅格布局右边部分 -->
                    <button class="WX"></button>
                    <button class="QQ"></button>
                    <button class="WB"></button>
                    <!-- 右边三个雪碧图 -->
                </div>
            </div>
        </div>
        <div style=" background-color: #1DB176;">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="nav">
                            <div class="nav-brand">
                                <img src="./SCSS/img/home-logo-hs.png" style="width:200px">
                            </div>
                            <!-- 折叠按钮 -->
                            <input type="checkbox" id="nav-button">
                            <div class="nav-button-border">

                                <label for="nav-button"></label>
                            </div>
                            <!-- 折叠文本 -->
                            <div class="nav-text">
                                <ul class="navbar-nav" style=" padding-right: 15px;">
                                    <li>
                                        <a class="nav-link" href="task14-1.html">首 页</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="task14-3.html">职 业</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="task14-2.html">推 荐</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="#">关 于</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
@charset "UTF-8";
html {
  font-size: 625%;
}

body {
  margin: 0;
  font-size: .16rem;
  background: #fafafa;
}

button {
  padding: 0;
  border: none;
  outline-style: none;
  outline: none;
  background: transparent;
}

p {
  padding: 0;
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

input {
  display: none;
}

table, th, td {
  border: 1px solid #999999;
}

table {
  border-collapse: collapse;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.col-1 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 8.33333%;
          flex: 0 0 8.33333%;
  min-height: 1px;
}

.col-2 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
  min-height: 1px;
}

.col-3 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  min-height: 1px;
}

.col-4 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
  min-height: 1px;
}

.col-5 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 41.66667%;
          flex: 0 0 41.66667%;
  min-height: 1px;
}

.col-6 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  min-height: 1px;
}

.col-7 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 58.33333%;
          flex: 0 0 58.33333%;
  min-height: 1px;
}

.col-8 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 66.66667%;
          flex: 0 0 66.66667%;
  min-height: 1px;
}

.col-9 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 75%;
          flex: 0 0 75%;
  min-height: 1px;
}

.col-10 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 83.33333%;
          flex: 0 0 83.33333%;
  min-height: 1px;
}

.col-11 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 91.66667%;
          flex: 0 0 91.66667%;
  min-height: 1px;
}

.col-12 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  min-height: 1px;
}

@media (max-width: 360px) {
  .headd {
    -ms-flex-wrap: initial;
        flex-wrap: initial;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (max-width: 360px) {
  .box-right {
    padding-right: 12%;
  }
}

@media (min-width: 360px) {
  .box-right {
    padding-right: 35px;
  }
}

.box-left {
  line-height: .3rem;
}

.call {
  width: 150px;
  margin: auto;
  margin-left: 0;
  font-size: 7px;
  color: green;
}

.box-right {
  margin: auto;
  margin-top: 6px;
  text-align: right;
  zoom: .8;
}

.WX {
  width: 25px;
  height: 24px;
  border: 0;
  background: url(../img/css_sprit00000es.png) no-repeat 95.777% 46.05%;
  zoom: .9;
  outline: none !important;
}

/* 头部栅格布局右边雪碧图1设置 */
.QQ {
  width: 25px;
  height: 24px;
  border: 0;
  margin-left: 9.5px;
  margin-right: 9.5px;
  background: url(../img/css_sprit00000es.png) no-repeat no-repeat 95.777% 31.261%;
  zoom: .9;
  outline: none !important;
}

/* 头部栅格布局右边雪碧图2设置 */
.WB {
  width: 25px;
  height: 24px;
  border: 0;
  background: url(../img/css_sprit00000es.png) no-repeat 95.777% 38.655%;
  zoom: .9;
  outline: none !important;
}

.bg-green {
  background-color: #1DB176;
}

.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 575px) {
  .nav {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.nav .nav-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav .nav-button-border {
  display: none;
  margin: 5px;
  padding: 5px;
  border: .03rem solid #3fb886;
}

.nav .nav-button-border label {
  display: inline-block;
  padding: .06rem 0;
  width: .24rem;
  height: .18rem;
  border-top: .02rem solid #94d8bc;
  border-bottom: .02rem solid #94d8bc;
  background: #94d8bc;
  background-clip: content-box;
}

@media screen and (max-width: 575px) {
  .nav .nav-button-border {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.nav .nav-text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-transition: height 1s;
  transition: height 1s;
}

@media screen and (max-width: 575px) {
  .nav .nav-text {
    height: 0;
  }
  .nav .nav-text li {
    height: 0 !important;
  }
  .nav .nav-text li .nav-link {
    height: 0 !important;
  }
}

@media screen and (max-width: 575px) {
  .nav .nav-text {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    text-align: center;
  }
}

.nav .nav-text .navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-right: -10px;
}

.nav .nav-text .navbar-nav li {
  -webkit-transition: height 1s;
  transition: height 1s;
  height: 0.6rem;
  margin-left: .8vw;
  padding: 0 10px;
}

.nav .nav-text .navbar-nav li .nav-link {
  -webkit-transition: height 1s;
  transition: height 1s;
  padding: 0;
  line-height: .575rem;
  font-size: .16rem;
  color: white;
  white-space: nowrap;
}

.nav .nav-text .navbar-nav li:hover {
  border-bottom: .02rem solid white;
}

@media screen and (max-width: 575px) {
  .nav .nav-text .navbar-nav li {
    margin-left: 0;
  }
}

@media screen and (max-width: 575px) {
  .nav .nav-text .navbar-nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media screen and (max-width: 575px) {
  .nav #nav-button:checked ~ .nav-text {
    height: 2.4rem;
  }
  .nav #nav-button:checked ~ .nav-text li {
    height: .6rem !important;
  }
  .nav #nav-button:checked ~ .nav-text .nav-link {
    height: .575rem !important;
  }
}

该问题已被官方收录

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

该问题已被官方收录

轮播图如何用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"> 代码

window.onload = function () {
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;
    var timer;
    function animate(offset) {
        //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
       //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
        var newLeft = parseInt(list.style.left) + offset;
        list.style.left = newLeft + 'vw';
        //无限滚动判断
        if (newLeft > -100) {
            list.style.left = -500 + 'vw';
        }
        if (newLeft < -500) {
            list.style.left = -100 + 'vw';
        }
    }
    function play() {
        //重复执行的定时器
        timer = setInterval(function () {
            next.onclick();
        }, 2000)
    }
    function stop() {
        clearInterval(timer);
    }
    function buttonsShow() {
        //将之前的小圆点的样式清除
        for (var i = 0; i < buttons.length; i++) {
            if (buttons[i].className == "on") {
                buttons[i].className = "";
            }
        }
        //数组从0开始，故index需要-1
        buttons[index - 1].className = "on";
    }
    prev.onclick = function () {
        index -= 1;
        if (index < 1) {
            index = 5
        }
        buttonsShow();
        animate(100);
    };
    next.onclick = function () {
        //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
        index += 1;
        if (index > 5) {
            index = 1
        }
        animate(-100);
        buttonsShow();
    };
    for (var i = 0; i < buttons.length; i++) {
        (function (i) {
            buttons[i].onclick = function () {
                /*   这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法  */
                /*   由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
                var clickIndex = parseInt(this.getAttribute('index'));
                var offset = 100 * (index - clickIndex); //这个index是当前图片停留时的index
                animate(offset);
                index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
                buttonsShow();
            }
        })(i)
    }
    container.onmouseover = stop;
    container.onmouseout = play;
    play();
}

该问题已被官方收录

纯css轮播图，怎么完成。

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
}
/*轮播图样式*/
ul,li{
  list-style: none;
  padding: 0;
}

/*css public start*/
.floatfix {
  *zoom: 1;
}
.floatfix:after {
  content: "";
  display: table;
  clear: both;
}
/*css public end*/

/*slider start*/
.slider-contaner{
  width:100%;
  position:relative;
}
.slider-item + .slider-item{
  opacity:0;
}
.slider-item{
  width:100%;
  position:absolute;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  background-size:100%;
  background-repeat: no-repeat;
}
.focus-container{
  position:absolute;
  z-index:7;
  margin:0 auto;
  left:0;
  right:0;
}
.focus-container li{
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  float: left;
  margin: 0 .05rem;
  background: #fff;
}
.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;
}
/*设置轮播焦点的位置*/
.focus-container{
  bottom:2%;
  display: flex;
  justify-content: center;
}
/*设置当前图片焦点的颜色*/
.focus-item{
  background:#51B1D9;
}
/*设置动画，请根据实际需要修改秒数*/
.slider-item,.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(../img/task8-1.12.png);
}
.slider-item2{
  background-image:url(../img/task8-1.13.png);
}
.slider-item3{
  background-image:url(../img/task8-1.14.png);
}
.slider-item4{
  background-image:url(../img/task8-1.12.png);
}
.slider-item5{
  background-image:url(../img/task8-1.13.png);
}
/*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
.slider,.slider-item{
  padding: 0;
  padding-bottom:30%;
}

.banner-arrow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 40%;
}
.banner-left {
  width: 20px;
  height: 38px;
  background-image: url(../img/task14-1left.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 999;
  /* text-align: center; */
  margin-left: 20px;
}
.banner-right {
  width: 20px;
  height: 38px;
  background-image: url(../img/task14-1right.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 999;
  margin-right: 20px;
}

/*轮播图样式*/
.list{
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
}

该问题已被官方收录

图标HOVER时边框被覆盖怎么解决？

1

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.cooperationbox .cooperation:hover {
    border: 1px solid silver;
    box-shadow: 1px 1px 1px 1px silver;

去第页

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