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

该问题已被官方收录

为何当设置margin-bottom负值后，会改变CSS读取的高度？

0

1

边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div style="width: 50%;height: 50px;margin-bottom: -25px;background: red">
	</div>
	<div style="width: 20%;height: 25px;background: #dddddd"></div>

该问题已被官方收录

纯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>Document</title>
    <style>
      *{ 
             margin: 0;
             padding: 0; 
             text-decoration: none;
         }
        ul{
            list-style: none;
        }
        
        #container{
            position: relative;
            width: 100%;
            
            overflow: hidden;/*隐藏溢出的图片*/
        }
        .pic{
            width:400%;/*4张图的宽度*/
            position: absolute;/*基于父容器进行定位*/
            left:0;
            clear: both;
            animation-name: focusmap;
            animation-duration: 12s;
            animation-iteration-count: infinite;

        }
         @keyframes focusmap {
            0%,30%{
                left: 0;
            }
            35%,65%{
                margin-left: -100%;
            }
            70%,99%{
                margin-left: -200%;
            }
            100%{
                margin-left: -300%;;
            }
           
        }
        .pic li{
            width: 25%;
            float: left;
            background: #5dd94e;
        }

        .pic li img {
            width: 100%;
            
        }
    </style>

</head>

<body>

        <div id="container">
                <ul class="pic">
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg"></a></li>
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg" ></a></li>
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg" ></a></li>
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg" ></a></li><!-- 克隆第一张 -->
                </ul>
                
            </div>
</body>

</html>

该问题已被官方收录

使用ul模拟下拉列表的时候，下拉列表背景出现透明

0

1

下拉菜单布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* CSS 代码 */
       .header {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 80px; }

        .header .select {
            width: 100%;
            height: 35px;
            background-color: #fff;
            border-bottom: 1px solid #eee; }

        .select:after {
            content: '';
            display: block;
            clear: both; }

        .select .adress,
        .select .eat,
        .select .condition {
            position: relative;
            float: left;
            width: 33.3%;
            font-size: 14px;
            line-height: 35px;
            margin: 0 auto;
            text-align: center; }

        .select .arrow {
            position: absolute;
            top: 15px;
            right: 5px;
            width: 10px;
            height: 8px;
            background: url(./img/task6.png) no-repeat -130px 0;
            -webkit-background-size: 250px;
            background-size: 250px; }

        .select .adlist,
        .select .eatlist,
        .select .conlist {
            height: 0;
            overflow: hidden;
            transition: all 0.5s ease; }

        .select .adlist li,
        .select .eatlist li,
        .select .conlist li {
            width: 100%;
            background-color: #fafafa;
            text-align: center; }

        .select .split {
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 35px;
            background: url(./img/task6.png) no-repeat -370px 50%;
            -webkit-background-size: 400px 35px;
            background-size: 400px 35px; }

        .select .adress:hover .adlist,
        .select .eat:hover .eatlist,
        .select .condition:hover .conlist {
            height: 180px; }

        .main {
            width: 100%;}

        .wrapper {
            width: 100%;
            position: absolute;
            top: 35px; }

        .list {
            width: 100%; }

        .list .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            font-size: 14px;
            border-bottom: 1px solid #ccc; }

        .item .info {
            width: 100%; }

        .item .info .date,
        .item .info .time,
        .item .info .local {
            position: relative;
            margin-top: 10px;
            margin-bottom: 10px;
            padding-left: 35px;
            width: 70%;
            color: #999;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden; }

        .item .info .time {
            font-size: 12px;
            color: #000; }

        .item .price {
            position: relative;
            color: #e63b0e;
            margin-right: 25px;
            white-space: nowrap; }

        .item .date:before {
            position: absolute;
            top: 3px;
            left: 15px;
            content: '';
            display: block;
            width: 14px;
            height: 13px;
            background: url(./img/task6.png) no-repeat;
            -webkit-background-size: 230px;
            background-size: 230px; }

        .item .local:before {
            position: absolute;
            top: 3px;
            left: 15px;
            content: '';
            display: block;
            width: 14px;
            height: 13px;
            background: url(./img/task6.png) no-repeat -62px 0;
            -webkit-background-size: 230px;
            background-size: 230px; }

        .item .price:after {
            position: absolute;
            top: 3px;
            right: -15px;
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border: 2px solid #5fc0cd;
            border-left: 2px solid rgba(95, 192, 205, 0);
            border-bottom: 2px solid rgba(95, 192, 205, 0);
            transform: rotateZ(45deg); }

<!-- html 代码 -->
 <header class="header">
        <div class="select">
            <ul>
                <li class="adress">
                    <p>所在地</p>
                    <div class="arrow"></div>
                    <ul class="adlist">
                        <li>定位</li>
                        <li>龙华区</li>
                        <li>龙岗区</li>
                        <li>宝安区</li>
                        <li>福田区</li>
                    </ul>
                    <div class="split"></div>
                </li>
                <li class="eat">
                    <p>食宿</p>
                    <div class="arrow"></div>
                    <ul class="eatlist">
                        <li>需要</li>
                        <li>不需要</li>
                    </ul>
                    <div class="split"></div>
                </li>
                <li class="condition">
                    <p>病人情况</p>
                    <div class="arrow"></div>
                    <ul class="conlist">
                        <li>健康</li>
                        <li>良好</li>
                        <li>一般</li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>
    <main class="main">
        <div class="wrapper">
            <ul class="list">
                <li class="item">
                    <div class="info">
                        <p class="date">服务日期</p>
                        <p class="time">2015-7-5 至 2015-7-12</p>
                        <p class="local">北京·通州·果园</p>
                    </div>
                    <div class="price"><p>25元/小时</p></div>
                </li>
                <li class="item">
                    <div class="info">
                        <p class="date">服务日期</p>
                        <p class="time">2015-7-5 至 2015-7-12</p>
                        <p class="local">北京·通州·果园</p>
                    </div>
                    <div class="price"><p>25元/小时</p></div>
                </li>
            </ul>
        </div>
    </main>

该问题已被官方收录

不加float，会竖向排列。加上float，会萎缩塌陷

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            background: #29bde0;
        }

        .header {
            width: 100%;
            height: 60px;
            line-height: 60px;
            position: fixed;
            z-index: 1;
            top: 0;
        }

        .headers {
            text-align: center;
            font-size: 22px;
            color: white;

        }

        .headersImage {
            position: absolute;
            bottom: -5px;
            left: 30px;
        }

        .headersImg {
            position: absolute;
            bottom: -5px;
            right: 30px;
        }

        .circle {
            height: 52px;
            width: 52px;
            border-radius: 50%;
            background: #fbb435;
            position: absolute;
            right: 100px;
            top: 9px;
        }

        .message-box {
            position: relative;
            top: 60px;
            width: 100%;
            height: 70px;
            line-height: 70px;
            background: #b9e9f5;
            /*box-shadow:1px 1px 1px #b9e9f5;*/
            /*border:1px solid #C9E9C0;*/
            /*border-radius:4px;*/
            padding-left: 50px;
            font-size: 20px;
            color: #5e5e5e;
        }

        .triangle-border {
            position: absolute;
            /*left:40px;*/
            /*overflow:hidden;*/
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            bottom: -20px;
            border-color: #b9e9f5 transparent transparent transparent;
            /*border-color:#b9e9f5 ;*/
        }

        .wordOne {
            color: white;
            font-size: 18px;
            margin-top: 75px;
            margin-left: 50px;
        }

        /*div.container div.row div {*/
        /*margin-top: 60px;*/
        /*line-height: 60px;*/
        /*height: 60px;*/
        /*background-color: white;*/
        /*border: 1px solid #696969;*/
        /*text-align: center;*/
        /*}*/

        .mains {
            /*width: 588px;*/
            /*height: 196px;*/
            text-align: center;
            float: left;

        }

        .blocksLeft {
            width: 25%;
            height: 20vw;
            background-color: #f5c97b;
            margin: 30px 30px 0 30px;
            border-width: 4px 4px 0 4px;
            border-style: solid;
            border-color: white;
            position: relative;

        }
        .blocksLe {
            width: 25%;
            height: 5vw;
            background-color: #83b09a;
            margin: 0 30px 30px 30px;
            border-width: 0 4px 4px 4px;
            border-style: solid;
            border-color: white;
            position: relative;
        }

        .blocks {
            display: inline-block;
            width: 25%;
            height: 25%;
            margin: 30px;
            text-align: center;
            border: 4px solid white;

        }

        .blocksRight {
            display: inline-block;
            width: 25%;
            height: 25%;
            margin: 30px;
            text-align: center;
            border: 4px solid white;
            float: right;
        }

        .blocksOne {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #5e5e5e;
            font-size: 20px;
        }

        .blocksTwo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 18px;
        }

        .threeTable {
            text-align: center;
            font-size: 21px;
            color: #9C9C9C;
            height: 58px;
            line-height: 58px;
        }

该问题已被官方收录

设置了最大宽度，子元素设置百分比,同时设置了相对视窗定位，会超出我设定的最大宽度

0

1

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
  margin: 0;
  padding: 0; }

.max-wid {
  max-width: 780px;
  min-width: 320px;
  height: 100vh;
  margin: auto; }

header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  line-height: 40px;
  font-size: 20px;
  color: #ffffff;
  background: #5fc0cd; }
  header img {
    height: 20px; }

该问题已被官方收录

图片隐藏后鼠标点击为什么显示不了。

1

属性

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
     <!--minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/task7.2.css">
</head>
<body>
<div class="wrap">
    <div class="head">
      <img src="../img/task7.1.1.png" class="catalogue" alt="">
      <span class="vote">投票</span>
      <img src="../img/task7.1.2.png" class="wrong" alt="">
     </div>
    <div class="make">
      <p>发表讨论结果，大家请投票</p>
    </div>
    <div class="makk">
    </div>
      <p class="cilck">点击票数最多人的头像</p>
    <div class="olk">
      <div class="center">
        <div class="cox">
           <p class="iu">水民</p>
           <p class="ui">一号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <P class="iu">水民</P>
            <p class="ui">2号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">警察</p>
            <p class="ui">3号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">法官</p>
            <p class="ui">4号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">狙击手</p>
            <p class="ui">5号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">医生</p>
            <p class="ui">6号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">杀手</p>
            <p class="ui">7号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">8号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">9号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">10号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">11号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
        <div class="cox">
            <p class="iu">水民</p>
            <p class="ui">12号</p>
            <div class="mxc">
                <img src="../img/task7.12.png" class="con1" alt="">
                <img src="../img/task7.11.png" class="con2" alt="">
                <img src="../img/task.7.13.png" class="con3" alt="">
                <img src="../img/task7.10.png" class="con4" alt="">
            </div>
        </div>
      </div>
     </div>
    <footer class="vc">
        <button>投死</button>
    </footer>
</div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
.head{
    width: 100%;
    height: 14.59vw;
    background: #29bde0;
}
.catalogue{
    width: 6.093vw;
    height: 5.25vw;
    margin-top: 4.78vw;
    margin-left: 3.59vw;
}
.wrap{
    background: #29bde0;
}
.vote{
    position: absolute;
    margin-left: 38vw;
    font-size: 4vw;
    color: #ffffff;
    margin-top: 5vw;
}
.wrong{
    width: 3.78vw;
    margin-left: 34.31vw;
    margin-top: 6vw;
    margin-right: 4vw;
    float: right;
}
.make{
    width: 100%;
    background: #b9e9f5;
    height: 12.65vw;
}
.make p{
    margin-left: 7.5vw;
    font-size: 3vw;
    padding-top: 4.8vw;
}
.makk{
    width: 0;
    height: 0;
    margin-left: 11.25vw;
    border-width: 2vw;
    border-style: solid;
    border-color: #b9e9f5 transparent transparent transparent;
}
.cilck{
    color: #ffffff;
    font-size: 3vw;
    margin-left: 11.40vw;
}
.olk{
  margin-left: 2vw;
    margin-bottom: 16.5vw;
}
.center{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}
.cox{
    height: 25vw;
    width: 25vw;
    margin-right: 3vw;
    margin-bottom: 8vw;
    font-size: .17rem;
    text-align: center;
    border: 1vw solid white;
}
.iu{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
    margin: 0;
    color: #565656;
    background-color: #f5c97b;
    font-size: 3vw;

}
.ui{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
    margin: 0;
    background-color: #83b09a;
    font-size: 3vw;
}
.mxc{
    margin-top: 2vw;
}
.con1{
    width: 3vw;
}
.con2{
    width: 3vw;
}
.con3{
    width: 3vw;
}
.con4{
    width: 3vw;
}
.vc{
    position: fixed;
    bottom: 0;
    padding: 1vw;
    width: 100%;
    height: 17vw;
    text-align: center;
    color: #fff;
    background-color: #29bde0;
}
.vc button{
    border: none;
    width: 80%;
    height: 9vw;
    background-color: #fbb435;
    margin-top: 5vw;
    font-size: 6vw;
}
.mxc img{
    margin-top: 4vw;
    display: none;
}
.mxc img:hover{
    display: block;
}

该问题已被官方收录

audio标签定义音频时,自动播放属性无效;

0

1

