div+css绘制hellokitty

  • 全分享 发表于
  • 2015-04-29
  • (3086)
  • aweb.cc


全分享社区__源码下载__div css绘制hellokitty.png    

copyright: www.aweb.cc
revision: 1.0

html代码实现:

<div class="hellokitty">
        <header>
            <div class="earLeft"></div>
            <div class="earRight"></div>
            <div class="tou"></div>
            <!--蝴蝶结-->
            <div class="flower">
                <div class="outerLeft"></div>
                <div class="outerRight"></div>
                <div class="middle"></div>
                <div class="center"></div>
            </div>
            <div class="eyeLeft"></div>
            <div class="eyeRight"></div>
            <div class="mouth"></div>
            <!-- 左边胡须-->
            <div class="mustache mustacheLeft1"></div>
            <div class="mustache mustacheLeft2"></div>
            <div class="mustache mustacheLeft3"></div>
            <!-- 右边胡须-->
            <div class="mustache mustacheRight1"></div>
            <div class="mustache mustacheRight2"></div>
            <div class="mustache mustacheRight3"></div>
            <!--腮红-->
            <div class="blusher blusherLeft"></div>
            <div class="blusher blusherRight"></div>
            <!--手指-->
            <div class="fingerBoxLeft">
                <div class="finger"></div>
            </div>
            <div class="fingerBoxRight">
                <div class="finger"></div>
            </div>
        </header>
        <div class="centerBox">
            <!--手-->
            <div class="handLeft">
                <div class="arm"></div>
                <div class="arm"></div>
                <div class="arm black"></div>
            </div>
            <div class="handRight">
                <div class="arm"></div>
                <div class="arm"></div>
                <div class="arm black"></div>
            </div>
            <!--肚子-->
            <div class="corpBox">
                <div class="corp">
                    <div class="flower">
                        <div class="petal petal1"></div>
                        <div class="petal petal2"></div>
                        <div class="petal petal3"></div>
                        <div class="petal petal4"></div>
                        <div class="petal petal5"></div>
                        <div class="center"></div>
                    </div>
                </div>
            </div>
            <!--脚-->
            <div class="foot">
                <div class="footLeft"></div>
                <div class="footRight"></div>
            </div>
            <div class="floor"></div>
            <div class="floorh"></div>
        </div>
    </div>
    <div class="copyright">
        <a href="http://www.aweb.cc"  target="_blank">aweb.cc 全分享社区出品</a>
    </div>


文件尺寸 2.96 KB
下载次数 976

div+css绘制小女孩 <<上一篇 下一篇>>div+css绘制叮当猫