zrong's Blog » CSS http://zengrong.net Flash、Flex、RIA、web、Linux和我的生活 Thu, 09 Feb 2012 15:09:36 +0000 en hourly 1 http://wordpress.org/?v=3.2 了解Flex4中新的的Skin、CSS、Layout、NameSpace相关资料 http://zengrong.net/post/789.htm http://zengrong.net/post/789.htm#comments Wed, 02 Sep 2009 16:42:59 +0000 zrong http://www.zengrong.net/?p=789 Differences between Flex 3 and Flex 4 beta（比较Flex3和Flex4的区别，很全面，值得一看） 了解一下Flex 4里的fx、mx以及s命名空间 Introducing skinning in Flex 4 beta（强烈推荐！简单地介绍了Skin part、state、skinClass的编写方法以及FXG语法，有范例） Overview of custom component changes in Adobe Flex 4 beta（自定义组件在Flex4中的改变） Spark layouts with Flex 4 beta（不了解Flex4新的布局机制的，看看这个吧） Enhanced States Syntax – Functional and Design …

继续阅读 »

]]>
  1. Differences between Flex 3 and Flex 4 beta（比较Flex3和Flex4的区别，很全面，值得一看）
  2. 了解一下Flex 4里的fx、mx以及s命名空间
  3. Introducing skinning in Flex 4 beta（强烈推荐！简单地介绍了Skin part、state、skinClass的编写方法以及FXG语法，有范例）
  4. Overview of custom component changes in Adobe Flex 4 beta（自定义组件在Flex4中的改变）
  5. Spark layouts with Flex 4 beta（不了解Flex4新的布局机制的，看看这个吧）
  6. Enhanced States Syntax – Functional and Design Specification（新的state使用方法详细介绍）
  7. MXML 2009 – Functional and Design Specification（着重介绍了Flex4的Namespace、Declarations、Private、Library标签的用法，以及Flex4与Flex3之间的区别）
  8. Flex4:DataGroup and ItemRenderers
  9. Flex 4 ＆ Custom Layouts（Flex4与自定义布局，中文在这里）

视频专题

  1. 视频：Flex4中的高级CSS
  2. 视频：在Flex4中为组件和程序换肤
  3. Learn to Use Flash Builder 4 and Flex 4 SDK（Adobe Labs的教程，比较全面，由浅入深的涉及到Flex4的各个方面，有视频、有文章、有资源）
  4. Tutorial and Demonstration Videos（视频教程集合，全面涉及Flex4的各个方面）

FXG专题

  1. Understanding FXG, a primer on Adobe’s new graphics file format（了解FXG）
  2. FXG 1.0 – Functional and Design Specification（FXG语法详细介绍）
  3. FXG 1.0 Intro 1: Basic Shape
  4. FXG 1.0 Intro 2: 万能的Path之一
  5. FXG 1.0 Intro 3: 万能的Path之二
  6. FXG 1.0 Intro 4: stroke and fill
  7. FXG 1.0 Intro 5: Color Transform
  8. FXG 1.0 Intro 6: BitmapImage and Transform

组件专题

Effect专题

DataGroup和虚拟化

  1. Using virtualization with Spark DataGroup and SkinnableDataContainer（在DataGroup和SkinnableDataContainer中使用虚拟化）
  2. Using Virtualized Layouts and DataGroups in Flex 4（在Flex4中使用虚拟化布局）
  3. Spark Virtualization – Functional and Design Specification（Spark组件中的虚拟化技术功能和设计说明）
]]> http://zengrong.net/post/789.htm/feed 0 Flex不支持background-position属性的问题 http://zengrong.net/post/716.htm http://zengrong.net/post/716.htm#comments Mon, 10 Aug 2009 02:10:33 +0000 zrong http://www.zengrong.net/?p=716 我在为一个HBox标签添加背景图像的时候碰到了问题。 虽然HBox的CSS属性支持中有background-position这个属性，并且支持top、left等位置，但是当我正确设定并编译swf之后，发现背景图像并不像我设置的那样排列，反而没什么变化。google了一下资料，找到了Flex cookbook上的解决办法： CSS background-position 但是，这个办法在我的程序（Flex SDK 3.4）中并不管用，没办法，我还是只能用degrafa来实现了。degrafa是个优秀的矢量绘图引擎，使用它不仅能支持background-position，还能支持background-repeat（关于背景平铺，还可以看这篇文章）。 使用方法： ?View Code CSSHBox { border-skin: ClassReference("com.degrafa.skins.CSSSkin"); background-image: Embed(source="windowroom/bg2.jpg"); background-position:top; background-repeat:no-repeat;   } 引入com.degrafa.skins.CSSSkin包后，编译的swf文件大小会增加51KB。如果对文件大小很在乎的话，还是去仔细研究一下Flex Cookbook中提供的方法好了。]]>