audio播放器

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>demo</title>
</head>
<body>
    <h4>演示音频</h4>
    <audio src="horse.ogg" controls autoplay></audio>
</body>
</html>

该问题已被官方收录

关于任务八的Bootstrap4的栅格系统，在任务八的最底下有IMG图公众号什么

0

1

bottstrap

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" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- 新bootstrap4核心CSS组件 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- jquery组件 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <!-- popper.js组件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!-- bootstrap js核心组件 -->
    <link rel="stylesheet" type="text/css" href="./task8-1.css">
    <!-- 自己外部引用css文件 -->
</head>

<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-4 call">客服热线：010-594-78634</div>
                <div class="col-8 box">
                    <button class="wx"></button>
                    <button class="qq"></button>
                    <button class="wb"></button>
                </div>
            </div>
        </div>
        <div class="dh">
            <div class="container">
                <div class="row">
                    <div class="col-xl">
                        <div class="navbar-brand">
                            <img src="./home-logo-hs.png">
                        </div>
                        <nav class="navbar navbar-default" role="navigation">
                            <!-- 导航栏 -->
                            <nav class="navbar navbar-expand-md bg-dark navbar-dark">
                                <!-- Brand -->
                                <a class="navbar-brand" href="#"></a>
                                <!-- Toggler/collapsibe Button -->
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                                    <span class="navbar-toggler-icon"></span>
                                </button>
                                <!-- Navbar links -->
                                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                                    <ul class="navbar-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>
                        </nav>
                    </div>
                </div>
            </div>
            <div id="demo" class="carousel slide" data-ride="carousel">
                <!-- 指示符 -->
                <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul>
                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="./0d9944f1-6aad-4894-b42e-72dadcfef058.png">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./3a15425b-c947-4222-8558-0bf01cc36513.png">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./87ae208e-8374-45a0-beb4-7ece0ec4f8be.jpg">
                    </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>
    </header>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="fa">
                        <!-- fire arrow 火箭缩写 -->
                    </div>
                    <!-- 雪碧图 -->
                    <h4>高效</h4>
                    <p class="introduce">将五到七年的成长时间，缩短 到一年到三年。</p>

                </div>
                <div class="col-md-3">
                    <div>
                        <div class="book"></div>
                        <!-- 雪碧图 -->
                        <h4>规范</h4>
                        <p class="introduce uk">标准的实战教程，不会走弯路</p>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="nce">
                        <!-- n. connection人脉的缩写 -->
                    </div>
                    <!-- 雪碧图 -->
                    <h4>人脉</h4>
                    <p class="introduce">同班好友，同院学长，技术大师，
                        入学就混入职脉圈</p>
                </div>
                <div class="col-md-3 ppp">
                    <div class="person"></div>
                    <!-- 雪碧图 -->
                    <span>12400</span>
                    <p class="introduce">累计在线学习人数</p>
                    <div class="person"></div>
                    <!-- 雪碧图 -->
                    <span>12400</span>
                    <p class="introduce">学员已经找到满意工作</p>
                </div>
            </div>
        </div>
        <!-- 上边部分 -->
        <div class="container ">
            <h3 class="text-center">如何学习</h3>
            <div class="row">
                <div class="col-md-3 col-sm-1">
                    <span class="circle ">1</span>
                    <p class="bid">匹配你现在的个人情况寻找适合自己的岗位</p>
                    <!-- brief introduction 简单介绍的缩写 -->
                    <div class="ra"></div>
                    <!-- 雪碧图right arrow右箭头 -->

                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">2</span>
                    <p class="bid">了解职业前景薪金待遇竞争压力等 </p>

                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">3</span>
                    <p class="bid">掌握行业内顶级技能</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">4</span>
                    <p class="bid">查看职业目标任务</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-1">
                    <span class="circle">5</span>
                    <p class="bid">参考学习资源，掌握
                        技能点，逐个完成任务</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">6</span>
                    <p class="bid">加入班级，和小伙伴们
                        互帮互助，一块学习</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">7</span>
                    <p class="bid">选择导师，一路引导，
                        加速自己成长</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">8</span>
                    <p class="bid">完成职业技能，升
                        级业界大牛</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
            </div>
        </div>
        <!-- 中间第一部分 -->
        <div class="container zx">
            <h3 class="text-center student">优秀学员展示</h3>
            <div class="row">
                <div class="col-sm-2  col-sm-2 ldy1">
                    <div class="hp"></div>
                    <!-- 雪碧图head portrait  -->
                    <h4 class="si">技术顾问：罗大佑</h4>
                    <p class="introduce">百度技术总监：互联网基础
                        服务领域，从事虚拟主机、
                        云服务器、域名。曾任新网
                        高级技术经理，负责技术研
                        发、团队管理与建设。</p>
                </div>
                <div class="col-sm-2  col-sm-2 ldy1">
                    <div class="hp1"></div>
                    <!-- 雪碧图 -->
                    <h4 class="si">技术顾问：罗大佑</h4>
                    <p class="introduce">百度技术总监：互联网基础
                        服务领域，从事虚拟主机、
                        云服务器、域名。曾任新网
                        高级技术经理，负责技术研
                        发、团队管理与建设。</p>
                </div>
                <div class="col-sm-2  col-sm-2 ldy1">
                    <div class="hp2"></div>
                    <!-- 雪碧图 -->
                    <h4>技术顾问：罗大佑</h4>
                    <p class="introduce">百度技术总监：互联网基础
                        服务领域，从事虚拟主机、
                        云服务器、域名。曾任新网
                        高级技术经理，负责技术研
                        发、团队管理与建设。</p>
                </div>
                <div class="col-sm-2  col-sm-2 ldy1">
                    <div class="hp3"></div>
                    <!-- 雪碧图 -->
                    <h4 class="si">技术顾问：罗大佑</h4>
                    <p class="introduce">百度技术总监：互联网基础
                        服务领域，从事虚拟主机、
                        云服务器、域名。曾任新网
                        高级技术经理，负责技术研
                        发、团队管理与建设。</p>
                </div>
            </div>
            <div class="cb">
                <!-- circle1外部盒子 -->
                <span class="circle1"></span>
                <span class="circle1"></span>
                <span class="circle1"> </span>
                <span class="circle1"></span>
            </div>
            <!-- 底部圆形样式 -->
        </div>
        <div class="container cp">
            <!-- cooperation合作 -->
            <h3 class="text-center">战略合作企业</h3>
            <div class="row">
                <div class="col-sm-20% box4">
                    <div class="albb"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-sm-20% box4">
                    <div class="kcg"></div>
                    <!-- 雪碧图 Kingsoft Cloud Group金山云 -->
                </div>
                <div class="col-sm-20% box4">
                    <div class="ci"></div>
                    <!-- communication通讯 -->
                </div>
                <div class="col-sm-20% box4">
                    <div class="rlci"></div>
                </div>
                <div class="col-sm-20% box4">
                    <div class="storage"></div>
                </div>
            </div>
        </div>
        <div class="container buttonbox">
            <h3 class="text-center">友情链接</h3>
            <div class="row box5">
                <ul class="col-md-10% zoom list col-20%">
                    <li>手机软件</li>
                    <li>教师招聘</li>
                    <li>找工作</li>
                    <li>教师招聘</li>
                    <li>找工作</li>
                    <li>手机软件</li>
                    <li>教师招聘</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>找工作</li>
                    <li>手机软件</li>
                    <li>教师招聘</li>
                    <li>找工作</li>
                    <li>教师招聘</li>
                    <li>找工作</li>
                    <li>手机软件</li>
                    <li>教师招聘</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>找工作</li>
                </ul>
            </div>
            <!-- 中间下面部分 -->
    </main>
    <!-- 中心部分 -->
    <footer>
        <div class="container pll">
            <div class="row box7">
                <div class="col-sm-4 jns">
                    <span class="alter">技能树 — 改变你我</span>
                </div>
                <div class="col-sm-4">
                    <span class="alter">旗下网站</span>
                </div>
                <div class="col-sm-3">
                    <span class="alter">微信公众平台</span>
                    <div>
                        <img class="nb" src="./qrcode_for_gh_32213eeb65ba_1280.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row content-box6">
                <div class="col-sm-5 offset-4 footer-font">
                    <span class="alter">草船云孵化器</span>
                    <span class="alter">最强IT特训营</span>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-4 ">
                    <span class="alter">关于我们 | 联系我们 | 合作企业</span>
                </div>
                <div class="col-sm-4 irt">
                    <span class="alter ">葡萄藤轻游戏</span>
                    <span class="alter">桌游精灵</span>
                </div>
            </div>
        </div>
        <div class="message">
            <p class="oneself">Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号</p>
    </footer>
    <!-- 底部 -->
</body>

</html>

该问题已被官方收录

用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>

该问题已被官方收录

GitHub提交不了

0

1

管理工具

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本