HTMer » 编程开发 » 用CSS做各国国旗方法

用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;">&curren;</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>
顶一下 ▲()   踩一下 ▼()

相关文章