最近在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>