CSS

了解Flex4中新的的Skin、CSS、Layout、NameSpace相关资料

Sep 3rd

由zrong发表在听说 | 1,467 次查看

没有评论

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 Specification（新的state使用方法详细介绍）
MXML 2009 – Functional and Design Specification（着重介绍了Flex4的Namespace、Declarations、Private、Library标签的用法，以及Flex4与Flex3之间的区别）
Flex4:DataGroup and ItemRenderers
Flex 4 ＆ Custom Layouts（Flex4与自定义布局，中文在这里）

更多 >

CSS, Flex, FXG, Layout, skin

Flex不支持background-position属性的问题

Aug 10th

由zrong发表在技术 | 448 次查看

4个评论

我在为一个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中提供的方法好了。

CSS, degrafa, Flex, skin

如何在Flex中实现图片背景平铺

Jun 7th

由zrong发表在技术 | 783 次查看

没有评论

别找了，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");
}

此外还有：
更多 >

CSS, degrafa, Flex, skin

[转]快速设计网页必备的28款工具和生成器

Mar 24th

由zrong发表在听说 | 338 次查看

没有评论

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

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

更多 >

CSS, generator, HTML

完全去除滚动条

Jun 7th

由zrong发表在技术 | 683 次查看

没有评论

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

^?View Code HTML

< !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，所以没有实验，不是是否能成功。

CSS, javascript

几个CSS弹出菜单源码

May 30th

由zrong发表在技术 | 321 次查看

没有评论

纯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>

CSS

分类
- 乱弹 (65)
- 听说 (63)
- 培训 (11)
- 应用 (37)
- 感悟 (37)
- 技术 (163)
- 网站 (46)
- 设计 (6)
标签云

AS3 Flash Flex ActionScript FMS WordPress FlashPlayer AIR 插件 TipsAndTricks linux software PHP 培训 CMS ubuntu freeware Office 旅游手机 Windows MySQL AS2 xbeta Cookbook CSS General note FlexBuilder Word FlashBuilder Server video IME FCS google Excel Mambo Firefox swfObject Joomla! opensource RIA PDA ASP.net
日历
2010-09月

一二三四五六日

« Aug

1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29 30
最新评论
存档页
功能
友情链接
推荐网站
推荐项目
- Use OpenOffice.org

2010-09月
一	二	三	四	五	六	日
« Aug
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

CSS

了解Flex4中新的的Skin、CSS、Layout、NameSpace相关资料

Flex不支持background-position属性的问题

如何在Flex中实现图片背景平铺

[转]快速设计网页必备的28款工具和生成器

完全去除滚动条

几个CSS弹出菜单源码

分类

标签云

日历

最新评论

存档页

功能

友情链接

推荐网站

推荐项目