HTMer

研究互联网络和电脑应用技术的IT技术网。 (勤奋+智慧→理想)

« 去除迅雷主界面中广告方法解决PHP5中时差相差8小时问题的方法 »

用CSS做各国国旗方法

    今天在网上浏览时看到用CSS来实现各国的国旗,真的很牛,拿过来给大家分享下,把下面的文件保存为.htm文件,预览下就能看到各国的国旗了。 

<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul{
padding:0px;
margin:0px;
}
div{
width:160px;
height:85px;
}
#Germany ul li,#Paraguay ul li,#Netherlands ul li,#Argentina ul li{
height:28px;
text-align:center;
}
#Ecuador ul li.yellow{
height:38px;
}
#England ul li,#sweden ul li{
float:left;
background:white;
width:76px;
height:40px;
}
#sweden ul li{
background:blue;
}
#sweden .arrow{
width:50px;
}
#frence ul li,#italy ul li{
float:right;
width:53px;
height:85px;
}
#Ukraine ul li{
height:42px;
}
#Switzerland ul li{
float:left;
width:48px;
height:25px;
background:white;
}
#china ul li{
color:yellow;
float:left;
}
#china ul li.bigstart{
font-size:65px;
}
</style>
</head>
<body>
<div id="Germany">
<ul>
  <li style="background:black;"></li>
  <li style="background:red;"></li>
  <li style="background:yellow;"></li>
</ul>
</div>
--------------------Germany
<div id="Ecuador">
<ul>
    <li class="yellow" style="background:yellow;"></li>
    <li style="background:darkblue;"></li>
    <li style="background:red;"></li>
</ul>
</div>
--------------------Ecuador
<div id="England" style="background:red;">
<ul>
    <li></li>
    <li style="margin-left:8px;"></li>
    <li style="margin-top:5px;"></li>
    <li style="margin-left:8px;margin-top:5px;"></li>
</ul>
</div>
-------------------- England
<div id="sweden" style="background:yellow;">
<ul>
    <li class="arrow"></li>
    <li style="margin-left:8px;width:102px;"></li>
    <li class="arrow" style="margin-top:4px;"></li>
    <li style="margin-left:8px;margin-top:4px;width:102px;"></li>
</ul>
</div>
-------------------- Sweden
<div id="Netherlands">
<ul>
    <li style="background:red;"></li>
    <li></li>
    <li style="background:darkblue;"></li>
</ul>
</div>
-------------------- Netherlands
<div id="Argentina" style="text-align:center;">
<ul>
    <li style="background:skyblue;"></li>
    <li style="color:gold;font-size:18px;line-height:30px;">¤</li>
    <li style="background:skyblue;"></li>
</ul>
</div>
-------------------- Argentina
<div id="frence">
<ul>
    <li style="background:blue;"></li>
    <li></li>
    <li style="background:red;"></li>
</ul>
</div>
-------------------- frence
<div id="italy">
<ul>
    <li style="background:red;"></li>
    <li></li>
    <li style="background:green;"></li>
</ul>
</div>
-------------------- italy
<div id="Ukraine">
<ul>
    <li style="background:skyblue;"></li>
    <li style="background:yellow;"></li>
</ul>
</div>
-------------------- Ukraine
<div id="Switzerland" style="background:red;">
<ul>
    <li style="margin-left:35px;margin-top:7px;width:20px;"></li>
    <li style="margin-left:-8px;margin-top:30px;height:20px;"></li>
    <li style="margin-left:17px;margin-top:-18px;height:20px;"></li>
    <li style="margin-left:-12px;width:21px;"></li>
</ul>
</div>
-------------------- Switzerland

<div id="china" style="background:red;">
  <ul>
    <li class="bigstart">★</li>
    <li style="margin-top:5px;margin-left:15px;">★</li>
    <li style="margin-top:20px;margin-left:5px;">★</li>
    <li style="margin-top:45px;margin-left:-25px;">★</li>
    <li style="margin-left:-60px;margin-top:60px;">★</li>
  </ul>  
</div>

 



欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]

本文链接地址:http://www.htmer.com/article/127.htm

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

HTMer , Powered By Z-Blog, 苏ICP备08003082号

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
HTM|HTML|ASP|PHP|JSP|Mysql|SQL|Dreamweaver|Flash|Fireworks|Photoshop|SEO Copyright www.HTMer.com. Some Rights Reserved. English Version