<!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>
登入後複製
