前端拾遗01

原本清明节出去浪的，怎奈何居然下雪了，没办法，在寝室仿个站（前端），来回顾一下前端知识吧

公共样式：

/*
    common
*/

*{
    margin: 0px;
    padding:0px;
    font-size: 15px;
}

ul{
    list-style: none;
}

.left{
    float: left;
}

.right{
    float: right;
}

.center{
    text-align: center;
}

.hide{
    display: none;
}

.content-center{
    margin: auto;
    width: 980px;
}

.clearfix:after{
    clear:both;
    content:‘fdaef‘;
    display: block;
    height: 0px;
    visibility: hidden;
}

/*客服*/
.service{
    position: fixed;
    top:240px;
    right: 10px;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    background-color: #b5dac8;
}

.service  .icon{
    font-size: 24px !important;
}

.service .text span{
    font-size: 12px;
}

/*
    heading
*/

.head{
    height:48px;
    background-color: #122b40;
}

.head .menu{
    margin: auto;
    width: 980px;
    height: 100%;
}

.head .menu a,.left .logo a{
    text-decoration: none;
    display: inline-block;
    width: 88px;
    text-align: center;
    line-height: 48px;
    height: 48px;
    color: white;
}

.head .menu a:hover{
    background-color: white;
    opacity: 0.2;
    color: black;
}

.head .menu .logo{
    background: url("../../public/images/logo/head_logo.png") no-repeat;
    background-color: white;
    background-size: 105px 44px;
    width: 110px;
    height: 44px;
    border: 1px solid white;
    margin: 2px 0;
}

.tel{
    margin-top: 10px;
    margin-bottom: 10px;
    color: white;
}

.tel .glyphicon-headphones, span{
    font-size: 20px;
}

/*
    slider
*/

.slider .bx-wrapper{
    border: 0px !important;
    margin-bottom: 0px;
}

.bxslider li img{
    height: 300px;
    width:100%;
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    bottom: 25px !important;
}

/*
        copy-right
*/
.bottom{
    margin-top: 20px;
}

.bottom .copy-right{
    border-top:2px solid dodgerblue;
}

.bottom .copy-right p{
    margin-top: 10px;
    color: #9d9d9d;
    font-size: 12px;
}

.bottom .copy-right a{
    text-decoration: none;
    color: #9d9d9d;
    font-size: 12px;
}

common.css

index页样式：

/*
    content
*/

/*
    这里样式看错了，以至于划分div出错，代码复用太低，冗余了，使用后面的样式content-course才对
*/

/* content-notice */

.notice-content .item{
    height: 180px;
    background-color: #e9ffe9;
}

.content div .title{
    margin: 25px auto;
    width: 980px;
    border-left: 4px yellow solid;
    color: grey;
    font-size: 19px;
}

.item{
    width: 33.3%;
}

.item .icon{
    height: 100%;
    width: 50px;
}

.item .icon i{
    margin-left: 12px;
    margin-top: 15px;
    font-size: 24px !important;
}

.item .info{
    padding-top:12px;
    padding-right: 25px;
}

.item .info .info-title{
    font-size: 24px
}

/* content-course */
.course-content .item{
    width: 310px;
    height: 200px;
    border:1px #e6dede solid;
    margin-left: 10px;
    margin-top: 10px;
}

.tea-img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.course-content .item .item-center{
    width: 300px;
    height: 160px;
    margin-top:18px;
    margin-left: 10px;
}

.course-content .item .center .item-name{
    font-size: 24px;
    color: grey;
    text-decoration: none;
}

.course-content .item .center .item-intro{
    font-size: 12px;
    color: grey;
    text-decoration: none;
}

/*      stu-content     */
.stu-info{
    width: 60%;
    height: 280px;
    border-top: 2px #f97a2f solid;
    padding-top: 25px;
    background-color: #f5f2f2;
}

.stu-info .stu-item{
    width: 150px;
    margin-left: 15px;
}

.stu-info .stu-item div .fa{
    color: greenyellow;
    width: 20px;
}

.stu-info .stu-item .stu-img{
    width: 150px;
    height: 210px;
}

.stu-info .stu-intro{
    width: 380px;
    margin-left: 40px;
}

.stu-info .stu-intro .stu-name{
    color: #9d9d9d;
    font-size: 18px;
}

.stu-info .stu-intro .star{
    color: gold;
}

.recruit-info{
    width: 35%;
    height: 280px;
    border-top: 2px greenyellow solid;
    padding-top: 10px;
    margin-left: 30px;
}

.recruit-info .rec-title{
    font-size: 32px;
}

.recruit-info .rec-item{
    margin-top: 10px;
}

.recruit-info .rec-item a{
    text-decoration: none;
}

.stu-othor{
    margin-top: 30px;
}

.stu-othor .stu-item{
    border:1px solid darkgray;
    border-radius: 5px;
    margin-right: 29px;
}

.stu-othor .stu-item .stu-img{
    width: 165px;
    height: 180px;
    padding: 2px;
}

.stu-othor .stu-item p{
    text-align: center;
    margin: 0px;
}

/*
        school-content
*/
/*.school-content{*/
/*padding-left: 20px;*/
/*padding-right: 20px;*/
/*}*/

.school-content .item{
    width:25%;
}

.school-content .item .info .img-show .school-img{
    width: 215px;
    height: 215px;
}

.school-content .item .info .info-show{
    width: 215px;
    height: 215px;
    background-color: #616060;
    text-align: center;
    color: white;
    padding:36px 26px;
}

.school-content .info-show .info-center{
    width: 160px;
    height: 160px;
}

.school-content .info-show .info-center .first{
    font-size: 16px;
}

.school-content .info-show .info-center .second{
    font-size: 12px;
}

.school-content .info-show .info-center .third{
    font-size: 12px;
}

.school-content .info-show .info-center .link-icon .a-bor{
    display: inline-block;
    height: 40px;
    width: 40px;
    padding: 5px;
    border-radius: 50px;
    border: 1px solid white;
    margin-right: 4px;
}

.school-content .info-show .info-center .link-icon .fa{
    font-size: 24px;
    color: white;
}

/*      设置position      */
.school-content .item .info{
    position: relative;
}

.school-content .item .info .info-show{
    position: absolute;
    left:0px;
}

.school-content .item .info:hover .info-show{
    display: block !important;
}

/*
        firm-content
*/

.firm-content .firm-item{
    margin-right: 10px;
}

.firm-content .firm-item .firm-icon .firm-img{
    width: 100px;
    height: 100px;
}

index.css

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/plugins/bxslider/dist/jquery.bxslider.css">
    <link rel="stylesheet" href="style/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style/css/common.css">
    <link rel="stylesheet" href="style/css/index.css">

    <script src="style/js/jquery.js"></script>
    <script src="style/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="style/plugins/bxslider/dist/jquery.bxslider.min.js"></script>
</head>
<body>
<!--    头部菜单    -->
    <div class="head">
        <div class="menu">
            <div class="left">
                <div class="left logo"><a href="./"></a></div>
                <a href="index.html">首页</a>
                <a href="teacher.html">师资团队</a>
                <a href="">学员就业</a>
                <a href="">在线视频</a>
                <a href="">开源软件</a>
                <a href="problem.html">常见问题</a>
                <a href="about.html">关于我们</a>
            </div>
            <div class="right">
                <div class="tel">
                    <span class="glyphicon glyphicon-headphones" aria-hidden="true"> </span>
                    <span>183-40965007</span>
                </div>
            </div>
        </div>
    </div>

<!--    幻灯片      -->
    <div>
        <div class="slider">
            <ul class="bxslider">
                <li><img src="public/images/bxsilder/1.jpg" alt=""></li>
                <li><img src="public/images/bxsilder/2.jpg" alt=""></li>
                <li><img src="public/images/bxsilder/3.jpg" alt=""></li>
            </ul>
        </div>
    </div>

