首 页
网络学院
视频教程
资源下载
HOT
实例教程
图文教程
专题中心
学习社区
繁體中文
当前位置:
首页
>
图文教程
>
网页制作
>
CSS样式表
> CSS和“★”字符制做的中国国旗实现代码
CSS样式表
验证并修复css错误内容的相关工具
分享3个比较实用的CSS页面框架布局
CSS幻灯片教程:制作高效可维护组件化的CSS代码
网页制作基础知识:html特殊符号
CSS教程:按整洁易懂的结构组织CSS样式
查看和编辑CSS中用到的颜色:CSS Prism
帮助你学习CSS的在线CSS工具网站
CSS网页设计参考:把HTML标记分类
CSS进阶:几个Reset CSS的八卦问题
WEB设计技巧:网页虚线制作方法剖析
WEBJX收集CSS格式化和造型网页高级教程
CSS3教程:在CSS中使用的颜色
学习WEB标准心得:网页重构的思路
轻易创建css导航工具:CSS Tab Designer2
总结学习web标准的十个重要理由
CSS实例教程:CSS制作星级评价的功能
CSS实例教程:纯CSS实现圆角框
多个css、js文件自动合并、压缩
网页设计教程:CSS文字排版技巧大全
Photoshop制作CSS网页制作的背景图
No.
«
‹
115
116
117
118
›
»
技术文章搜索
关键字
CSS样式表 中的 CSS和“★”字符制做的中国国旗实现代码
出处:
互联网
整理:
软晨网(RuanChen.com)
发布:
2010-01-10
浏览: 47 ::
收藏到网摘: n/a
优秀的CSS 框架整理
基于firebug的firefox扩展 css usage
在网上看见 某位牛人用CSS做的红旗 就是很牛!
上图先看:
<html> <head> <title>CSS中国国旗</title> <style type="text/css"> .all{ background-color:red; width:960; height=640; } .five{ background-color:red; width:480; height=320; } .big{ position:absolute; background-color:red; margin-top:64px; margin-left:64px; color:yellow; font-size:192px; } .small{ position:absolute; background-color:red; color:yellow; font-size:64px; } .s1{ margin-top:32px; margin-left:288px; filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.6565,M12=0.7543,M21=-0.7543,M22=0.6565); } .s2{ margin-top:96px; margin-left:352px; filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.8978,M12=0.4404,M21=-0.4404,M22=0.8978); } .s3{ margin-top:192px; margin-left:352px; filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9994,M12=0.0359,M21=-0.0359,M22=0.9994); } .s4{ margin-top:256px; margin-left:288px; filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9357,M12=-0.3528,M21=0.3528,M22=0.9357); } </style> </head> <body> <div class="all"> <div class="five"> <div class="big">★</div> <div class="small s1">★</div> <div class="small s2">★</div> <div class="small s3">★</div> <div class="small s4">★</div> </div> </div> </body> </html> 第2种代码,全部镶嵌在“<body>..</body>”网页标签里: <div style="background-color:red;width:960;height=640;"> <div style="background-color:red;width:480;height=320;"> <div style="z-index:2;position:absolute;background-color:red;margin-top:64px;margin-left:64px;color:yellow;font-size:192px;">★</div> <div style="z-index:2;position:absolute;background-color:red;margin-top:32px;margin-left:288px;color:yellow;font-size:64px;filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.6565,M12=0.7543,M21=-0.7543,M22=0.6565);">★</div> <div style="z-index:2;position:absolute;background-color:red;margin-top:96px;margin-left:352px;color:yellow;font-size:64px;filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.8978,M12=0.4404,M21=-0.4404,M22=0.8978);">★</div> <div style="z-index:2;position:absolute;background-color:red;margin-top:192px;margin-left:352px;color:yellow;font-size:64px;filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9994,M12=0.0359,M21=-0.0359,M22=0.9994);">★</div> <div style="z-index:2;position:absolute;background-color:red;margin-top:256px;margin-left:288px;color:yellow;font-size:64px;filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9357,M12=-0.3528,M21=0.3528,M22=0.9357);">★</div> </div> </div>
提示:您可以先修改部分代码再运行
优秀的CSS 框架整理
基于firebug的firefox扩展 css usage
评论 (0)
All
登陆
还没注册?