标签存档: CSS

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

作者: zrong 日期: 2009-09-3 没有评论 | 9,541 次查看

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与自定义布局，中文在这里）

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

作者: zrong 日期: 2009-08-10 4 条评论 | 2,182 次查看

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

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

作者: zrong 日期: 2009-06-7 没有评论 | 3,496 次查看

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

此外还有：
继续阅读 »

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

作者: zrong 日期: 2009-03-24 没有评论 | 1,473 次查看

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

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

继续阅读 »

完全去除滚动条

作者: zrong 日期: 2005-06-7 没有评论 | 2,792 次查看

今天做站的时候客户要求实现网站全屏，使用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弹出菜单源码

作者: zrong 日期: 2005-05-30 没有评论 | 1,691 次查看

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

zrong's Blog

Flash、Flex、RIA、web、Linux和我的生活

标签存档: CSS

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

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

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

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

完全去除滚动条

几个CSS弹出菜单源码

凑域名钱

订阅

Translate

标签云

分类

最新评论

最多访问

存档页

友情链接

推荐网站

推荐项目