HTMer
  • 首页
  • 技术
  • 下载
  • 影视
  • 音乐
  • 随笔
首页 / 技术 / 用CSS做各国国旗方法

用CSS做各国国旗方法

技术 • 2008-03-09 13:22:01 • 阅读 1792

今天在网上浏览时看到用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>
源代码
您可能感兴趣的
JAVA开发中连接Oracle19c多租户PDB时出错的解决方法
今天用JAVA开发连接Oracle19c数据库,提示ORA-12505错误,在网上找到了解决方法,拿来分享。...
技术 • 5年前 • 阅读 1835
随机密码在线生成器
如今的时代,到处都要设置密码,设置的太简单很容易被破解,设置的复杂又比较烧脑,今天整理了一个随机密码在线生成器,可以设置大小写字母、数字、特殊字符、密码长度等,非常方便,拿来分享。...
技术 • 6年前 • 阅读 1643
jsp(JAVA)时时抓取网页内容的方法
今天项目中需要使用jsp来时时远程抓取网页的内容,实现方法比较简单,拿来分享。...
技术 • 6年前 • 阅读 1348
JavaScript实现将人民币小写金额自动转换成大写的方法
今天在项目中遇到一个需求,需要根据用户输入的人民币小写金额自动转换成大写,以免用户再次输入大写金额的麻烦,拿来分享,可以处理整数、小数、负数。...
技术 • 6年前 • 阅读 1815
ASP截取中英文字符串函数
用ASP做网站的时候经常会碰到要截取字符串的情况。ASP中的Len函数不管是中文字符,还是英文字符,统统按一个单位来计算,由于一个中文字符的宽度是一个英文字符宽度的两倍,在中英文混合的情况下字符串实际占用的宽度就不好计算了,如果按照Len函数计算的长度来截取字符串截出来的效果也会长短不一,下面是按照一个汉字相当于两个英文字符来计算字符串长度和截取字符串的代码。...
技术 • 9年前 • 阅读 1846
用Masonry和lazyload插件实现网页瀑布流布局的方法
我们经常能在网上看到很多瀑布流布局的页面,尤其是很多图片网站,例如花瓣网。这种最典型的瀑布流布局,每个元素的宽度是固定的,但图片长度各不相同,于是通过下图这种样子竖着排列了下来,达到了最大的页面空间利用率。...
技术 • 10年前 • 阅读 1960
  • 网页配色表
  • 二维码生成器
  • 整数分区计算器
  • 随机密码生成器
  • 金额大写转换
Copyright © 2023 HTMer.com⋅苏ICP备08003082号-1⋅ 苏公网安备32041202002242⋅Powered By Z-Blog
  • 首页
  • 技术
  • 下载
  • 影视
  • 音乐
  • 随笔
标签
软件技巧 Windows 源代码 主机 Office 浏览器 腾讯 科普资讯 数据库 病毒防护 节日 下载 远程桌面 Google 心情 足球 PS 健康 电影 音乐 百度 Apple 阿里巴巴 Z-Blog 播放器 微信 阿里云盘 VMware
关于我

研究互联网络和电脑应用技术的IT技术网

HTMer简介