我在为一个HBox标签添加背景图像的时候碰到了问题。
虽然HBox的CSS属性支持中有background-position这个属性，并且支持top、left等位置，但是当我正确设定并编译swf之后，发现背景图像并不像我设置的那样排列，反而没什么变化。google了一下资料，找到了Flex cookbook上的解决办法：
CSS background-position
但是，这个办法在我的程序（Flex SDK 3.4）中并不管用，没办法，我还是只能用degrafa来实现了。degrafa是个优秀的矢量绘图引擎，使用它不仅能支持background-position，还能支持background-repeat（关于背景平铺，还可以看这篇文章）。
使用方法：

?View Code CSS
HBox
{
	border-skin: ClassReference("com.degrafa.skins.CSSSkin");
	background-image: Embed(source="windowroom/bg2.jpg");
	background-position:top;
	background-repeat:no-repeat;
 
}

引入com.degrafa.skins.CSSSkin包后，编译的swf文件大小会增加51KB。如果对文件大小很在乎的话，还是去仔细研究一下Flex Cookbook中提供的方法好了。 ;-)

]]> http://zengrong.net/post/716.htm/feed 4 如何在Flex中实现图片背景平铺 http://zengrong.net/post/706.htm http://zengrong.net/post/706.htm#comments Sun, 07 Jun 2009 15:13:06 +0000 zrong http://www.zengrong.net/?p=706 别找了，Flex自己是没这个功能的。下面这些链接都讲解了怎么自行实现。 转自：http://bbs.airia.cn/FLEX/thread-4095-1-1.aspx Background image repeat in flex 3 – DEGRAFA! http://bjw.co.nz/developer/flex/83-background-image-repeat-in-flex-3 e.g: ?View Code ACTIONSCRIPTApplication { background-image: Embed("assets/images/the_image_goes_here.png"); background-repeat: repeat; background-position: center; background-blend: multiply; borderSkin: ClassReference("com.degrafa.skins.CSSSkin"); } 此外还有： http://frankieloscavio.blogspot.com/2007/08/repeating-and-tiling-css-backgrounds-in.html http://www.websector.de/blog/2007/07/06/pimp-your-flex-app-using-wsbackgroundpixelskin/ http://www.websector.de/blog/2007/07/10/wspatternstylegenerator-for-using-wsbackgroundpixelskin/ http://blog.creacog.co.uk/2007/06/11/tile-or-repeat-an-image-into-a-flex-application-background-ii/ http://blog.creacog.co.uk/2006/11/21/tile-or-repeat-an-image-into-a-flex-application-background/ http://renaun.com/blog/2006/12/08/165/]]>

别找了，Flex自己是没这个功能的。下面这些链接都讲解了怎么自行实现。
转自：http://bbs.airia.cn/FLEX/thread-4095-1-1.aspx

Background image repeat in flex 3 – DEGRAFA!

http://bjw.co.nz/developer/flex/83-background-image-repeat-in-flex-3

e.g:

?View Code ACTIONSCRIPT
Application {    
   background-image:   Embed("assets/images/the_image_goes_here.png");
   background-repeat:   repeat;
   background-position: center;
   background-blend:    multiply;
   borderSkin:              ClassReference("com.degrafa.skins.CSSSkin");
}

此外还有：

  • http://frankieloscavio.blogspot.com/2007/08/repeating-and-tiling-css-backgrounds-in.html
  • http://www.websector.de/blog/2007/07/06/pimp-your-flex-app-using-wsbackgroundpixelskin/
  • http://www.websector.de/blog/2007/07/10/wspatternstylegenerator-for-using-wsbackgroundpixelskin/
  • http://blog.creacog.co.uk/2007/06/11/tile-or-repeat-an-image-into-a-flex-application-background-ii/
  • http://blog.creacog.co.uk/2006/11/21/tile-or-repeat-an-image-into-a-flex-application-background/
  • http://renaun.com/blog/2006/12/08/165/
]]> http://zengrong.net/post/706.htm/feed 0 [转]快速设计网页必备的28款工具和生成器 http://zengrong.net/post/688.htm http://zengrong.net/post/688.htm#comments Tue, 24 Mar 2009 00:58:39 +0000 zrong http://www.zengrong.net/?p=688 本文原始出处：http://www.graphicfetish.com/28-fantastic-generators-for-easier-web-designing/ 随着许多优秀的网页设计工具和大量资源的出现，今天网页设计比起十年前要简便得多。本文收集了28款可以帮助你快速设计网页的自动生成工具，包括了logo，banner、Web2.0徽标生成器，域名推荐。 1. Lorem Ipsum Generator 文本排版生成器 2. Stripe Generator 条纹背景 3. Mycoolbutton 按钮生成器 4. Web20generator Web2.0生成器 5. Buttonator 按钮生成器 6. VectorMagic 矢量图生成器 7. Free Online Web Template Generator 免费在线网页模板 8. CSS Type Set CSS效果查看 9. Free Logo Design – …

