当前位置: 首页 > 网络学院 > 网页制作基础教程 > WEB设计综合 > 用CSS制作的美国国旗

WEB设计综合
连接基础
HTML基础
CSS 基础
添加背景音乐
HTML中的脚本标签
水平线样式
CSS基础以及CSS代码
自定义404错误页
链接至外部样式表
文本和颜色
表格详述
图像详述
优化CSS样式表代码
CSS元素div ul dl dt ol简释
CSS元素的class与ID命名常用关键字
DIV布局SEO的影响
CSS中的相对定位与绝对定位
CSS选择符
CSS特殊选择符伪类的应用技巧
常用的CSS知识

No. « 1 2 3 4 »

学院文章搜索

关键字

WEB设计综合 中的 用CSS制作的美国国旗

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-03-01   浏览: 1277 ::
收藏到网摘: n/a

效果图如下：

代码如下：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ruanchen.COM | ---用CSS制作的美国国旗</title>

</head>

<body>

<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>

<DIV id=info>
<H2>THE STAR SPANGLED BANNER</H2>
<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>
<DIV id=ads>
</DIV>


</body>
</html>

评论 (0) All

登陆 | 还没注册？