Home > Article > Web Front-end > 纯CSS构造树状结构图_html/css_WEB-ITnose
纯CSS构造树状结构图_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:431655browse
<!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
Previous article：CSS3 实现图片上浮动画_html/css_WEB-ITnoseNext article：textbox 按回车键如何实现焦点跳转？_html/css_WEB-ITnose