Heim > Web-Frontend > HTML-Tutorial > 纯CSS构造树状结构图_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:45:43
Original
1733 Leute haben es durchsucht

<!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>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage