纯CSS构造树状结构图_html/css_WEB-ITnose-tutoriel HTML-php.cn

纯CSS构造树状结构图_html/css_WEB-ITnose
WBOY
Libérer： 2016-06-24 11:45:43
original
1733 Les gens l'ont consulté
<!doctype html><html><head><meta charset="utf-8"><title>纯CSS构造树状结构图</title></head><body>    <div style="width:380px; height:600px; border:1px dashed gray; margin:30px auto; text-align:center;">        <h3>2%加息从何而来？</h3>                <div style="margin:2px auto;">            <div style="width:40px; height:40px; background:blue; border-radius:40px;margin:0 auto; "></div>            <span>投资人</span>        </div>        <!--画竖线-->        <div style="width:0px; height:30px; border-left:1px solid gray; margin:0 auto;"></div>        <!--画一个无底边部的边框-->            <div style="width:255px; height:37px; border:1px solid gray; border-bottom:none; margin:0 auto;"></div>                <div style="width:380px; height:72px margin:3px auto;">            <div style="float:left; margin-left:40px;">                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>                <span>投资大于1K</span>            </div>            <div style="float:right; margin-right:3px;">                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>                <span>投资小于1K</span>            </div>        </div>        <!--清除浮动-->        <div style="clear:both;"></div>                <div style="width:255px; height:37px; border:1px solid gray; border-bottom:none;border-top:none; margin:3px auto 3px auto;"></div>                <div style="width:380px; height:72px margin:3px auto;">            <div style="float:left; margin-left:40px;">                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>                <span>发表加息口号呼朋唤友捧场</span>            </div>            <div style="float:right; margin-right:3px;">                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>                <span>无加息机会</span>            </div>        </div>        <div style="clear:both;"></div>                <div style="width:0px; height:37px; border-left:1px solid gray; margin-left:60px;"></div>        <div style="width:257px; height:37px; border:1px solid gray; border-bottom:none; margin:0 auto;"></div>                <div style="width:380px; height:72px margin:3px auto;">            <div style="float:left; margin-left:40px;">                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>                <span>获得点赞</span>            </div>            <div style="float:right; margin-right:16px;">                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>                <span>未获点赞</span>            </div>        </div>        <div style="clear:both;"></div>                <div style="width:0px; height:37px; border-left:1px solid gray; margin-left:60px;"></div>                <div style="width:380px; height:72px margin:3px auto;">            <div style="float:left; margin-left:40px;">                <div style="width:40px; height:40px; background:blue; border-radius:40px;"></div>                <span>获得最高加息2%加息</span>            </div>              </div>        <!--清除浮动-->        <div style="clear:both;"></div>                     </div></body></html>
Copier après la connexion