Home >Web Front-end >HTML Tutorial >Pure CSS tree structure diagram_html/css_WEB-ITnose

Pure CSS tree structure diagram_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:431753browse

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

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn