div+css页面右侧底部悬浮层 - roucheng

效果体验:
http://hovertree.com/texiao/css/23/

效果图：


代码如下：

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">>div+css页面右侧底部悬浮层</span> - 何问起<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">><span style="color: #800000;">base </span><span style="color: #ff0000;">target</span><span style="color: #0000ff;">="_blank"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="http://hovertree.com/texiao/css/23/css/gdt-style.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="height:1500px;"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">>div+css页面右侧底部悬浮层</span><span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://hovertree.com/h/bjaf/1kquypy7.htm"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_blank"</span><span style="color: #0000ff;">></span>原文<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="side-bar"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://hovertree.com/texiao/"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="icon-qq"</span><span style="color: #0000ff;">></span>QQ在线咨询<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://hovertree.com/h/bjaf/c7lmaqjx.htm"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="icon-chat"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="微信公众号"</span><span style="color: #0000ff;">></span>微信<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="hovertree-chat-tips"</span><span style="color: #0000ff;">><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">><span style="color: #800000;">img </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="width:138px;height:138px;"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="http://hovertree.com/themes/hvtimages/hwqwx.png"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="微信订阅号"</span> <span style="color: #0000ff;">/></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">target</span><span style="color: #0000ff;">="_blank"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="http://hovertree.com/h/bjaf/0yebjsng.htm"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="icon-blog"</span><span style="color: #0000ff;">></span>微博<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://hovertree.com/"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="icon-mail"</span><span style="color: #0000ff;">></span>mail<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

转自：http://hovertree.com/h/bjaf/1kquypy7.htm

推荐：http://hovertree.com/h/bjaf/qufo9d03.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html