悬浮窗

写悬浮窗的是会遇到这种情况：悬浮框本身没有什么问题；但在版心为1200的网页上成呈现时，分辨率小的电脑上会出现遮住版心的情况

解决方法：UI在设计的时候尽可能的多考虑在小电脑的呈现情况，设计的宽度小一点；另外前端这边要做的就是就算侧导航再小，可能多少也会遮住一点，这时候可以做个功能：点击----收起（变成小方块）----再点击----悬框出来

<!--悬浮窗-->
<div class="rec_stu_window">
    <div class="z_close">收起</div>
    <img class="imgg" src="../asse/images/rec_stu_window.png" alt=""/>
    <div class="window_div1">
        <a target="_blank" href="http://p7.qiao.baidu.com/im/index?siteid=7886751&ucid=2436607&lastsubid=&from=%E5%8C%97%E4%BA%AC%E6%98%8C%E5%B9%B3&bid=f653dd762959ef9aded76e53&tok=1bjm6ldqq&groupid=2&chattype=1&groupname=%E5%BF%83%E7%90%86%E5%9F%B9%E8%AE%AD%E5%92%A8%E8%AF%A2&subid=&subname=&ref=http%3A%2F%2Fwww.jsbr.org.cn%2FXLJKtesexuexiao%2F">2017各省报考条件</a>
        <a target="_blank" href="http://p7.qiao.baidu.com/im/index?siteid=7886751&ucid=2436607&lastsubid=&from=%E5%8C%97%E4%BA%AC%E6%98%8C%E5%B9%B3&bid=f653dd762959ef9aded76e53&tok=1bjm6ldqq&groupid=2&chattype=1&groupname=%E5%BF%83%E7%90%86%E5%9F%B9%E8%AE%AD%E5%92%A8%E8%AF%A2&subid=&subname=&ref=http%3A%2F%2Fwww.jsbr.org.cn%2FXLJKtesexuexiao%2F">心理咨询师报名资料</a>
        <a target="_blank" href="http://p7.qiao.baidu.com/im/index?siteid=7886751&ucid=2436607&lastsubid=&from=%E5%8C%97%E4%BA%AC%E6%98%8C%E5%B9%B3&bid=f653dd762959ef9aded76e53&tok=1bjm6ldqq&groupid=2&chattype=1&groupname=%E5%BF%83%E7%90%86%E5%9F%B9%E8%AE%AD%E5%92%A8%E8%AF%A2&subid=&subname=&ref=http%3A%2F%2Fwww.jsbr.org.cn%2FXLJKtesexuexiao%2F">咨询师具体报名流程</a>
        <a target="_blank" href="http://p7.qiao.baidu.com/im/index?siteid=7886751&ucid=2436607&lastsubid=&from=%E5%8C%97%E4%BA%AC%E6%98%8C%E5%B9%B3&bid=f653dd762959ef9aded76e53&tok=1bjm6ldqq&groupid=2&chattype=1&groupname=%E5%BF%83%E7%90%86%E5%9F%B9%E8%AE%AD%E5%92%A8%E8%AF%A2&subid=&subname=&ref=http%3A%2F%2Fwww.jsbr.org.cn%2FXLJKtesexuexiao%2F">咨询师证书含金量</a>
        <a target="_blank" href="http://p7.qiao.baidu.com/im/index?siteid=7886751&ucid=2436607&lastsubid=&from=%E5%8C%97%E4%BA%AC%E6%98%8C%E5%B9%B3&bid=f653dd762959ef9aded76e53&tok=1bjm6ldqq&groupid=2&chattype=1&groupname=%E5%BF%83%E7%90%86%E5%9F%B9%E8%AE%AD%E5%92%A8%E8%AF%A2&subid=&subname=&ref=http%3A%2F%2Fwww.jsbr.org.cn%2FXLJKtesexuexiao%2F">心理咨询师就业前景</a>
    </div>
    <div class="window_div2">
        <a target="_blank" href="http://p7.qiao.baidu.com/im/index?siteid=7886751&ucid=2436607&lastsubid=&from=%E5%8C%97%E4%BA%AC%E6%98%8C%E5%B9%B3&bid=f653dd762959ef9aded76e53&tok=1bjm6ldqq&groupid=2&chattype=1&groupname=%E5%BF%83%E7%90%86%E5%9F%B9%E8%AE%AD%E5%92%A8%E8%AF%A2&subid=&subname=&ref=http%3A%2F%2Fwww.jsbr.org.cn%2FXLJKtesexuexiao%2F">《二级考试复习宝典》</a>
        <a target="_blank" href="http://p7.qiao.baidu.com/im/index?siteid=7886751&ucid=2436607&lastsubid=&from=%E5%8C%97%E4%BA%AC%E6%98%8C%E5%B9%B3&bid=f653dd762959ef9aded76e53&tok=1bjm6ldqq&groupid=2&chattype=1&groupname=%E5%BF%83%E7%90%86%E5%9F%B9%E8%AE%AD%E5%92%A8%E8%AF%A2&subid=&subname=&ref=http%3A%2F%2Fwww.jsbr.org.cn%2FXLJKtesexuexiao%2F">《三级考试复习宝典》</a>
    </div>
</div>
<div class="z_ask">报 <br/> 名<br/>咨<br/>询</div>

CSS：

/*悬浮窗 */
.rec_stu_window{
    position: fixed;
    top: 100px;
    right: 0;
}
.z_ask{
    position: fixed;
    top: 50%;
    right: 0;
    width:35px;
    height:100px;
    background: #321051;
    color:#fff;
    text-align: center;
    padding-top: 10px;
    display: none;
}
.rec_stu_window>img{
    position: relative;
}
.rec_stu_window>div.window_div1{
    position: absolute;
    left: 11px;
    top: 126px;
    width: 111px;
    line-height: 26px;
}
.rec_stu_window>div.window_div1>a{
    font-size: 12px;
    color:#fff;
}
.rec_stu_window>div.window_div2>a{
    font-size: 12px;
    color:#321051;
}
.rec_stu_window>div.window_div2{
    position: absolute;
    left: 6px;
    top: 305px;
    width: 144px;
    height: 46px;
    line-height: 24px;
}
.z_close{
    position: absolute;
    left: 76px;
    top: -3px;
    z-index: 999;
    width:52px;
    height:52px;
    line-height:52px;
    background:#dd1e2e;
    color:#fff;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
}

js

//右侧悬浮导航
    $('.z_close').click(function(){
        $(this).parent().siblings().css('display','block');
        $(this).next().css('display','none');
    })
    $('.z_ask').click(function(){
        $(this).css('display','none')
        $(this).siblings().find('.imgg').css('display','block');

    })