继续阅读 »

]]>

本文原始出处：http://www.graphicfetish.com/28-fantastic-generators-for-easier-web-designing/

随着许多优秀的网页设计工具和大量资源的出现，今天网页设计比起十年前要简便得多。本文收集了28款可以帮助你快速设计网页的自动生成工具，包括了logo，banner、Web2.0徽标生成器，域名推荐。

1. Lorem Ipsum Generator 文本排版生成器

2. Stripe Generator 条纹背景

3. Mycoolbutton 按钮生成器

4. Web20generator Web2.0生成器

5. Buttonator 按钮生成器

6. VectorMagic 矢量图生成器

7. Free Online Web Template Generator 免费在线网页模板

8. CSS Type Set CSS效果查看

9. Free Logo Design – Logo Maker 免费Logo设计

10. Tiled backgrounds designer 背景设计

11. Web 2.0 logo creatr Web2.0 logo生成器

12. Nameboy 域名搜索和建议

13. Domain name generator 域名生成器

14. Online Logo Generator 在线logo生成器

15. Loona Pix 特效图片生成器

16. Fancy text generator 文本特效生成器

17. WebscriptlabWeb脚本生成器

18. Form Generator 表单生成器

19. ReflectionMaker.com 图片倒影生成器

20. XHTML/CSS Markup Generator XHTML/CSS标签生成器

21. Roundedcornr 圆角图片效果生成器

22. favicon.cc favicon生成器

23. Genfavicon favicon生成器

24. stripedesigner.com 条纹背景生成器

25. 3D Pack 3D图片效果

26. CSS Text Wrapper CSS特殊文字形状

27. Favicon Generator Favicon生成器

28. Web 2.0 Badges Web2.0徽章生成器

 

]]> http://zengrong.net/post/688.htm/feed 0 完全去除滚动条 http://zengrong.net/post/40.htm http://zengrong.net/post/40.htm#comments Tue, 07 Jun 2005 05:55:43 +0000 zrong http://www.zengrong.net/40/ 今天做站的时候客户要求实现网站全屏，使用JavaScript： ?View Code HTML1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script language="javascript"> <!-- function fullscreen(){ window.open("/index.htm","","scrollbars=0,toolbar=0,location=0,fullscreen=1,directories=0,status=0,menubar=0,resizable=0"); } // --> </script> </head> <body> …

继续阅读 »

]]>

今天做站的时候客户要求实现网站全屏，使用JavaScript：

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
   <!--
function fullscreen(){ 
window.open("/index.htm","","scrollbars=0,toolbar=0,location=0,fullscreen=1,directories=0,status=0,menubar=0,resizable=0");
}
   // -->
</script>
</head>
<body>
<h3 align="center"><a href="j avascript:fullscreen()">打开</a></h3>
</body>
</html>

可是，即使scrollbars值为0，在全屏的时候仍然会出现滚动条，后来发现，要完全取消滚动条，还需要在CSS里面加上：

?View Code CSS
overflow:hidden;

有网友说可以在Body里面加上scroll=no实现，例如

?View Code HTML
<body scroll=no></body>

我偏爱CSS，所以没有实验，不是是否能成功。

]]> http://zengrong.net/post/40.htm/feed 0 几个CSS弹出菜单源码 http://zengrong.net/post/42.htm http://zengrong.net/post/42.htm#comments Mon, 30 May 2005 06:02:46 +0000 zrong http://www.zengrong.net/42/ 纯CSS菜单 ?View Code HTML< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ <!ELEMENT a (#PCDATA | table)* > ]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> Drop Down Menu </title> <style type="text/css"> body {font-size:1%; color:#fff;} /*get …

继续阅读 »

]]>

纯CSS菜单

?View Code HTML
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
[ <!ELEMENT a (#PCDATA | table)* > ]>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Drop Down Menu </title>
<style type="text/css">
body {font-size:1%; color:#fff;} /*get rid of the IE bug that prints the the end of the !doctype */
.menu {display:none;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
p { color:#000; font-size:16px;}
</style>
<!--[if IE]>
   <style type="text/css">
   /*< ![CDATA[*/ 
.holder {display:none;}
.menu {display:block;}
a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.outer:hover {color:#fff; background:#000; overflow:visible;}
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
a.inner:hover {background:#add;}
   /*]]>*/
   </style>
< ![endif]-->
</head>
<body>
<p>For another demo with page content see <a href="http://www.stunicholls.myby.co.uk/menus/drop_down.html" title="another demo">this page</a>
<div class="menu">
<a class="outer" href="page1.html">MENU 1
<table><tr><td>
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</td></tr></table>
</a>
<a class="outer" href="page1.html">MENU 2
<table><tr><td>
<a class="inner" href="page2a.html">Page 2a</a>
<a class="inner" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</td></tr></table>
</a>
</div>
<div class="holder">
MENU 1<br />
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</div>
<div class="holder">
MENU 2<br />
<a class="inner" href="page2a.html">Page 2a</a>
<a class="inner" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</div>
</p></body>
</html>


JS+CSS

?View Code HTML
< !DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
	font-family: arial, 宋体, serif;
        font-size:12px;
}
 
 
#nav {
	 line-height: 24px;  list-style-type: none; background:#666;
}
 
#nav a {
	display: block; width: 80px; text-align:center;
}
 
#nav a:link  {
	color:#666; text-decoration:none;
}
#nav a:visited  {
	color:#666;text-decoration:none;
}
#nav a:hover  {
	color:#FFF;text-decoration:none;font-weight:bold;
}
 
#nav li {
	float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
	background:#999;
}
#nav li ul {
	line-height: 27px;  list-style-type: none;text-align:left;
	left: -999em; width: 180px; position: absolute; 
}
#nav li ul li{
	float: left; width: 180px;
	background: #F6F6F6; 
}
 
 
#nav li ul a{
	display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
}
 
#nav li ul a:link  {
	color:#666; text-decoration:none;
}
#nav li ul a:visited  {
	color:#666;text-decoration:none;
}
#nav li ul a:hover  {
	color:#F3F3F3;text-decoration:none;font-weight:normal;
	background:#C00;
}
 
#nav li:hover ul {
	left: auto;
}
#nav li.sfhover ul {
	left: auto;
}
#content {
	clear: left; 
}
-->
</style>
<script type=text/j avascript><!--//-->< ![CDATA[//><!--
function menuFix() {
	var sfEls = document.getElementById("nav").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
		this.className+=(this.className.length>0? " ": "") + "sfhover";
		}
		sfEls[i].onMouseDown=function() {
		this.className+=(this.className.length>0? " ": "") + "sfhover";
		}
		sfEls[i].onMouseUp=function() {
		this.className+=(this.className.length>0? " ": "") + "sfhover";
		}
		sfEls[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
 
"");
		}
	}
}
window.onload=menuFix;
//-->< !]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">产品介绍</a>
	<ul>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	<li><a href="#">产品一</a></li>
	</ul>
</li>
<li><a href="#">服务介绍</a>
	<ul>
	<li><a href="#">服务二</a></li>
	<li><a href="#">服务二</a></li>
	<li><a href="#">服务二</a></li>
	<li><a href="#">服务二服务二</a></li>
	<li><a href="#">服务二服务二服务二</a></li>
	<li><a href="#">服务二</a></li>
	</ul>
</li>
<li><a href="#">成功案例</a>
	<ul>
	<li><a href="#">案例三</a></li>
	<li><a href="#">案例</a></li>
	<li><a href="#">案例三案例三</a></li>
	<li><a href="#">案例三案例三案例三</a></li>
	</ul>
</li>
<li><a href="#">关于我们</a>
	<ul>
	<li><a href="#">我们四</a></li>
	<li><a href="#">我们四</a></li>
	<li><a href="#">我们四</a></li>
	<li><a href="#">我们四111</a></li>
	</ul>
</li>
 
<li><a href="#">在线演示</a>
	<ul>
	<li><a href="#">演示</a></li>
	<li><a href="#">演示</a></li>
	<li><a href="#">演示</a></li>
	<li><a href="#">演示演示演示</a></li>
	<li><a href="#">演示演示演示</a></li>
	<li><a href="#">演示演示</a></li>
	<li><a href="#">演示演示演示</a></li>
	<li><a href="#">演示演示演示演示演示</a></li>
	</ul>
</li>
<li><a href="#">联系我们</a>
	<ul>
	<li><a href="#">联系联系联系联系联系</a></li>
	<li><a href="#">联系联系联系</a></li>
	<li><a href="#">联系</a></li>
	<li><a href="#">联系联系</a></li>
	<li><a href="#">联系联系</a></li>
	<li><a href="#">联系联系联系</a></li>
	<li><a href="#">联系联系联系</a></li>
	</ul>
</li>
</ul>
</body>
</html>
]]> http://zengrong.net/post/42.htm/feed 0