您现在的位置: 365建站网 > 365学习 > CSS发烧友的作品---CSS制作国旗

CSS发烧友的作品---CSS制作国旗

文章来源:365jz.com     点击数:232    更新时间:2009-05-17 23:08   参与评论
主机网全新上线,买空间、服务器就上主机网,安全有保障!

最近在CSSBBS上看到一个CSS发烧友创作的CSS代码制作美国国旗,很是强大,我已经转帖到www.upsdiHTML.com上面,顺便将代码整理了一下以便于大家的学习,看看强人是怎么玩转CSS的^_^。

好啦,咱先看一个简单的,制作我们伟大的祖国的国旗

中国国旗

CSS代码
<style>
.guoqi{ width:288px; height:192px; background:#FF0000; position:relative; color:#FFFF00; margin:20px auto;}
.guoqi span{display:block; position:absolute;}
.d1{ font-size:4.5em; top:20px; left:20px; }
.d2{top:10px; left:100px;}
.d3{top:35px; left:120px;}
.d4{top:70px; left:120px;}
.d5{top:95px; left:100px;}
</style>
HTML代码
<div class="guoqi">
<span class="d1">★</span>
<span class="d2">★</span>
<span class="d3">★</span>
<span class="d4">★</span>
<span class="d5">★</span>
</div>
中国的国旗代码简单一些
我们接着往下看

美国的国旗


CSS代码
<STYLE type=text/css>
.star {width:14px; height:13px; text-align:center; background:#004080; float:left; }
.star em {display:block; overflow:hidden;background:#fff; margin:0 auto;}
em.s1 {width:1px; height:2px;}
em.s2 {width:3px; height:2px;}
em.s3 {width:13px; height:1px;}
em.s4 {width:9px; height:1px; border-left:1px solid #a9bfd4; border-right:1px solid #a9bfd4;}
em.s5 {width:5px; height:1px; border-left:1px solid #a9bfd4; border-right:1px solid #a9bfd4;}
em.s6 {width:5px; height:2px;}
em.s7 {width:1px; border-left:3px solid #fff; border-right:3px solid #fff; height:1px; background:#a9bfd4;}
em.s8 {width:3px; border-left:2px solid #fff; border-right:2px solid #fff; height:1px; background:#004080;}
em.s9 {width:5px; border-left:2px solid #fff; border-right:2px solid #fff; height:1px; background:#004080;}
#flag {width:470px; height:247px; border:3px solid #ffd700; background:#fff; position:relative; margin:0 auto;} .stripe {width:470px; height:19px; background:#c00; border-bottom:19px solid #fff;}
.stripe2 {width:470px; height:19px; background:#c00;}
#union {width:188px; height:130px; background:#004080; position:absolute; left:0; top:0; padding-top:3px;}
.pad {width:16px; height:1px; float:left; overflow:hidden;}
.pad1 {width:12px; height:1px; float:left; overflow:hidden;}
.pad2 {width:32px; height:1px; float:left; overflow:hidden;}
.pad3 {width:26px; height:1px; overflow:hidden; clear:both;}
.pad4 {width:26px; height:1px; float:left; overflow:hidden;}
</STYLE>
HTML代码
<DIV id=flag>
    <DIV class=stripe></DIV>
    <DIV class=stripe></DIV>
    <DIV class=stripe></DIV>
    <DIV class=stripe></DIV>
    <DIV class=stripe></DIV>
    <DIV class=stripe></DIV>
    <DIV class=stripe2></DIV>
    <DIV id=union>
        <DIV class=pad1></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad3></DIV>
        <DIV class=pad4></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad3></DIV>
        <DIV class=pad1></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad3></DIV>
        <DIV class=pad4></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad3></DIV>
        <DIV class=pad1></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad3></DIV>
        <DIV class=pad4></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad3></DIV>
        <DIV class=pad1></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad3></DIV>
        <DIV class=pad4></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad3></DIV>
        <DIV class=pad1></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad></DIV>
        <DIV class=star>
            <EM class=s1></EM>
            <EM class=s2></EM>
            <EM class=s3></EM>
            <EM class=s4></EM>
            <EM class=s5></EM>
            <EM class=s6></EM>
            <EM class=s7></EM>
            <EM class=s8></EM>
            <EM class=s9></EM>
        </DIV>
        <DIV class=pad3></DIV>
    </DIV>
</DIV>

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (232人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------