<!--    主要内容    -->
    <div class="content">
        <!--        最新公告        -->
        <div class="clearfix">
            <div class="title">&nbsp;最新公告</div>
            <div class="notice-content content-center">
                <div class="item left">
                    <div class="icon left">
                        <i class="fa fa-bell-o"></i>
                    </div>
                    <div class="info">
                        <p class="info-title">Python 11期火爆招生</p>
                        <p class="info-content">
                            我懵懵懂懂过了一年
                            这一年似乎没有改变
                            守着你离开后的世界
                            空空如也
                            白天和晚上都是冬夜
                            悲伤的到来我从不拒绝
                            反正亦是空空空空如也
                        </p>
                        <p class="info-link"><a href="">查看更多</a></p>
                    </div>
                </div>
                <div class="item left">
                    <div class="icon left">
                        <i class="fa fa-bell-o"></i>
                    </div>
                    <div class="info">
                        <p class="info-title">Python 11期火爆招生</p>
                        <p class="info-content">
                            我懵懵懂懂过了一年
                            这一年似乎没有改变
                            守着你离开后的世界
                            空空如也
                            白天和晚上都是冬夜
                            悲伤的到来我从不拒绝
                            反正亦是空空空空如也
                        </p>
                        <p class="info-link"><a href="">查看更多</a></p>
                    </div>
                </div>
                <div class="item left">
                    <div class="icon left">
                        <i class="fa fa-bell-o"></i>
                    </div>
                    <div class="info">
                        <p class="info-title">Python 11期火爆招生</p>
                        <p class="info-content">
                            我懵懵懂懂过了一年
                            这一年似乎没有改变
                            守着你离开后的世界
                            空空如也
                            白天和晚上都是冬夜
                            悲伤的到来我从不拒绝
                            反正亦是空空空空如也
                        </p>
                        <p class="info-link"><a href="">查看更多</a></p>
                    </div>
                </div>
            </div>
        </div>
        <!--        课程介绍        -->
        <div class="clearfix">
            <div class="title">&nbsp;课程介绍</div>
            <div class="course-content content-center">
                <div class="item left">
                    <div class="item-center">
                        <p class="center"><img src="public/images/teacher/001.jpg" class="tea-img" alt=""></p>
                        <p class="center"><a href="" class="item-name">Linux脱裤班</a></p>
                        <p class="center"><a href="" class="item-intro">
                            我懵懵懂懂过了一年
                            徘徊在石板路的街边
                            曾经笑容灿烂
                            如今却空空如也
                            一切的星光都已陨灭
                            得过且过是我如今速写
                            无所谓让痛重叠</a>
                        </p>
                    </div>
                </div>
                <div class="item left">
                    <div class="item-center">
                        <p class="center"><img src="public/images/teacher/002.jpg" class="tea-img" alt=""></p>
                        <p class="center"><a href="" class="item-name">Linux脱裤班</a></p>
                        <p class="center"><a href="" class="item-intro">
                            我懵懵懂懂过了一年
                            徘徊在石板路的街边
                            曾经笑容灿烂
                            如今却空空如也
                            一切的星光都已陨灭
                            得过且过是我如今速写
                            无所谓让痛重叠</a>
                        </p>
                    </div>
                </div>
                <div class="item left">
                    <div class="item-center">
                        <p class="center"><img src="public/images/teacher/003.jpg" class="tea-img" alt=""></p>
                        <p class="center"><a href="" class="item-name">Linux脱裤班</a></p>
                        <p class="center"><a href="" class="item-intro">
                            我懵懵懂懂过了一年
                            徘徊在石板路的街边
                            曾经笑容灿烂
                            如今却空空如也
                            一切的星光都已陨灭
                            得过且过是我如今速写
                            无所谓让痛重叠</a>
                        </p>
                    </div>
                </div>
                <div class="item left">
                    <div class="item-center">
                        <p class="center"><img src="public/images/teacher/004.jpg" class="tea-img" alt=""></p>
                        <p class="center"><a href="" class="item-name">Linux脱裤班</a></p>
                        <p class="center"><a href="" class="item-intro">
                            我懵懵懂懂过了一年
                            徘徊在石板路的街边
                            曾经笑容灿烂
                            如今却空空如也
                            一切的星光都已陨灭
                            得过且过是我如今速写
                            无所谓让痛重叠</a>
                        </p>
                    </div>
                </div>
                <div class="item left">
                    <div class="item-center">
                        <p class="center"><img src="public/images/teacher/005.jpg" class="tea-img" alt=""></p>
                        <p class="center"><a href="" class="item-name">Linux脱裤班</a></p>
                        <p class="center"><a href="" class="item-intro">
                            我懵懵懂懂过了一年
                            徘徊在石板路的街边
                            曾经笑容灿烂
                            如今却空空如也
                            一切的星光都已陨灭
                            得过且过是我如今速写
                            无所谓让痛重叠</a>
                        </p>
                    </div>
                </div>
                <div class="item left">
                    <div class="item-center">
                        <p class="center"><img src="public/images/teacher/006.jpg" class="tea-img" alt=""></p>
                        <p class="center"><a href="" class="item-name">Linux脱裤班</a></p>
                        <p class="center"><a href="" class="item-intro">
                            我懵懵懂懂过了一年
                            徘徊在石板路的街边
                            曾经笑容灿烂
                            如今却空空如也
                            一切的星光都已陨灭
                            得过且过是我如今速写
                            无所谓让痛重叠</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--        学员就业        -->
        <div class="clearfix">
            <div class="title">&nbsp;学员就业</div>
            <div class="stu-content content-center">
                <div class="stu-outstanding clearfix">
                    <div class="stu-info left">
                        <div class="stu-item left">
                            <img src="public/images/student/001.jpg" class="stu-img" alt="">
                            <div>
                                <i class="fa fa-suitcase" aria-hidden="true"></i>&nbsp; 200000/月
                            </div>
                            <div>
                                <i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp; bilibili爱李脑狮
                            </div>
                        </div>
                        <div class="stu-intro left">
                            <p class="stu-name">爱李脑狮</p>
                            <p class="star">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </p>
                            <p>
                                大家好，7月的高产月！~又给大家带来一支古风原创！~
                                这首歌一出来就特别喜欢，超级合自己的口味，所以也就心血编了出来！~
                                希望大家喜欢，同样没有难度可以随意翻跳！~
                            </p>
                        </div>
                    </div>
                    <div class="recruit-info left">
                        <p class="rec-title">招聘信息</p>
                        <div>
                            <div class="rec-item clearfix">
                                <a href="" class="rec-name left">bilibiliUP主</a>
                                <a href="" class="rec-price right">10000/月</a>
                            </div>
                            <div class="rec-item clearfix">
                                <a href="" class="rec-name left">bilibiliUP主</a>
                                <a href="" class="rec-price right">10000/月</a>
                            </div>
                            <div class="rec-item clearfix">
                                <a href="" class="rec-name left">bilibiliUP主</a>
                                <a href="" class="rec-price right">10000/月</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stu-othor">
                    <div>
                        <div class="stu-item left">
                            <img src="public/images/student/001.jpg" class="stu-img" alt="">
                            <p>bilibili爱李脑狮</p>
                            <p>200000/月</p>
                        </div>
                        <div class="stu-item left">
                            <img src="public/images/student/001.jpg" class="stu-img" alt="">
                            <p>bilibili爱李脑狮</p>
                            <p>200000/月</p>
                        </div>
                        <div class="stu-item left">
                            <img src="public/images/student/001.jpg" class="stu-img" alt="">
                            <p>bilibili爱李脑狮</p>
                            <p>200000/月</p>
                        </div>
                        <div class="stu-item left">
                            <img src="public/images/student/001.jpg" class="stu-img" alt="">
                            <p>bilibili爱李脑狮</p>
                            <p>200000/月</p>
                        </div>
                        <div class="stu-item left">
                            <img src="public/images/student/001.jpg" class="stu-img" alt="">
                            <p>bilibili爱李脑狮</p>
                            <p>200000/月</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        校园生活        -->
        <div class="clearfix">
            <div class="title">&nbsp;校园生活</div>
            <div class="school-content content-center">
                <div class="item left">
                    <div class="info">
                        <div class="img-show left">
                            <img src="public/images/school/003.jpg" class="school-img" alt="">
                        </div>
                        <div class="info-show hide">
                            <div class="info-center">
                                <p class="first">SARA LISBON</p>
                                <p class="second">Designer</p>
                                <p class="third">一切的星光都已陨灭
                                    得过且过是我如今速写
                                    无所谓让痛重叠
                                </p>
                                <p class="link-icon">
                                    <a href="" class="a-bor"><i class="fa fa-weixin"  aria-hidden="true"></i></a>
                                    <a href="" class="a-bor"><i class="fa fa-tencent-weibo"  aria-hidden="true"></i></a>
                                    <a href="" class="a-bor"><i class="fa fa-weibo"  aria-hidden="true"></i></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item left">
                    <div class="info">
                        <div class="img-show left">
                            <img src="public/images/school/004.jpg" class="school-img" alt="">
                        </div>
                        <div class="info-show hide">
                            <div class="info-center">
                                <p class="first">SARA LISBON</p>
                                <p class="second">Designer</p>
                                <p class="third">一切的星光都已陨灭
                                    得过且过是我如今速写
                                    无所谓让痛重叠
                                </p>
                                <p class="link-icon">
                                    <a href="" class="a-bor"><i class="fa fa-weixin"  aria-hidden="true"></i></a>
                                    <a href="" class="a-bor"><i class="fa fa-tencent-weibo"  aria-hidden="true"></i></a>
                                    <a href="" class="a-bor"><i class="fa fa-weibo"  aria-hidden="true"></i></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item left">
                    <div class="info">
                        <div class="img-show left">
                            <img src="public/images/school/005.jpg" class="school-img" alt="">
                        </div>
                        <div class="info-show hide">
                            <div class="info-center">
                                <p class="first">SARA LISBON</p>
                                <p class="second">Designer</p>
                                <p class="third">一切的星光都已陨灭
                                    得过且过是我如今速写
                                    无所谓让痛重叠
                                </p>
                                <p class="link-icon">
                                    <a href="" class="a-bor"><i class="fa fa-weixin"  aria-hidden="true"></i></a>
                                    <a href="" class="a-bor"><i class="fa fa-tencent-weibo"  aria-hidden="true"></i></a>
                                    <a href="" class="a-bor"><i class="fa fa-weibo"  aria-hidden="true"></i></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item left">
                    <div class="info">
                        <div class="img-show left">
                            <img src="public/images/school/006.jpg" class="school-img" alt="">
                        </div>
                        <div class="info-show hide">
                            <div class="info-center">
                                <p class="first">SARA LISBON</p>
                                <p class="second">Designer</p>
                                <p class="third">一切的星光都已陨灭
                                    得过且过是我如今速写
                                    无所谓让痛重叠
                                </p>
                                <p class="link-icon">
                                    <a href="" class="a-bor"><i class="fa fa-weixin"  aria-hidden="true"></i></a>
                                    <a href="" class="a-bor"><i class="fa fa-tencent-weibo"  aria-hidden="true"></i></a>
                                    <a href="" class="a-bor"><i class="fa fa-weibo"  aria-hidden="true"></i></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        企业合作        -->
        <div class="clearfix">
            <div class="title">&nbsp;企业合作</div>
            <div class="firm-content content-center">
                <div class="item-total">
                    <div class="firm-item left">
                        <div class="firm-icon left">
                            <a href=""><img src="public/images/firm/001.jpg" class="firm-img" alt=""></a>
                        </div>
                    </div>
                    <div class="firm-item left">
                        <div class="firm-icon left">
                            <a href=""><img src="public/images/firm/002.jpg" class="firm-img" alt=""></a>
                        </div>
                    </div>
                    <div class="firm-item left">
                        <div class="firm-icon left">
                            <a href=""><img src="public/images/firm/003.jpg" class="firm-img" alt=""></a>
                        </div>
                    </div>
                    <div class="firm-item left">
                        <div class="firm-icon left">
                            <a href=""><img src="public/images/firm/004.jpg" class="firm-img" alt=""></a>
                        </div>
                    </div>
                    <div class="firm-item left">
                        <div class="firm-icon left">
                            <a href=""><img src="public/images/firm/005.jpg" class="firm-img" alt=""></a>
                        </div>
                    </div>
                    <div class="firm-item left">
                        <div class="firm-icon left">
                            <a href=""><img src="public/images/firm/006.jpg" class="firm-img" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!--    版权说明    -->
    <div class="bottom content-center">
        <div class="copy-right center">
            <p>
                <a href="">关于我们</a>
                <a href="">联系我们</a>
                <a href="">招贤纳士</a>
                <a href="">意见反馈</a>
            </p>
            <p>备案号 XXXXXXXXXXXXXXXXX</p>
            <p>Copyright ? 2013-2018 XXXX  XXXX.com All Rights Reserved. 备案号 XXXXXXXXXXXXXXXXX</p>
        </div>
    </div>

<!--    客服      -->
    <div class="service">
        <div class="icon center">
            <span class="glyphicon glyphicon-earphone"> </span>
        </div>
        <div class="text center">
            <span>智能客服</span>
        </div>
    </div>
</body>
</html>
<script>
    $(function(){
        $(‘.bxslider‘).bxSlider({
            auto:true
        });
    });
</script>

index.html

知识点：

1.bxslider等插件的使用

2.hover的熟练使用

3.position,float等定位使用

4.font-weight的使用

teacher样式：

.teacher-content .item{

}

.teacher-content .item .tea-pic{
    width: 160px;
    height: 210px;
    padding: 30px 20px;
}

.teacher-content .item .tea-pic .tea-img{
    width: 120px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid white;
}

.teacher-content .item .item-center{
    padding-top: 30px;
    width: 820px;
}

.teacher-content .item .item-center .item-name{
    text-decoration: none;
    font-size: 21px;
    color: #ff8100;
    font-family: "Adobe 仿宋 Std R";
}

.teacher-content .item .item-center .item-link a{
    text-decoration: none;
    color: #ff8100;
    margin-right: 10px;
}

.teacher-content .item .item-center .item-intro,.item-detail{
    font-size: 14px;
    color: black;
}

.teacher-content .item .item-center .item-detail{
    border-top: 1px solid #e0e0e0;
    padding-top: 15px;
}

/*
        school-content
*/
/*.school-content{*/
/*padding-left: 20px;*/
/*padding-right: 20px;*/
/*}*/

.school-content .item{
    width:25%;
}

.school-content .item .info .img-show .school-img{
    width: 215px;
    height: 215px;
}

.school-content .item .info .info-show{
    width: 215px;
    height: 215px;
    background-color: #616060;
    text-align: center;
    color: white;
    padding:36px 26px;
}

.school-content .info-show .info-center{
    width: 160px;
    height: 160px;
}

.school-content .info-show .info-center .first{
    font-size: 16px;
}

.school-content .info-show .info-center .second{
    font-size: 12px;
}

.school-content .info-show .info-center .third{
    font-size: 12px;
}

.school-content .info-show .info-center .link-icon .a-bor{
    display: inline-block;
    height: 40px;
    width: 40px;
    padding: 5px;
    border-radius: 50px;
    border: 1px solid white;
    margin-right: 4px;
}

.school-content .info-show .info-center .link-icon .fa{
    font-size: 24px;
    color: white;
}

/*      设置position      */
.school-content .item .info{
    position: relative;
}

.school-content .item .info .info-show{
    position: absolute;
    left:0px;
}

.school-content .item .info:hover .info-show{
    display: block !important;
}

teacher.css

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/plugins/bxslider/dist/jquery.bxslider.css">
    <link rel="stylesheet" href="style/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style/css/common.css">
    <link rel="stylesheet" href="style/css/teacher.css">

    <script src="style/js/jquery.js"></script>
    <script src="style/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="style/plugins/bxslider/dist/jquery.bxslider.min.js"></script>
