IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

该问题已被官方收录

如何使用CSS实现下拉响应式导航栏并且有滑动效果

1

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav>
    <div class="nav clearfix">
      <div class="nav-header">
        <div class="nav-logo">
          <img src="./resource/jnshu-logo.png">
        </div>
      </div>
      <div class="list-wrapper">
        <input type="checkbox" class="input-btn" id="nav-button" checked>
        <label class="nav-btn" for="nav-button">
          <div class="nav-bar"></div>
          <div class="nav-bar"></div>
          <div class="nav-bar"></div>
        </label>
        <ul>
          <li class="home">
            <a href="">首页</a>
          </li>
          <li class="recommand">
            <a href="">推荐</a>
          </li>
          <li class="regarding">
            <a href="">关于</a>
          </li>
          <li class="help">
            <a href="">帮助</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

该问题已被官方收录

使用input label 创建响应式导航栏

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    <header>

        <nav class="navbar">
            <div class="bigbox1">
                <input type="checkbox" id="nav-toggle" class="nav-toggle" />
                <label for="nav-toggle">
                    <img src="daohang.png" alt="" style="width: 3rem;height: 3rem;">
                </label>
                <ul class="nav-list">
                    <li>
                        <a href="#">关于</a>
                    </li>
                    <li>
                        <a href="#">菜单二</a>
                    </li>
                    <li>
                        <a href="#">菜单三</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

.navbar {
    background-color: green;
    width: 100%;
    height: 6rem;
}

.navbar .nav-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row-reverse;
    line-height: 6rem;
}

.navbar>.bigbox1>ul>li {
    font-size: 1.3rem;
    list-style: none;
    margin-bottom: 4px;
    margin-left: 3rem;
    line-height: 5.6rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar>.bigbox1>ul>li:hover {
    border-bottom: 4px solid white;
    margin-bottom: 0;
}

.navbar>.bigbox1>ul>li>a {
    text-decoration-line: none;
    color: #fff;
}

.navbar>.bigbox1>input {
    display: none;
}

.navbar>.bigbox1>label {
    display: none;
}

.bigbox1 {
    text-align: right;
    width: 90%;
    margin: 0 auto;
}

@media screen and (max-width:767px) {
    .navbar .nav-list {
        display: none;
    }
    .navbar input:checked~.nav-list {
        display: block;
    }

.navbar>.bigbox1>label {
        display: inline-block;
        margin:1.3rem  1rem ;
    }

.navbar input:checked~.nav-list li {
        clear: both;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.navbar{
        background-color: green;
        width: 100%;
        height: auto;
    }

}

该问题已被官方收录

任务十四的自动轮播图用纯css怎么实现？

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">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>技能树首页</title>
      <link rel="stylesheet" href="all-style.css">
</head>

<body>
      <!-- 页眉 -->
      <header class="container spb">
            <span class="ma0 wsn">客服热线:010-233-233333</span>
            <div class="ma0 wsn">
                  <img src="image/wechat.png" alt="">
                  <img src="image/qq.png" alt="">
                  <img src="image/wb.png" alt="">
            </div>
      </header>
      <!-- 导航栏主体 -->
      <nav class="container nav-main spb">
            <a href="task14-1.html" class="ma0">
                  <img src="image/logo.png" alt="">
            </a>
            <div class="btn-group">
                  <a href="task14-1.html" class="tac">首页</a>
                  <a href="task14-2.html" class="tac">职业</a>
                  <a href="task14-3.html" class="tac">推荐</a>
                  <a href="task14-3.html" class="tac">关于</a>
            </div>
      </nav>
      <!--响应式下拉菜单-->
      <div class="hb">
            <img src="../task7/images/icon-2.png" alt="">
            <ul class="tac">
                  <li>
                        <a href="task14-1.html">首页</a>
                  </li>
                  <li>
                        <a href="task14-2.html">职业</a>
                  </li>
                  <li>
                        <a href="task14-3.html">推荐</a>
                  </li>
                  <li>
                        <a href="task14-1.html">关于</a>
                  </li>
            </ul>
      </div>

      <section class="slider-contaner">
            <ul class="slider">
                  <li class="slider-item slider-item1"></li>
                  <li class="slider-item slider-item2"></li>
                  <li class="slider-item slider-item3"></li>
                  <li class="slider-item slider-item4"></li>
                  <li class="slider-item slider-item5"></li>
            </ul>
            <div class="focus-container">
                  <ul class="floatfix">
                        <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>
                        <li>
                              <div class="focus-item focus-item4"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item5"></div>
                        </li>
                  </ul>
            </div>
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
      </section>
      <!--内容主题-->
      <main class="container">
            <!--第一模块-->
            <div class="md1">
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-1.png" alt="">
                        </div>
                        <h4>高效</h4>
                        <p>将五到七年时间，缩短到一年到三年。</p>
                  </div>
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-2.png" alt="">
                        </div>
                        <h4>规范</h4>
                        <p>标准的实战教程，不会走弯路。</p>
                  </div>
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-3.png" alt="">
                        </div>
                        <h4>人脉</h4>
                        <p>同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
                  </div>
                  <div class="cpt1-2">
                        <p>
                              <img src="image/user.png" alt="">  12400</p>
                        <p>累积在线人数</p>
                        <br>
                        <p>
                              <img src="image/user.png" alt="">  12400</p>
                        <p>学员已找到满意工作</p>
                  </div>
            </div>
            <!--第二模块-->
            <h4 class="tac">如何学习</h4>
            <div class="md2">
                  <div class="cpt2">
                        <div>1</div>
                        <p>匹配你现在的个人情况，寻找适合的岗位</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>2</div>
                        <p>了解职业前景薪金待遇，竞争压力等</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>3</div>
                        <p>掌握行业内顶级技能</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>4</div>
                        <p>查看职业目标任务</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>5</div>
                        <p>参考学习资源，掌握技能点，逐个完成任务</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>6</div>
                        <p>加入班级，和小伙伴们互帮互助，一起学习</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>7</div>
                        <p>选择导师，一路引导，加速自己成长</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>8</div>
                        <p>完成职业技能，升级业界大牛</p>
                        <img src="image/arrow.png" alt="">
                  </div>
            </div>
            <!--第三模块-->
            <h4 class="tac">优秀学员展示</h4>
            <div class="md3">
                  <div class="brs tac">
                        <img src="image/Avatar-1.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-2.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-3.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-4.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
            </div>
            <!--第四模块-->
            <h4 class="tac">战略合作企业</h4>
            <div class="md4">
                  <img src="image/alibaba.png" alt="">
                  <img src="image/js.png" alt="">
                  <img src="image/hx.png" alt="">
                  <img src="image/rl.png" alt="">
                  <img src="image/qiniu.png" alt="">
            </div>
      </main>
      <!--第五模块-->
      <div class="md5">
            <h4 class="tac">友情链接</h4>
            <div class="cpt5">
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
            </div>
      </div>
      <!--页脚-->
      <footer>
            <div>
                  <p>技能树一改变你我</p>
                  <p class="about-we wsn">
                        <a href="task14-1.html">关于我们</a>  |  
                        <a href="#">联系我们</a>  |  
                        <a href="task14-2.html">合作企业</a>
                  </p>
            </div>
            <div class="link wsn">
                  <p>旗下网站</p>
                  <p>
                        <a href="#">草船云孵化器</a>      
                        <a href="#">最强IT特训营</a>
                  </p>
                  <p>
                        <a href="#">葡萄藤轻游戏</a>      
                        <a href="#">桌游精灵</a>
                  </p>
            </div>
            <div class="wx-qr tar">
                  <p>微信公众平台</p>
                  <img src="image/qr.png" alt="" class="qr-code">
            </div>
      </footer>
      <aside class="container tac">Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号</aside>
</body>

</html>

该问题已被官方收录

checked点击事件

1

事件表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="main">
    <img class="jnshu" src="task14/img/task14-1/jnshu.png">
    <input type="checkbox" id="awesomea" />
    <label for="awesomea">点这里
    </label>
    <div class="page">
        <a class="page1">首页</a>
        <a class="page2" href=task8-2.html>职业</a>
        <a class="page3" href=task8-3.html>推荐</a>
        <a class="page4">关于</a>
    </div>
</div>

该问题已被官方收录

如何实现下拉式导航

1

下拉菜单导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    input:checked ~ ul{
        display: block;
        height: 252px;

该问题已被官方收录

我在做CSS任务十四的时候发现如果在SASS的SCSS编译的时候路径出现了问题

0

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 顶部左边电话样式 */
.call {
    width: 150px;
    margin: auto;
    margin-left: 0;
    font-size: 7px;
    color: green;
}

/* 顶部盒子遍栅格布局样式 */
.box-left {
    line-height: 2rem;
}
/* 顶部栅格布局右边部分 */
.box-right {
    text-align: right;
}
/* 头部栅格布局右边雪碧图1设置 */
.WX {
    width: 25px;
    height: 24px;
    border: 0;
    background: url(../img/css_sprites.png) no-repeat 15.385% 84.375%;
    zoom: .7;
    outline: none !important;
}
/* 头部栅格布局右边雪碧图2设置 */
.QQ { 
    width: 25px;
    height: 24px;
    border: 0;
    margin-left: 9.5px;
    margin-right: 9.5px;
    background: url(../img/css_sprites.png) no-repeat 15.385% 15.625%;
    zoom: .7;
    outline: none !important;
}
/* 头部栅格布局右边雪碧图3设置 */
.WB {
    width: 25px;
    height: 24px;
    border: 0;
    background: url(../img/css_sprites.png) no-repeat 84.615% 15.625%;
    zoom: .7;
    outline: none !important;
}
@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
}

@-ms-viewport {
  width: device-width;
}

body {
  margin: 0;
  font-size: 1.6rem;
  background-color: #fafafa;
  margin: 0;
  text-align: left;
}

p {
  padding: 0;
  margin: 0;
}

ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0;
  margin: 0;
}

ul li {
  list-style-type: none;
}

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

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

/* 顶部左边电话样式 */
.call {
  width: 150px;
  margin: auto;
  margin-left: 0;
  font-size: 7px;
  color: green;
}

/* 顶部盒子遍栅格布局样式 */
.box-left {
  line-height: 2rem;
}

/* 顶部栅格布局右边部分 */
.box-right {
  text-align: right;
}

/* 头部栅格布局右边雪碧图1设置 */
.WX {
  width: 25px;
  height: 24px;
  border: 0;
  background: url(../img/css_sprites.png) no-repeat 15.385% 84.375%;
  zoom: .7;
  outline: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tdd {
  background-color: RGBA(29, 177, 118, 1);
}

.olm {
  padding-right: 0px;
}

.xiuzhenyuan {
  display: inline-block;
  width: 605px;
  height: 114px;
  background: url(./img/css_sprit00000es.png) no-repeat 12.048% 1.98%;
  zoom: .3;
}

.nbox {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

.nav-link {
  height: 65px;
  padding: 20px 25px 20px 0px !important;
  color: white !important;
  margin-left: 25px;
  border-bottom-width: 5px;
  text-align: center;
}

.nav-link:hover {
  border-bottom: 3px solid white;
}

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50% !important;
}

.navv {
  padding-bottom: 0px;
  padding-left: 0px;
}

.navbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.navbar-collapse {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}
/*# sourceMappingURL=task14.css.map */

css实现轮播图左右自然切换

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    .carouse-pic {
        width: 500vw;
        height: 30vw;
        overflow: hidden;
        animation: carouse 20s infinite linear;

        @keyframes carouse {
            0%,15% {margin-left: 0;}
            25%,40% {margin-left: -100vw;}
            50%,65% {margin-left: -200vw;}
            75%,90% {margin-left: -300vw;}
            100% {margin-left: -400vw;}
        }
}

怎样让轮播图下面的小圆点，当点击的时候切换到另一张图片时背景颜色能变成白色？

0

1

表单元素轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css：
/*轮播图*/
.carousel{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-open:checked + .carousel-item {
  position: relative;
  opacity: 1;
}
.carousel-item {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}
.carousel-control.prev {
  left: 2%;
}
.carousel-control.next {
  right: 2%;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3,
#carousel-4:checked ~ .control-4,
#carousel-5:checked ~ .control-5{display: block}
.carousel-item img {
  display: block;
  height: auto;
  max-width: 100%;}
.instructions{
  position: absolute;
  margin:0 auto;
  bottom: 10px;
  left: 0;
  right: 0;
  width: 90px;
  li{display: inline-block}
}
.bullet{display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  cursor: pointer;
  background-color: rgba(0,0,0,0);
  border: 1px solid #fff;
  border-radius: 10px;}

html：   <div class="carousel">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="../image/2.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/3.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/4.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-4" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/5.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-5" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/6.jpg">
        </div>
        <label for="carousel-5" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-4" class="carousel-control next control-3">›</label>
        <label for="carousel-3" class="carousel-control prev control-4">‹</label>
        <label for="carousel-5" class="carousel-control next control-4">›</label>
        <label for="carousel-4" class="carousel-control prev control-5">‹</label>
        <label for="carousel-1" class="carousel-control next control-5">›</label>
        <ol class="instructions">
            <li>
                <label for="carousel-1" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-2" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-3" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-4" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-5" class="bullet"></label>
            </li>
        </ol>
    </div>

在屏幕缩放时怎么才可以固定高度的情况下保持图片的清晰度

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

CSS
.depth {
    width: 100%;
    height: 100%;
    .inner {
        width: 100%;
        height: 100%;
    }
}
HTML
        <div class="depth">
            <img class="inner" src="./images/hand.png" alt="">
        </div>

动画效果的问题

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.table-col {
    position: relative;
    &:hover .animation-table {
        display: block;
        @keyframes mytable {
            0% {transform: rotate(0);}
            100% {transform: rotate(360deg);}
        }
    }
    &:hover .animation-table2 {
        display: block;
        @keyframes mytable2 {
            0% {transform: rotatey(0);}
            100% {transform: rotatey(360deg);}
        }
    }
    &:hover .animation-table3 {
        display: block;
        @keyframes mytable3 {
            0% {height: 0;}
            100% {height: calc(100% - 48px);}
        }
    }
}
.table {
    table-layout: fixed;
    margin-top: 48px;
    box-shadow: 0 0 3px #D0D6D9;
    border-radius: 3%;
    width: 100%;
    background: #FFFFFF;
}
.animation-table {
    display: none;
    position: absolute;
    left: 15px;
    top: 48px;
    z-index: 1;
    border-radius: 3%;
    width: calc(100% - 30px);
    height: calc(100% - 48px);
    background: rgba(51, 51, 51, .8);
    animation: mytable 1s;
    .at-font1 {
        margin: 40px 0;
        font-size: 14px;
        text-align: center;
        color: rgba(255, 255, 255, 1);
    }
    .at-font2 {
        @extend .at-font1;
        margin: 0 auto 40px;
        width: 80%;
        line-height: 22px;
        text-align: justify;
    }
}
.animation-table2 {
    @extend.animation-table;
    animation: mytable2 1s;
}
.animation-table3 {
    @extend.animation-table;
    animation: mytable3 1s;
}