>웹 프론트엔드 >HTML 튜토리얼 >纯CSS构造树状结构图_html/css_WEB-ITnose

纯CSS构造树状结构图_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:45:431751검색

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

 

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.