</head>
<body>
<!--    头部菜单    -->
<div class="head">
    <div class="menu">
        <div class="left">
            <div class="left logo"><a href="./"></a></div>
            <a href="index.html">首页</a>
            <a href="teacher.html">师资团队</a>
            <a href="">学员就业</a>
            <a href="">在线视频</a>
            <a href="">开源软件</a>
            <a href="problem.html">常见问题</a>
            <a href="about.html">关于我们</a>
        </div>
        <div class="right">
            <div class="tel">
                <span class="glyphicon glyphicon-headphones" aria-hidden="true"> </span>
                <span>183-40965007</span>
            </div>
        </div>
    </div>
</div>

<!--    图片      -->
<div>
    <div class="slider content-center">
        <ul class="bxslider">
            <li><img src="public/images/bxsilder/2.jpg" alt=""></li>
        </ul>
    </div>
</div>

<!--    主要内容    -->
<div class="content">
    <!--        教师介绍        -->
    <div class="clearfix">
        <div class="teacher-content content-center">
            <div class="item left">
                <div class="tea-pic left">
                    <img src="public/images/teacher/007.jpg" class="tea-img" alt="">
                </div>
                <div class="item-center left">
                    <p><a href="" class="item-name">爱李脑狮</a></p>
                    <p class="item-intro">
                        我懵懵懂懂过了一年
                        徘徊在石板路的街边
                    </p>
                    <p class="item-link">
                        <a href="">
                            <i class="fa fa-weibo" aria-hidden="true">&nbsp;微博</i>
                        </a>
                        <a href="">
                            <i class="fa fa-tencent-weibo" aria-hidden="true">&nbsp;博客</i>
                        </a>
                        <a href="">
                            <i class="fa fa-video-camera" aria-hidden="true">&nbsp;视频</i>
                        </a>
                    </p>
                    <p class="item-detail">
                        我懵懵懂懂过了一年
                        徘徊在石板路的街边<
                        曾经笑容灿烂
                        如今却空空如也
                        一切的星光都已陨灭
                        得过且过是我如今速写
                        无所谓让痛重叠
                    </p>
                </div>
            </div>
            <div class="item left">
                <div class="tea-pic left">
                    <img src="public/images/teacher/007.jpg" class="tea-img" alt="">
                </div>
                <div class="item-center left">
                    <p><a href="" class="item-name">爱李脑狮</a></p>
                    <p class="item-intro">
                        我懵懵懂懂过了一年
                        徘徊在石板路的街边
                    </p>
                    <p class="item-link">
                        <a href="">
                            <i class="fa fa-weibo" aria-hidden="true">&nbsp;微博</i>
                        </a>
                        <a href="">
                            <i class="fa fa-tencent-weibo" aria-hidden="true">&nbsp;博客</i>
                        </a>
                        <a href="">
                            <i class="fa fa-video-camera" aria-hidden="true">&nbsp;视频</i>
                        </a>
                    </p>
                    <p class="item-detail">
                        我懵懵懂懂过了一年
                        徘徊在石板路的街边<
                        曾经笑容灿烂
                        如今却空空如也
                        一切的星光都已陨灭
                        得过且过是我如今速写
                        无所谓让痛重叠
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--        校园生活        -->
    <div class="clearfix">
        <div class="school-content content-center">
            <div class="item left">
                <div class="info">
                    <div class="img-show left">
                        <img src="public/images/school/003.jpg" class="school-img" alt="">
                    </div>
                    <div class="info-show hide">
                        <div class="info-center">
                            <p class="first">SARA LISBON</p>
                            <p class="second">Designer</p>
                            <p class="third">一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </p>
                            <p class="link-icon">
                                <a href="" class="a-bor"><i class="fa fa-weixin"  aria-hidden="true"></i></a>
                                <a href="" class="a-bor"><i class="fa fa-tencent-weibo"  aria-hidden="true"></i></a>
                                <a href="" class="a-bor"><i class="fa fa-weibo"  aria-hidden="true"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item left">
                <div class="info">
                    <div class="img-show left">
                        <img src="public/images/school/004.jpg" class="school-img" alt="">
                    </div>
                    <div class="info-show hide">
                        <div class="info-center">
                            <p class="first">SARA LISBON</p>
                            <p class="second">Designer</p>
                            <p class="third">一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </p>
                            <p class="link-icon">
                                <a href="" class="a-bor"><i class="fa fa-weixin"  aria-hidden="true"></i></a>
                                <a href="" class="a-bor"><i class="fa fa-tencent-weibo"  aria-hidden="true"></i></a>
                                <a href="" class="a-bor"><i class="fa fa-weibo"  aria-hidden="true"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item left">
                <div class="info">
                    <div class="img-show left">
                        <img src="public/images/school/005.jpg" class="school-img" alt="">
                    </div>
                    <div class="info-show hide">
                        <div class="info-center">
                            <p class="first">SARA LISBON</p>
                            <p class="second">Designer</p>
                            <p class="third">一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </p>
                            <p class="link-icon">
                                <a href="" class="a-bor"><i class="fa fa-weixin"  aria-hidden="true"></i></a>
                                <a href="" class="a-bor"><i class="fa fa-tencent-weibo"  aria-hidden="true"></i></a>
                                <a href="" class="a-bor"><i class="fa fa-weibo"  aria-hidden="true"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item left">
                <div class="info">
                    <div class="img-show left">
                        <img src="public/images/school/006.jpg" class="school-img" alt="">
                    </div>
                    <div class="info-show hide">
                        <div class="info-center">
                            <p class="first">SARA LISBON</p>
                            <p class="second">Designer</p>
                            <p class="third">一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </p>
                            <p class="link-icon">
                                <a href="" class="a-bor"><i class="fa fa-weixin"  aria-hidden="true"></i></a>
                                <a href="" class="a-bor"><i class="fa fa-tencent-weibo"  aria-hidden="true"></i></a>
                                <a href="" class="a-bor"><i class="fa fa-weibo"  aria-hidden="true"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--    版权说明    -->
<div class="bottom content-center">
    <div class="copy-right center">
        <p>
            <a href="">关于我们</a>
            <a href="">联系我们</a>
            <a href="">招贤纳士</a>
            <a href="">意见反馈</a>
        </p>
        <p>备案号 XXXXXXXXXXXXXXXXX</p>
        <p>Copyright ? 2013-2018 XXXX  XXXX.com All Rights Reserved. 备案号 XXXXXXXXXXXXXXXXX</p>
    </div>
</div>

<!--    客服      -->
<div class="service">
    <div class="icon center">
        <span class="glyphicon glyphicon-earphone"> </span>
    </div>
    <div class="text center">
        <span>智能客服</span>
    </div>
</div>
</body>
</html>
<script>
</script>

teacher.html

知识点：

1.border的回顾（绘制图形）

2.border-radius边框的使用

.problem-content .title{
    margin-top: 40px;
    margin-bottom: 30px;
}

.problem-content .title .title-center{
    color: #ffb032;
    position: relative;
    display: block;    /*设置为块级标签，占据一行*/
}

.problem-content .title .title-center q{
    font-size: 24px;
}

.problem-content .title .title-center q:before{
    content: ‘■‘;
    width: 82%;
    position: absolute;
    top: 24%;
    left: 0px;
    font-size: 18px;
}

.problem-content .title .title-center q:after{
    content: ‘■‘;
    width: 82%;
    position: absolute;
    top: 24%;
    right: 0px;
    font-size: 18px;
}

.problem-content .title .title-center:before{
    content: ‘ ‘;
    width: 404px;
    position: absolute;
    top: 22px;
    left: 0px;
    height: 2px;
    background-color: #ffb032;
}

.problem-content .title .title-center:after{
    content: ‘ ‘;
    width: 404px;
    position: absolute;
    top: 22px;
    left: 575px;
    height: 2px;
    background-color: #ffb032;
}

.problem-content .question{
    padding-top: 15px;
}

.item-tit .fa{
    font-size: 18px;
    color: #9d9d9d;
}

.question .item{
    width: 50%;
}

.question .item .item-que .que{
    display: block;
    margin-top: 10px;
    margin-bottom: 30px;
    height: 24px;
}

.question .item .item-que .que span{
    font-weight: 600;
    font-size: 18px;
    color: white;
    background-color: #ffb032;
    display: inline-block;
    line-height: 26px;
    height: 26px;
    margin-right: 10px;
}

.question .item .item-que .item-ans{
    display: block;
    position: relative;
    margin-right: 25px;
    margin-bottom: 20px;
}

.question .item .item-que .item-ans:before{
    content: ‘◣‘;
    color: rgba(157, 157, 157, 0.3);
    font-size: 24px;
    position: absolute;
    left:-2px;
    transform: scale(1,2);
    -webkit-transform: scale(1,2);
    top: -25px;
}

.question .item .item-que .item-ans .ans{
    display: block;
    background-color: rgba(157, 157, 157, 0.3);
    font-size: 18px;
    padding: 8px 5px;
}

problem.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/plugins/bxslider/dist/jquery.bxslider.css">
    <link rel="stylesheet" href="style/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style/css/common.css">
    <link rel="stylesheet" href="style/css/problem.css">

    <script src="style/js/jquery.js"></script>
    <script src="style/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="style/plugins/bxslider/dist/jquery.bxslider.min.js"></script>
</head>
<body>
<!--    头部菜单    -->
<div class="head">
    <div class="menu">
        <div class="left">
            <div class="left logo"><a href="./"></a></div>
            <a href="index.html">首页</a>
            <a href="teacher.html">师资团队</a>
            <a href="">学员就业</a>
            <a href="">在线视频</a>
            <a href="">开源软件</a>
            <a href="problem.html">常见问题</a>
            <a href="about.html">关于我们</a>
        </div>
        <div class="right">
            <div class="tel">
                <span class="glyphicon glyphicon-headphones" aria-hidden="true"> </span>
                <span>183-40965007</span>
            </div>
        </div>
    </div>
</div>

<!--    主要内容    -->
<div class="content">
    <!--        常见问题        -->
    <div class="clearfix">
        <div class="problem-content content-center">
            <div class="title center">
                <span class="title-center"><q>常见问题</q></span>
            </div>
            <div class="question">
                <div class="item left">
                    <div class="item-tit">
                        <i class="fa fa-commenting" aria-hidden="true">&nbsp; 课程相关问题</i>
                    </div>
                    <div class="item-que">
                        <span class="que">
                            <span>Ｑ1</span>我懵懵懂懂过了一年
                        </span>
                        <span class="item-ans hide">
                            <span class="ans">
                                徘徊在石板路的街边
                                曾经笑容灿烂
                                如今却空空如也
                                一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </span>
                        </span>
                    </div>
                    <div class="item-que">
                        <span class="que">
                            <span>Ｑ2</span>徘徊在石板路的街边
                        </span>
                        <span class="item-ans hide">
                            <span class="ans">
                                徘徊在石板路的街边
                                曾经笑容灿烂
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </span>
                        </span>
                    </div>
                    <div class="item-que">
                        <span class="que">
                            <span>Ｑ3</span>如今却空空如也
                        </span>
                        <span class="item-ans hide">
                            <span class="ans">
                                一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </span>
                        </span>
                    </div>
                </div>
                <div class="item left">
                    <div class="item-tit">
                        <i class="fa fa-commenting" aria-hidden="true">&nbsp; 报名及费用问题</i>
                    </div>
                    <div class="item-que">
                        <span class="que">
                            <span>Ｑ1</span>我懵懵懂懂过了一年
                        </span>
                        <span class="item-ans hide">
                            <span class="ans">
                                徘徊在石板路的街边
                                曾经笑容灿烂
                                如今却空空如也
                                一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </span>
                        </span>
                    </div>
                    <div class="item-que">
                        <span class="que">
                            <span>Ｑ2</span>徘徊在石板路的街边
                        </span>
                        <span class="item-ans hide">
                            <span class="ans">
                                徘徊在石板路的街边
                                曾经笑容灿烂
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </span>
                        </span>
                    </div>
                </div>
                <div class="item left">
                    <div class="item-tit">
                        <i class="fa fa-commenting" aria-hidden="true">&nbsp; 学员关心问题</i>
                    </div>
                    <div class="item-que">
                        <span class="que">
                            <span>Ｑ1</span>我懵懵懂懂过了一年
                        </span>
                        <span class="item-ans hide">
                            <span class="ans">
                                徘徊在石板路的街边
                                曾经笑容灿烂
                                如今却空空如也
                                一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </span>
                        </span>
                    </div>
                    <div class="item-que">
                        <span class="que">
                            <span>Ｑ2</span>徘徊在石板路的街边
                        </span>
                        <span class="item-ans hide">
                            <span class="ans">
                                徘徊在石板路的街边
                                曾经笑容灿烂
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </span>
                        </span>
                    </div>
                    <div class="item-que">
                        <span class="que">
                            <span>Ｑ3</span>如今却空空如也
                        </span>
                        <span class="item-ans hide">
                            <span class="ans">
                                一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </span>
                        </span>
                    </div>
                    <div class="item-que">
                        <span class="que">
                            <span>Ｑ4</span>得过且过是我如今速写
                        </span>
                        <span class="item-ans hide">
                            <span class="ans">
                                一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--    版权说明    -->
<div class="bottom content-center">
    <div class="copy-right center">
        <p>
            <a href="">关于我们</a>
            <a href="">联系我们</a>
            <a href="">招贤纳士</a>
            <a href="">意见反馈</a>
        </p>
        <p>备案号 XXXXXXXXXXXXXXXXX</p>
        <p>Copyright ? 2013-2018 XXXX  XXXX.com All Rights Reserved. 备案号 XXXXXXXXXXXXXXXXX</p>
    </div>
</div>

<!--    客服      -->
<div class="service">
    <div class="icon center">
        <span class="glyphicon glyphicon-earphone"> </span>
    </div>
    <div class="text center">
        <span>智能客服</span>
    </div>
</div>
</body>
</html>
<script>
    $(".item-que").click(function(){
        var val = $(this).find(".item-ans").attr(‘for‘)
        if(val==null){
            $(this).find(".item-ans").removeClass(‘hide‘)
            $(this).find(".item-ans").attr(‘for‘,1)
        }
        else if(val==2){
            $(this).find(".item-ans").attr(‘for‘,1)
            $(this).find(".item-ans").fadeIn("slow");
        }else{
            $(this).find(".item-ans").attr(‘for‘,2)
            $(this).find(".item-ans").fadeOut("slow");
        }
    })

</script>

problem.html

知识点：

1.jquery的使用fadein,fadeout,toggle,click等事件响应

2.before，after属性的使用，进行样式修改，例如对话框左上角的小三角形，以及标题栏上的左右横线及点

                 

tab页面：

.about-title .title{
    display: block;
    font-size: 24px;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 40px;
    position: relative;
}

.about-title .title:after{
    position: absolute;
    content: ‘ ‘;
    height: 2px;
    top: 150%;
    width: 35px;
    left: 472px;
    background-color: #30bd28;
}

.about-title p{
    width: 80%;
    margin: 0 auto;
}

.about-content{
    margin-top: 40px;
}

.about-content .title-tag {
    list-style: none;
}

.about-content .title-tag li{
    float: left;
    height: 32px;
    line-height: 32px;
    font-size: 24px;
    display: inline-block;
    position: relative;
    width: 196px;
    padding-bottom: 50px;
    border-bottom: 3px solid #f78b1e;
    margin-bottom: 35px;
    position: relative;
}

.about-content .title-tag .active:before{
    position: absolute;
    content: ‘▼‘;
    transform: scale(1.5,1);
    -webkit-transform: scale(1.5,1);
    top: 89%;
    left: 86px;
}

.active{
    color: #f78b1e;
}

.about .item .firm-intro{
    width: 60%;
    text-indent:31px;
    margin-bottom: 15px;
}

.grow-sty .title {
    display: block;
    width: 80px;
    padding-bottom: 5px;
    border-bottom: 2px solid #17801a;
    margin-bottom: 20px;
}

.grow-sty p{
    text-indent:31px;
}

.item .medio-title .title-tag{
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.item .medio-title .title-tag2{
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.item .medio-video{
    padding-left: 10px;
    padding-right: 10px;
}

.item .medio-video video{
    width: 100%;
    height: 100%;
}

.item-job .job-tag li{
    display: inline-block;
    height: 32px;
    line-height: 28px;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: white;
    color: #92afdf;
    border: 1px solid #92afdf;
}

.item-job .job-tag .active{
    background-color: #f78b1e;
    color: white;
    border: 1px solid #f78b1e;
}

.item-content{
    padding: 20px;
    background-color: #efeaea;
}

.job-content .job-name{
    font-size: 32px;
}

.job-content .job-desc{
    color: #7c84ff;
    display: block;
    margin-top: 20px;
}

.job-content .job-req{
    display: block;
    text-indent: 38px;
    font-size: 16px;
}

.firm-addr span{
    border-bottom: 1px solid #cfcfcf;
    position: relative;
    padding-bottom: 10px;
    font-weight: 500;
}

.firm-addr span:before{
    position: absolute;
    content: ‘ ‘;
    height: 2px;
    top: 100%;
    width: 80px;
    left: 0px;
    background-color: #30bd28;
}

.firm-info{
    padding: 20px;
    position: relative;
}

.firm-info:before{
    position: absolute;
    content: ‘ ‘;
    height: 1px;
    top: 19%;
    width: 92%;
    left: 80px;
    background-color: #cfcfcf;
}

.firm-info .firm-address{
    width: 50%;
    padding-right: 40px;
}

.firm-info .firm-map{
    width: 50%;
}

.firm-info .firm-address .firm-item span{
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
}

.firm-info .firm-address .firm-item .firm-item-tag{
    display: block;
    font-size: 24px;
    font-weight: 600;
    margin-top: 30px;
}

.firm-info .firm-map iframe{
    width: 100%;
    height: 300px;
}

about.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/plugins/bxslider/dist/jquery.bxslider.css">
    <link rel="stylesheet" href="style/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style/css/common.css">
    <link rel="stylesheet" href="style/css/about.css">

    <script src="style/js/jquery.js"></script>
    <script src="style/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="style/plugins/bxslider/dist/jquery.bxslider.min.js"></script>
</head>
<body>
<!--    头部菜单    -->
<div class="head">
    <div class="menu">
        <div class="left">
            <div class="left logo"><a href="./"></a></div>
            <a href="index.html">首页</a>
            <a href="teacher.html">师资团队</a>
            <a href="">学员就业</a>
            <a href="">在线视频</a>
            <a href="">开源软件</a>
            <a href="problem.html">常见问题</a>
            <a href="about.html">关于我们</a>
        </div>
        <div class="right">
            <div class="tel">
                <span class="glyphicon glyphicon-headphones" aria-hidden="true"> </span>
                <span>183-40965007</span>
            </div>
        </div>
    </div>
</div>

<!--    主要内容    -->
<div class="content">
    <!--        关于我们        -->
    <div class="clearfix">
        <div class="about-title content-center center">
            <span class="title">寄明月</span>
            <p> SING女团
                作词：李懋扬
                作曲：李懋扬
            </p>
            <p class="">
                穿过了小巷后的古街
                青墙旁你遥望夕阳斜
                只因是不经意的一瞥
                扰乱我思绪不舍昼夜
                想化作庄周变成蝴蝶
                驾青云穿过
            </p>
        </div>
        <div class="about-content content-center">
            <div class="title center">
                <ul class="title-tag">
                    <li class="active" for="1">公司简介</li>
                    <li for="2">媒体报道</li>
                    <li for="3">人才招聘</li>
                    <li for="4">学习环境</li>
                    <li for="5">联系我们</li>
                </ul>
            </div>
            <div class="about">
                <div class="item" for="1">
                    <div class="firm-intro">
                        穿过了小巷后的古街
                        青墙旁你遥望夕阳斜
                        只因是不经意的一瞥
                        扰乱我思绪不舍昼夜
                        想化作庄周变成蝴蝶
                        驾青云穿过繁枝茂叶
                        纵然是群山层层叠叠
                        也无心在此流连停歇
                        将相思寄明月
                        期盼你能察觉
                        将你写作诗阕
                        送千里无邪
                    </div>
                    <div class="grow-sty">
                        <span class="title">
                            成长故事
                        </span>
                        <p>
                            <p>
                                穿过了小巷后的古街
                                青墙旁你遥望夕阳斜
                                只因是不经意的一瞥
                                扰乱我思绪不舍昼夜
                                想化作庄周变成蝴蝶
                                驾青云穿过繁枝茂叶
                                纵然是群山层层叠叠
                                也无心在此流连停歇
                                将相思寄明月
                                期盼你能察觉
                                将你写作诗阕
                                送千里无邪
                            </p>
                            <p>
                                你就是梦浸白了新月
                                才会有悲欢离合阴晴圆缺
                                你就是风染红了枫叶
                                才会让我的思念漫山遍野
                                你就是泪浸白了初雪
                                才会如离人来去飘洒摇曳
                                你就是你染红了岁月
                                改变我黑白而无言的世界
                                如溪水潺潺淌过古街
                                带走了如梦般的时节
                                小桥上人潮络绎不绝
                                牵引我思绪层出不迭
                                若不识梁祝变成蝴蝶
                                驾紫烟穿过天上宫阙
                                绝不知人间多愁离别
                                吹落叶散作秋风清切
                                将相思寄明月
                                心缱绻意难决
                                将此情置长夜
                                似繁星明灭
                            </p>
                            <p>
                                你就是梦浸白了新月
                                才会有悲欢离合阴晴圆缺
                                你就是风染红了枫叶
                                才会让我的思念漫山遍野
                                你就是泪浸白了初雪
                                才会如离人来去飘洒摇曳
                                你就是你染红了岁月
                                改变我黑白而无言的世界
                                你就是梦浸白了新月
                                才会有悲欢离合阴晴圆缺
                                你就是风染红了枫叶
                                才会让我的思念漫山遍野
                                你就是泪浸白了初雪
                                才会如离人来去飘洒摇曳
                                你就是你染红了岁月
                                改变我黑白而无言的世界
                            </p>
                        </p>
                    </div>
                </div>
                <div class="item hide" for="2">
                    <div class="medio-title center">
                        <span class="title-tag">
                        将相思寄明月
                        </span>
                        <span class="title-tag2">
                            期盼你能察觉
                            将你写作诗阕
                            送千里无邪
                        </span>
                    </div>
                    <div class="medio-video">
                        <video controls="controls" loop="loop">
                            <source src="public/videos/001.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                <div class="item hide" for="3">
                    <div class="item-job">
                        <ul class="job-tag">
                            <li class="active" for="1">资深python讲师</li>
                            <li for="2">资深linux运维师</li>
                        </ul>
                    </div>
                    <div class="item-content">
                        <div class="job-content" for="1">
                            <span class="job-name">
                                资深python讲师
                            </span>
                            <div>
                                <span class="job-desc">职位描述:</span>
                                <span class="job-req">
                                    1.徘徊在石板路的街边
                                    曾经笑容灿烂
                                </span>
                                <span class="job-req">
                                    2.如今却空空如也
                                    一切的星光都已陨灭
                                    得过且过是我如今速写
                                    无所谓让痛重叠
                                </span>
                            </div>
                            <div>
                                <span class="job-desc">职位说明:</span>
                                <span class="job-req">
                                    1.穿过了小巷后的古街 青墙旁你遥望夕阳斜
                                </span>
                                <span class="job-req">
                                    2. 只因是不经意的一瞥 扰乱我思绪不舍昼夜 想化作庄周变成蝴蝶 驾青云穿过
                                </span>
                                <span class="job-req">
                                    3. 你就是梦浸白了新月
                                才会有悲欢离合阴晴圆缺
                                你就是风染红了枫叶
                                </span>
                            </div>
                            <div>
                                <span class="job-desc">人才需求:</span>
                                <span class="job-req">
                                    1.
                                才会让我的思念漫山遍野
                                你就是泪浸白了初雪
                                才会如离人来去飘洒摇曳
                                </span>
                                <span class="job-req">
                                    2.
                                你就是你染红了岁月
                                改变我黑白而无言的世界
                                </span>
                                <span class="job-req">
                                    3.
                                如溪水潺潺淌过古街
                                带走了如梦般的时节
                                小桥上人潮络绎不绝
                                牵引我思绪层出不迭
                                </span>
                                <span class="job-req">
                                    4.
                                将相思寄明月
                                心缱绻意难决
                                将此情置长夜
                                似繁星明灭
                                </span>
                                <span class="job-req">
                                    5.
                                若不识梁祝变成蝴蝶
                                驾紫烟穿过天上宫阙
                                绝不知人间多愁离别
                                吹落叶散作秋风清切
                                </span>
                            </div>
                            <div>
                                <span class="job-desc">福利待遇:</span>
                                <span class="job-req">
                                    1.
                                你就是梦浸白了新月
                            才会有悲欢离合阴晴圆缺
                                </span>
                                <span class="job-req">
                                    2.
                                你就是风染红了枫叶
                            才会让我的思念漫山遍野
                                </span>
                                <span class="job-req">
                                    3.
                                你就是泪浸白了初雪
                            才会如离人来去飘洒摇曳
                                </span>
                                <span class="job-req">
                                    4.
                                你就是你染红了岁月
                            改变我黑白而无言的世界
                                </span>
                                <span class="job-req">
                                    5.
                                你就是梦浸白了新月
                            才会有悲欢离合阴晴圆缺
                                </span>
                                <span class="job-req">
                                    6.
                                你就是风染红了枫叶
                            才会让我的思念漫山遍野
                                </span>
                                <span class="job-req">
                                    7.
                                你就是泪浸白了初雪
                            才会如离人来去飘洒摇曳
                                </span>
                                <span class="job-req">
                                    8.
                                你就是你染红了岁月
                            改变我黑白而无言的世界
                                </span>
                            </div>
                        </div>
                        <div class="job-content hide" for="2">
                            <span class="job-name">
                                资深linux运维师
                            </span>
                            <div>
                                <span class="job-desc">职位描述:</span>
                                <span class="job-req">
                                    1.徘徊在石板路的街边
                                    曾经笑容灿烂
                                </span>
                                <span class="job-req">
                                    2.如今却空空如也
                                    一切的星光都已陨灭
                                    得过且过是我如今速写
                                    无所谓让痛重叠
                                </span>
                            </div>
                            <div>
                                <span class="job-desc">职位说明:</span>
                                <span class="job-req">
                                    1.穿过了小巷后的古街 青墙旁你遥望夕阳斜
                                </span>
                                <span class="job-req">
                                    2. 只因是不经意的一瞥 扰乱我思绪不舍昼夜 想化作庄周变成蝴蝶 驾青云穿过
                                </span>
                                <span class="job-req">
                                    3. 你就是梦浸白了新月
                                才会有悲欢离合阴晴圆缺
                                你就是风染红了枫叶
                                </span>
                            </div>
                            <div>
                                <span class="job-desc">人才需求:</span>
                                <span class="job-req">
                                    1.
                                才会让我的思念漫山遍野
                                你就是泪浸白了初雪
                                才会如离人来去飘洒摇曳
                                </span>
                                <span class="job-req">
                                    2.
                                你就是你染红了岁月
                                改变我黑白而无言的世界
                                </span>
                                <span class="job-req">
                                    3.
                                如溪水潺潺淌过古街
                                带走了如梦般的时节
                                小桥上人潮络绎不绝
                                牵引我思绪层出不迭
                                </span>
                                <span class="job-req">
                                    4.
                                将相思寄明月
                                心缱绻意难决
                                将此情置长夜
                                似繁星明灭
                                </span>
                                <span class="job-req">
                                    5.
                                若不识梁祝变成蝴蝶
                                驾紫烟穿过天上宫阙
                                绝不知人间多愁离别
                                吹落叶散作秋风清切
                                </span>
                            </div>
                            <div>
                                <span class="job-desc">福利待遇:</span>
                                <span class="job-req">
                                    1.
                                你就是梦浸白了新月
                            才会有悲欢离合阴晴圆缺
                                </span>
                                <span class="job-req">
                                    2.
                                你就是风染红了枫叶
                            才会让我的思念漫山遍野
                                </span>
                                <span class="job-req">
                                    3.
                                你就是泪浸白了初雪
                            才会如离人来去飘洒摇曳
                                </span>
                                <span class="job-req">
                                    4.
                                你就是你染红了岁月
                            改变我黑白而无言的世界
                                </span>
                                <span class="job-req">
                                    5.
                                你就是梦浸白了新月
                            才会有悲欢离合阴晴圆缺
                                </span>
                                <span class="job-req">
                                    6.
                                你就是风染红了枫叶
                            才会让我的思念漫山遍野
                                </span>
                                <span class="job-req">
                                    7.
                                你就是泪浸白了初雪
                            才会如离人来去飘洒摇曳
                                </span>
                                <span class="job-req">
                                    8.
                                你就是你染红了岁月
                            改变我黑白而无言的世界
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item hide" for="4">
                    <div class="firm-intro">
                        穿过了小巷后的古街
                        青墙旁你遥望夕阳斜
                        只因是不经意的一瞥
                        扰乱我思绪不舍昼夜
                        想化作庄周变成蝴蝶
                        驾青云穿过繁枝茂叶
                        纵然是群山层层叠叠
                        也无心在此流连停歇
                        将相思寄明月
                        期盼你能察觉
                        将你写作诗阕
                        送千里无邪
                    </div>
                    <div class="grow-sty">
                        <span class="title">
                            成长故事
                        </span>
                        <p>
                        <p>
                            穿过了小巷后的古街
                            青墙旁你遥望夕阳斜
                            只因是不经意的一瞥
                            扰乱我思绪不舍昼夜
                            想化作庄周变成蝴蝶
                            驾青云穿过繁枝茂叶
                            纵然是群山层层叠叠
                            也无心在此流连停歇
                            将相思寄明月
                            期盼你能察觉
                            将你写作诗阕
                            送千里无邪
                        </p>
                        <p>
                            你就是梦浸白了新月
                            才会有悲欢离合阴晴圆缺
                            你就是风染红了枫叶
                            才会让我的思念漫山遍野
                            你就是泪浸白了初雪
                            才会如离人来去飘洒摇曳
                            你就是你染红了岁月
                            改变我黑白而无言的世界
                            如溪水潺潺淌过古街
                            带走了如梦般的时节
                            小桥上人潮络绎不绝
                            牵引我思绪层出不迭
                            若不识梁祝变成蝴蝶
                            驾紫烟穿过天上宫阙
                            绝不知人间多愁离别
                            吹落叶散作秋风清切
                            将相思寄明月
                            心缱绻意难决
                            将此情置长夜
                            似繁星明灭
                        </p>
                        <p>
                            你就是梦浸白了新月
                            才会有悲欢离合阴晴圆缺
                            你就是风染红了枫叶
                            才会让我的思念漫山遍野
                            你就是泪浸白了初雪
                            才会如离人来去飘洒摇曳
                            你就是你染红了岁月
                            改变我黑白而无言的世界
                            你就是梦浸白了新月
                            才会有悲欢离合阴晴圆缺
                            你就是风染红了枫叶
                            才会让我的思念漫山遍野
                            你就是泪浸白了初雪
                            才会如离人来去飘洒摇曳
                            你就是你染红了岁月
                            改变我黑白而无言的世界
                        </p>
                        </p>
                    </div>
                </div>
                <div class="item hide" for="5">
                    <div class="firm-addr">
                        <span>
                            北京总部
                        </span>
                    </div>
                    <div class="firm-info">
                        <div class="firm-address left">
                            <div class="firm-item">
                                <span class="firm-item-tag">学校地址:</span>
                                <span>徘徊在石板路的街边
                                曾经笑容灿烂
                                </span>
                                <span>报名电话: 如今却空空如也
                                一切的星光都已陨灭
                                得过且过是我如今速写
                                无所谓让痛重叠
                                </span>
                            </div>
                            <hr>
                            <div class="firm-item">
                                <span class="firm-item-tag">周边交通:</span>
                                <span>徘徊在石板路的街边
                                    曾经笑容灿烂 得过且过是我如今速写
                                </span>
                            </div>
                        </div>
                        <div class="firm-map left">
                            <iframe src="map.html" frameborder="0" scrolling="no">
                            </iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--    版权说明    -->
<div class="bottom content-center">
    <div class="copy-right center">
        <p>
            <a href="">关于我们</a>
            <a href="">联系我们</a>
            <a href="">招贤纳士</a>
            <a href="">意见反馈</a>
        </p>
        <p>备案号 XXXXXXXXXXXXXXXXX</p>
        <p>Copyright ? 2013-2018 XXXX  XXXX.com All Rights Reserved. 备案号 XXXXXXXXXXXXXXXXX</p>
    </div>
</div>

<!--    客服      -->
<div class="service">
    <div class="icon center">
        <span class="glyphicon glyphicon-earphone"> </span>
    </div>
    <div class="text center">
        <span>智能客服</span>
    </div>
</div>
</body>
</html>
<script>
//      menu切换
    $(".about-content .title .title-tag li").click(function(){
        var index=$(this).attr(‘for‘)
        $(this).addClass(‘active‘).siblings().removeClass(‘active‘)
        $(".about .item").each(function(){
            var i = $(this).attr(‘for‘);
            if(i==index){
                $(this).removeClass(‘hide‘)
            }else{
                $(this).addClass(‘hide‘)
            }
        })
    })

//    职位切换
    $(".job-tag li").click(function(){
        var index=$(this).attr(‘for‘)
        $(this).addClass(‘active‘).siblings().removeClass(‘active‘)
        $(".item-content .job-content").each(function(){
            var i = $(this).attr(‘for‘);
            if(i==index){
                $(this).removeClass(‘hide‘)
            }else{
                $(this).addClass(‘hide‘)
            }
        })
    })
</script>
<script>

</script>

about.html

知识点：

1.tab页面的切换，基于jquery，便捷使用可以添加额外属性‘for‘来标记索引

2.video标签的使用

<video controls="controls" loop="loop">
                            <source src="public/videos/001.mp4" type="video/mp4">
                        </video>

3.地图插件的使用

<div class="firm-map left">
                            <iframe src="map.html" frameborder="0" scrolling="no">
                            </iframe>
                        </div>

iframe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <style type="text/css">
        html,body{margin:0;padding:0;}
        .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
        .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>

<body>
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(123.195789,41.21034);//定义一个中心点坐标
        map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [{title:"我的标记",content:"我的备注",point:"123.1949|41.210381",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
    ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor:"#808080",
                color:"#333",
                cursor:"pointer"
            });

            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class=‘iw_poi_title‘ title=‘" + json.title + "‘>" + json.title + "</b><div class=‘iw_poi_content‘>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }

    initMap();//创建和初始化地图
</script>
</html>

map.html

1、找到各个地图api接口，例如打开“百度地图生成器”的网址：http://api.map.baidu.com/lbsapi/creatmap/index.html
2.进入网址，按步骤进行操作，记住获取HTML代码，保存在本地html文件（例如：map.html）
3.使用代码调用：像上面的iframe

地图调用步骤

全部资源：

链接：https://pan.baidu.com/s/1X89niNv2TFe5mMguaVkfrQ 密码：jg05

原文地址：https://www.cnblogs.com/ssyfj/p/8729470.html

时间： 2024-11-09 01:51:02

前端拾遗01的相关文章

easyui前端框架01

一. 三大前端框架的特点 1.easyui=jquery+html4 优点:快速开发.功能齐全 .免费 缺点:不好看.不支持相应式开发 2.bootstrap=jquery+html5 优点: 功能强大.好看.好用.  支持响应式开发 缺点:部分功能收费 3.layui 优点:好看 .功能强大.免费.支持响应式开发 缺点:框架本生bug较多 二. easyui的使用 (layout.tree.tabs  ) easyui的学习路径有:看官方API    看官方demo    http://www

web前端——CSS 01 css的引入方式

引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本

前端学习01

一,前端概念 html 做网页的骨架 CSS渲染骨架 js   让页面动起来 二,html概念和第一个html 超文本标记语言,专门用来制作网络页面 语法: <标签>被标记内容</标签> <标签/>图片 1 <!DOCTYPE html><!--html5的标准--> 2 <html lang="en"><!--html标签--> 3 <head><!--网页头信息--> 4 &

前端基础01

1.1  开发前的准备工作 1.配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 2.建立项目文件夹   为了将与项目相关的文件放在一块,便于管理和以后的维护 包括与项目相关的一些文件 主页或是首页    index.html   default.html Css文件夹    css文件的 Base.css     global.css Images文件夹  用来放置网站中的所有的图片 Js文件 音频或是视频文件 3. 样式初始化 我们的结构中

【前端进阶01】利用@font-face定义并使用自己喜欢的字体

(1)效果说明 使用站酷高端黑字体. (2)核心代码 @font-face{ font-family: zcool; src:url('../font/zcool.ttf'); } div{ /*使用字体*/ font-family: zcool; } (3)使用经验 --IE11.Chrome.Firefox.Safari.Opera支持ttf字体.IE6不支持ttf,但支持eot字体. --如果写成如下样式,不行.后面的会覆盖前面的,即最后一个url引入的字体生效,所以如果想要做兼容,可能需

web前端面试01

1--什么是DOM事件处理程序? 首先要理解什么是DOM?Dom是针对HTML文档的一个API.什么是事件流?事件流分为:事件冒泡(IE的事件流)和事件捕获.事件冒泡就是由最具体的元素开始接收,然后逐级向上:事件捕获就是由不太具体的元素开始接收,逐级向下,最具体的元素最后才接收到事件. DOM事件处理程序分为DOM0级.DOM2级.DOM0级具有简单,跨浏览器的优势,它是把函数赋值给一个事件的处理程序属性.例如:btn.onlick=function(){...}:DOM2级事件定义了两个方法,

前端面试01：描述一下cookices sessionStorage 和 localStorage 的区别

相同点:都可以存储在客户端 不同点: 1.存储大小 cookie数据大小不能超过4K. sessionStorage 和 localStorage 虽然也有大小限制,但是比cookie大得多,可以达到5M或更大. 2.有效t时间 localStorage 存储持久数据,浏览器关闭后数据不会丢失除非主动删除数据: sessionStorage 数据在当前浏览器窗口关闭后自动删除. cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭. 3.数据和服务器之间的交互方式 cook

Czbk Web前端视频教程 前端全套教程 汪磊2015版Web前端视频教程 共12章 包含源码

<Web大前端-北京1期就业班[2015-11-2开课]>├<1.html>│ ├<1017_HTML01>│ │ ├01_基础班介绍.avi│ │ ├02_文件和文件夹管理.avi│ │ ├03_特殊案件和快捷键的使用.avi│ │ ├04_互联网原理.avi│ │ ├05_服务器和http.avi│ │ ├06_服务器的小演示.avi│ │ ├07_认识txt纯文本格式.avi│ │ ├08_HTML是描述文档语义的语言.avi│ │ ├09_HTML语义.avi│

Web前端+移动端全套视频教程

Web前端+移动端全套视频教程|12.小程序|01.小程序.rar|11.Vue|05.Vue实战练习.rar|04.Vue UI框架Element-UI.rar|03.Vue路由.rar|02.Vue网络请求.rar|01.Vue基础.rar|10.React|06.React网络请求Fetch.rar|05.React UI框架Antd.rar|04.React路由4.x.rar|03.React路由3.x.rar|02.React环境搭建.rar|01.React基础.rar|09.前端构