html css五星红旗,CSS版 五星红旗
也来发个 五星红旗(HTML/CSS)
目前在FireFox16、Chrome24、IE9下测试正常显示(其他浏览器没做测试。)
1.[图片] nation_flag.jpg
2.[文件] Nationflag.html ~ 7KB 下载(40)
CSS Nationflag by ole_y
*{ padding:0;margin:0; }
#flag_bg{ margin:10px; height:410px; width:750px; background:#FF0000; position:relative; }
#big_star{ height:104px; width:104px; background:#FFFF00; position:absolute; top:60px; left:50px; }
.big_tool{ background:#FF0000; height:40px; width:60px; position:absolute; }
#angle_a{ top:-12px; left:-13px; -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); }
#angle_aa{ top:-3px; left:-23px; }
#angle_b{ top:-12px; right:-13px; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); }
#angle_bb{ top:-3px; right:-23px; }
#angle_c{ top:39px; left:-34px; -moz-transform: rotate(34deg); -webkit-transform: rotate(34deg); -ms-transform: rotate(34deg);}
#angle_d{ top:39px; right:-34px; -moz-transform: rotate(-33deg); -webkit-transform: rotate(-33deg); -ms-transform: rotate(-33deg); }
#angle_e{ top:49px; left:-35px; -moz-transform: rotate(23deg); -webkit-transform: rotate(23deg); -ms-transform: rotate(23deg); }
#angle_f{ top:87px; left:9px; -moz-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); }
#angle_g{ top:47px; right:-34px; -moz-transform: rotate(-23deg); -webkit-transform: rotate(-23deg); -ms-transform: rotate(-23deg); }
#angle_h{ top:86px; right:8px; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); }
#angle_i{ height:20px; width:20px; top:85px; left:-5px; }
#angle_j{ height:20px; width:20px; top:85px; right:-4px; }
/*------------------------------------*/
.small_star{ height:104px; width:104px; background:#FFFF00; position:absolute; }
.small_star .small_tool{ background:#FF0000; height:40px; width:60px; position:absolute; overflow:hidden; }
.small_star .angle_a{ top:-12px; left:-4px; -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); }
.small_star .angle_aa{ top:-3px; left:-14px; }
.small_star .angle_b{ top:-12px; right:-4px; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); }
.small_star .angle_bb{ top:-3px; right:-14px; }
.small_star .angle_c{ top:24px; left:-22px; -moz-transform: rotate(34deg); -webkit-transform: rotate(34deg); -ms-transform: rotate(34deg); }
.small_star .angle_d{ top:24px; right:-22px; -moz-transform: rotate(-33deg); -webkit-transform: rotate(-33deg); -ms-transform: rotate(-33deg); }
.small_star .angle_e{ top:32px; left:-20px; -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); }
.small_star .angle_f{ top:60px; left:9px; -moz-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); }
.small_star .angle_g{ top:31px; right:-20px; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); }
.small_star .angle_h{ top:60px; right:8px; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); }
.small_star .angle_i{ height:45px; width:115px; top:65px; left:-5px; }
.small_star .angle_j{ height:45px; width:25px; top:65px; right:-4px; }
/*------------------------------------*/
#flag_bg .star{ height:40px; width:40px; position:relative; overflow:hidden; }
#one{ top:20px; left:160px; }
#two{ top:35px; left:194px; }
#three{ top:60px; left:190px; }
#four{ top:65px; left:145px; }
#small_one,#small_two,#small_three,#small_four{ margin-left:-30px; margin-top:-24px; }
html css五星红旗,CSS版 五星红旗相关推荐
- html5+javascript+css实现---网页版坦克大战---无需运行环境
html5+javascript+css实现-网页版坦克大战-无需运行环境,只需一个浏览器,重拾少年情. 运行环境-除老版IE浏览器都可以: 源码需要请:点赞留言邮箱: 可以跳关,回退关卡.支持双人坦 ...
- word文档css格式化,css教程 word版.doc
css教程 word版 CSS教程 CSS简介 CSS语法 CSS字体属性(font) CSS常用文本属性 CSS背景属性 CSS边框属性(border) CSS边距属性(margin) CSS间隙属 ...
- 利用css实现黑白版img图片切换
首先黑白版是通过 黑版css和白版css两个不同的css文件来控制,那么就有两种不同的方式来控制图片的现实,由于图片高度可能是会超过一屏需要滚动,所以需要用img标签 如下图html,要实现图中img ...
- html+css制作简易版Baymax
</pre>大白的简易版图片如下,我用html+css来制作简易版的大白.<img src="https://img-blog.csdn.net/2016012418583 ...
- HTML+CSS(详细版)
网页的概念:上网打开浏览器是我们浏览的新闻,查询信息,看图片,视频所浏览的都是内容页面称之为网页 网页的组成:文字 图像和超链接等元素构成 **网页的结构:** <html> <he ...
- 在线调色工具 在线CSS工具 CSS设计展示网站汇总
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在线调色 ...
- CSS:CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
- 解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题
0 文章太长懒得看 将语句:import 'swiper/css/swiper.css' 修改为:import 'swiper/swiper-bundle.css' 1 出错原因 报错提示为 * sw ...
- 代码:CSS——reset.css
代码:CSS--reset.css http://www.cnblogs.com/qq21270/p/5577856.html 图片列表 A链接标签: /*链接样式.文字颜色*/a{color:#66 ...
- css expressionr,CSS自定义属性expression_r
CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色.大小.距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心.有了CSS的自定义属性expr ...
最新文章
- 【渝粤题库】广东开放大学 劳动心理学 形成性考核
- modf函数C语言,C / C ++中的modf()
- 统计twitter帖子_在Kubernetes上部署InfluxDB和Grafana以收集Twitter统计信息
- “==”和“===”,难道不是多一个的区别吗?
- c++11 随机数random
- CJ20N被删除物料的历史记录
- Matlab函数之lower函数与upper函数
- z blog php版本怎么样,Z-BlogPHP版本可能用到的SQL语句整理
- 拓端tecdat|matlab测量计算信号的相似度
- 第一篇 Object-C快速入门
- 匹配滤波器的仿真——原理说明与仿真
- laravel 框架中的路由
- linux系统 安卓系统安装教程,在Linux系统上安装Android 4.4图文教程
- Jenkins 初体验
- 教你一招:解决Win 10安装软件时提示:文件系统错误 (-1073740940)
- 黑苹果 MacOS 10.15.7 Catalina 最新安装教程
- 关于滑轮组的计算机知识点,【中考备考】初三物理常考知识点讲解:滑轮
- 基于UDP的企业级大文件传输体系
- 转型编程的小伙们们快来拿 python 入门证书!
- libjpeg库使用举例
热门文章
- VMware NSX Data Center for vSphere (NSX-V) 6.4.10 - 数据中心网络虚拟化
- linux系统如何修改磁盘名称,Linux系统怎么修改磁盘参数(名称,盘符等等
- php校花评比排名,上海各大高校校花评比,最美的竟然是...
- proe齿轮渐近线曲线方程
- 解决帆软报表Access数据库连接失败问题
- 论文阅读 ACNet: Strengthening the Kernel Skeletons for Powerful CNN via Asymmetric Convolution Blocks
- 计算机专业评估标准,高等学校计算机专业本科教育评估标准计算机专业(应用...
- 数据结构与算法?看这篇就够了!
- Vue实现简单计算器功能
- WMS系统未来发展的趋势