纯CSS构造树状结构图
浏览数：21 /
时间：2015年06月09日
<!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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
