Rumah > hujung hadapan web > html tutorial > 纯CSS构造树状结构图_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:45:43
asal
1733 orang telah melayarinya

<!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>
Salin selepas log masuk

 

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan