<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[ELLVEN的BLOG - 设计]]></title>
<link>http://www.stom.com.cn/blog/</link>
<description><![CDATA[不管前路有多坎坷,亦要努力向前!]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[sinsun#yeah.net(ELLVEN)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>ELLVEN的BLOG</title>
	<url>http://www.stom.com.cn/blog/images/logos.gif</url>
	<link>http://www.stom.com.cn/blog/</link>
	<description>ELLVEN的BLOG</description>
</image>

			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=265</link>
			<title><![CDATA[仿flash的滑动门竖型菜单]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Fri,20 Aug 2010 02:33:39 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=265</guid>
		<description><![CDATA[仿flash的滑动门竖型菜单<br/><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp91968">
<!DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.01//EN&#34; &#34;<a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/html4/strict.dtd</a>&#34;>
<html>
<head>
<title>鼠标放大菜单项</title>
<style type=&#34;text/css&#34;>
	html {
	overflow: hidden;
	}
	body {
	background: #333;
	}
	#menu {
	padding: 10px;
	background: #111;
	height: 298px;
	width: 398px;
	}
	#menu a {
	display:block;
	text-decoration:none;
	/*/*/
	font-family: arial, helvetica, verdana, sans-serif;
	white-space: nowrap;
	}
</style>
<script type=&#34;text/javascript&#34;><!--
var P,T;
var over = -1;
var fontSize = 38;
var lensFX = 1;
var num = true;
var color = &#34;#FFF&#34;;
var sel&#101;cted = &#34;#F80&#34;;
function zoom(s){
	if(s!=over){
		over = s;
		for(var i=0;i<T;i++){
			P[i].style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+&#34;px&#34;;
			P[i].style.color=(i==s)?sel&#101;cted:color;
		}
	}
}
onload = function(){
	P = document.getElementById(&#34;menu&#34;).getElementsByTagName(&#34;a&#34;);
	T = P.length;
	for (var i=0;i<T;i++){
		if(num){
			x=i+&#34;.&#34;;
			if(x.length<3)x=&#34;0&#34;+x;
			P[i].innerHTML = x+P[i].innerHTML;
		}
		P[i].style.width = &#34;100%&#34;;/*/*/
		P[i].onmouseover=new Function(&#34;zoom(&#34;+i+&#34;);&#34;);
	}
	zoom(0);
}
//-->
</script>
</head>
<body>
<div id=&#34;menu&#34;>
<a href=&#34;/&#34;>源码爱好者</a>
<a href=&#34;/sort/list_1_1.shtml&#34;>ASP</a>
<a href=&#34;/sort/list_2_1.shtml&#34;>PHP</a>
<a href=&#34;/sort/list_3_1.shtml&#34;>.NET</a>
<a href=&#34;/sort/list_13_1.shtml&#34;>C#</a>
<a href=&#34;/sort/list_4_1.shtml&#34;>JSP</a>
<a href=&#34;/sort/list_5_1.shtml&#34;>Java</a>
<a href=&#34;/sort/list_8_1.shtml&#34;>VC/C++</a>
<a href=&#34;/sort/list_9_1.shtml&#34;>VB</a>
<a href=&#34;/sort/list_10_1.shtml&#34;>Delphi</a>
<a href=&#34;/sort/list_11_203_1.shtml&#34;>Ajax</a>
<a href=&#34;/sort/list_11_1.shtml&#34;>脚本资源</a>
<a href=&#34;/sort/list_7_1.shtml&#34;>电子书籍</a>
<a href=&#34;/sort/list_12_1.shtml&#34;>方案及文档</a>
<a href=&#34;/sort/list_6_1.shtml&#34;>工具软件</a>
</div>
</body>
</html>
</TEXTAREA><br/><INPUT onclick="runEx('temp91968')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp91968')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp91968')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div>]]></description>
		</item>
		
			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=217</link>
			<title><![CDATA[DIV CSS完美兼容IE6/IE7/FF的通用方法]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Sat,25 Oct 2008 13:16:32 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=217</guid>
		<description><![CDATA[关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.<br/><br/>一、CSS HACK <br/><br/>以下两种方法几乎能解决现今所有HACK.<br/><br/>1, !important<br/><br/>随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;style&gt;<br/>#wrapper<br/>{<br/>width: 100px!important; /* IE7+FF */<br/>width: 80px; /* IE6 */<br/>}<br/>&lt;/style&gt;&nbsp;&nbsp;<br/></div></div><br/><br/>2, IE6/IE77对FireFox<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.<br/>&lt;style&gt;<br/>#wrapper<br/>{<br/>#wrapper { width: 120px; } /* FireFox */<br/>*html #wrapper { width: 80px;} /* ie6 fixed */<br/>*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */<br/>}<br/>&lt;/style&gt;&nbsp;&nbsp;</div></div><br/><br/><br/>注意:<br/>*+html 对IE7的HACK 必须保证HTML顶部有如下声明：<br/><br/>&lt;!DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.01 Transitional//EN&#34;　&#34;<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank" rel="external">http://www.w3.org/TR/html4/loose.dtd</a>&#34;&gt;<br/><br/>二、万能 float 闭合<br/><br/>关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]<br/>将以下代码加入Global CSS 中,给需要闭合的div加上 class=&#34;clearfix&#34; 即可,屡试不爽.<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">&lt;style&gt;<br/>/* Clear Fix */<br/><br/>.clearfix:after<br/>{<br/>content:&#34;.&#34;;<br/>display:block;<br/>height:0;<br/>clear:both;<br/>visibility:hidden;<br/>}<br/>.clearfix<br/>{<br/>display:inline-block;<br/>}<br/>/* Hide from IE Mac */<br/>.clearfix {display:block;}<br/>/* End hide from IE Mac */<br/>/* end of clearfix */<br/>&lt;/style&gt;</div></div><br/> <br/><br/><br/>三、其他兼容技巧<br/><br/>1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)<br/>2, 居中问题.<br/>1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)<br/>2).水平居中. margin: 0 auto;(当然不是万能)<br/>3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)<br/>4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.<br/>5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)<br/>6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.<br/>7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.<br/><br/>1 针对firefox ie6 ie7的css样式<br/>现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，<br/>但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针<br/>对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。<br/>现在写一个CSS可以这样：<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">#1 { color: #333; } /* Moz */<br/>* html #1 { color: #666; } /* IE6 */<br/>*+html #1 { color: #999; } /* IE7 */&nbsp;&nbsp;</div></div><br/><br/>那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。<br/><br/>2 css布局中的居中问题<br/>主要的样式定义如下：<br/><br/>body {TEXT-ALIGN: center;}<br/>#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }<br/>说明：<br/>首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。<br/>但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”<br/>需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，<br/>只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。<br/><br/>3 盒模型不同解释<br/><br/>#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}<br/>#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}<br/><br/>4 浮动ie产生的双倍距离<br/><br/>#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}<br/>这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);<br/><br/>#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;<br/><br/>IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，<br/>正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。<br/>比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：<br/>#box{ width: 80px; height: 35px;}html&gt;body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}<br/><br/>6 页面的最小宽度<br/><br/>min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，<br/>而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个&lt;div&gt; 放到 &lt;body&gt; 标签下，然后为div指定一个类：<br/>然后CSS这样设计：<br/>#container{ min-width: 600px; width:e&#173;xpression(document.body.clientWidth &lt; 600? &#34;600px&#34;: &#34;auto&#34; );}<br/>第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。<br/><br/>7 清除浮动<br/><br/>.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}<br/>或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，<br/>所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: &#34;.&#34;; display: block; height: 0; clear: both; visibility: hidden;}<br/><br/>8 DIV浮动IE文本产生3象素的bug<br/><br/>左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.<br/><br/>#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}<br/>HTML代码&lt;div id=&#34;box&#34;&gt; &lt;div id=&#34;left&#34;&gt;&lt;/div&gt; &lt;div id=&#34;right&#34;&gt;&lt;/div&gt;&lt;/div&gt;<br/><br/>9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)<br/><br/>p[id]{}div[id]{}<br/>这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用<br/>属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.<br/><br/>10 IE捉迷藏的问题<br/><br/>当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。<br/>有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。<br/>解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。<br/><br/>11 高度不适应<br/><br/>高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用<br/>margin 或paddign 时。<br/>例：<br/>&lt;div id=&#34;box&#34;&gt;<br/>&lt;p&gt;p对象中的内容&lt;/p&gt;<br/>&lt;/div&gt;<br/>CSS：#box {background-color:#eee; }<br/>#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }<br/>解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。<br/><br/>六、CSS兼容要点分析IE vs FF <br/><br/>CSS 兼容要点：<br/><br/>DOCTYPE 影响 CSS 处理<br/><br/>FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行<br/><br/>FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中<br/><br/>FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width<br/><br/>FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式<br/><br/>div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行<br/><br/>cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以<br/><br/>FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集<br/><br/>使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^<br/><br/>1、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：<br/><br/>div{margin:30px!important;margin:28px;}<br/><br/>注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：<br/><br/>div{maring:30px;margin:28px}<br/><br/>重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;<br/><br/>2、IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改<br/><br/>div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}<br/><br/>，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）<br/><br/>3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义<br/><br/>ul{margin:0;padding:0;}<br/><br/>就能解决大部分问题<br/><br/>__page_break__<br/><br/>4、关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为<br/><br/>&lt; type=&#34;text/java&#34;&gt;<br/><br/>就可以了<br/><br/>七、10个你未必知道的CSS技巧 <br/><br/>1、CSS字体属性简写规则<br/><br/>一般用CSS设定字体属性是这样做的：<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"> <br/>font-weight:bold;<br/><br/>font-style:italic;<br/><br/>font-varient:small-caps;<br/><br/>font-size:1em;<br/><br/>line-height:1.5em;<br/><br/>font-family:verdana,sans-serif;</div></div><br/> <br/>但也可以把它们全部写到一行上去：<br/><br/>font: bold italic small-caps 1em/1.5em verdana,sans-serif;<br/><br/>真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。<br/><br/>2、同时使用两个类<br/><br/>一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：<br/><br/>&lt;p class=&#34;text side&#34;&gt;...&lt;/p&gt;<br/><br/>同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。<br/><br/>补充：对于一个ID，不能这样写&lt;p id=&#34;text side&#34;&gt;...&lt;/p&gt;也不能这样写<br/><br/>3、CSS border的缺省值<br/><br/>通常可以设定边界的颜色，宽度和风格，如：<br/><br/>border: 3px solid #000<br/><br/>这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。<br/><br/>如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。<br/><br/>4、CSS用于文档打印<br/><br/>许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。<br/><br/>也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：<br/><br/>&lt;link type=&#34;text/css&#34; rel=&#34;stylesheet&#34; href=&#34;/blog/stylesheet.css&#34; media=&#34;screen&#34; /&gt; &lt;link type=&#34;text/css&#34; rel=&#34;stylesheet&#34; href=&#34;printstyle.css&#34; media=&#34;print&#34; /&gt; <br/><br/>第1行就是显示，第2行是打印，注意其中的media属性。<br/><br/>但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。<br/><br/>5、图片替换技巧<br/><br/>一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。<br/><br/>比如你想整个卖东西的图标，你就用了这个图片：<br/><br/>&lt;h1&gt;&lt;img src=&#34;/blog/widget-image.gif&#34; alt=&#34;Buy widgets&#34; /&gt;&lt;/h1&gt;<br/><br/>这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：<br/><br/>&lt;h1&gt;Buy widgets&lt;/h1&gt;<br/><br/>但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：<br/><br/>h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px } <br/><br/>注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。<br/><br/>6、CSS box模型的另一种调整技巧<br/><br/>这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：<br/><br/>#box { width: 100px; border: 5px; padding: 20px } <br/><br/>这样调用它：<br/><br/>&lt;div id=&#34;box&#34;&gt;...&lt;/div&gt;<br/><br/>这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。<br/><br/>但用CSS也可以达到同样的目的，让它们显示效果一致。<br/><br/>#box { width: 150px } #box div { border: 5px; padding: 20px } <br/><br/>这样调用：<br/><br/>&lt;div id=&#34;box&#34;&gt;&lt;div&gt;...&lt;/div&gt;&lt;/div&gt;<br/><br/>这样，不管什么浏览器，宽度都是150点了。<br/><br/>7、块元素居中对齐<br/><br/>如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：<br/><br/>#content { width: 700px; margin: 0 auto } <br/><br/>你会使用 &lt;div id=&#34;content&#34;&gt; 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：<br/><br/>body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto } <br/><br/>这会把网页内容都居中，所以在Content中又加入了<br/><br/>text-align: left 。<br/><br/>8、用CSS来处理垂直对齐<br/><br/>垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。<br/><br/>CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。<br/><br/>9、CSS在容器内定位<br/><br/>CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：<br/><br/>#container { position: relative } <br/><br/>这样容器内所有的元素都会相对定位，可以这样用：<br/><br/>&lt;div id=&#34;container&#34;&gt;&lt;div id=&#34;navigation&#34;&gt;...&lt;/div&gt;&lt;/div&gt;<br/><br/>如果想定位到距左30点，距上5点，可以这样：<br/><br/>#navigation { position: absolute; left: 30px; top: 5px } <br/><br/>当然，你还可以这样：<br/><br/>margin: 5px 0 0 30px<br/><br/>注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。<br/><br/>10、直通到屏幕底部的背景色<br/><br/>在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：<br/><br/>#navigation { background: blue; width: 150px } <br/><br/>较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？<br/><br/>不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。<br/><br/>body { background: url(/blog/blue-image.gif) 0 0 repeat-y } <br/><br/>此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。<br/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=205</link>
			<title><![CDATA[blog升级成功(参考FreedLife的风格)]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Tue,30 Sep 2008 12:28:39 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=205</guid>
		<description><![CDATA[成功将blog升级到2.8.5,这次换了一个blog skin ...<br/>本站这次的修改,主要是因为喜欢freedlife的这款皮肤,但是发现原作者对网站修改太多,根本无法根据原始皮肤应用.只好拿过来自己修改了.<br/>风格对于原版问题主要集中在这么几个地方:<br/>1.样式错位严重.确少文件,间距不对等情况到处都是<br/>2.原作修改了很多表现形式,导致一些&lt;br /&gt; | 符号 产生过大间隙和错位<br/>3.blog文章标题前的小日历无法显示.<br/>4.发布文章和登陆时的一些控件大小不正常..<br/>5.无法像原作一样右侧菜单栏JS特效<br/><br/>目前修改了一些.暂时无法解决静态化问题.... <br/><br/>修改记录:(将陆续添加...)<br/>10.02<br/>修改了ajax登陆,不用每次都繁琐的去点登陆然后在其他页面登陆了...可惜,这个ajax的效果还不太满意~~争取有空了再自己弄弄<br/>具体的修改方法:<a href="http://www.stom.com.cn/blog/attachments/month_0810/e2008102145631.rar" target="_blank"><img src="http://www.stom.com.cn/blog/images/download.gif" alt="下载文件" style="margin:0px 2px -4px 0px"/></a><br/><br/><br/>10.01<br/>1.修改了UBBcontent样式的颜色是白色的情况。<br/>2.顶部图片,底部参数修改<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">&lt;p style=&#34;font-size:11px;&#34;&gt;Processed in &lt;b&gt;&lt;%=FormatNumber(Timer()-StartTime,6,-1)%&gt;&lt;/b&gt; second(s) , &lt;b&gt;&lt;%=SQLQueryNums%&gt;&lt;/b&gt; queries&lt;%=SkinInfo%&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;br/&gt;&lt;a href=&#34;<a href="http://www.miibeian.gov.cn" target="_blank" rel="external">http://www.miibeian.gov.cn</a>&#34; style=&#34;font-size:12px&#34;&gt;&lt;b&gt;&lt;%=blogabout%&gt;&lt;/b&gt;&lt;/a&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;<br/></div></div><br/>3.增加了<span style="color:red">日志分页功能</span>.. 修改办法<a href="http://www.stom.com.cn/blog/attachments/month_0810/u200810105547.rar" target="_blank"><img src="http://www.stom.com.cn/blog/images/download.gif" alt="下载文件" style="margin:0px 2px -4px 0px"/></a><br/><br/><br/>至此已基本上完成整个blog skin 的移植.有朋友发现问题请留言给我...<br/><br/>9.30<br/>1.修改了样式中关于发帖时候的附件上传一栏错位情况.并且设置背景为相同颜色.<br/><br/>2.修改增加个性日立.让标题前的小空格里面能够正常显示.具体代码在 class/cls_default.asp 和 cls_article.asp里。<br/><br/>原始语句：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">&lt;div class=&#34;Content-top&#34;&gt;&lt;div class=&#34;ContentLeft&#34;&gt;&lt;/div&gt;&lt;div class=&#34;ContentRight&#34;&gt;&lt;/div&gt;<br/></div></div><br/><br/>cls_default.asp 修改为：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">&lt;div class=&#34;Content-top&#34;&gt;&lt;div class=&#34;ContentLeft&#34;&gt;&lt;span&gt;&lt;%=DateToStr(webLogArr(4,PageCount),&#34;m&#34;)%&gt;&lt;/span&gt;&lt;p&gt;&lt;%=DateToStr(webLogArr(4,PageCount),&#34;d&#34;)%&gt;&lt;/p&gt;&lt;/div&gt;&lt;div class=&#34;ContentRight&#34;&gt;&lt;/div&gt;<br/></div></div><br/><br/>cls_article.asp 修改为：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">&lt;div class=&#34;Content-top&#34;&gt;&lt;div class=&#34;ContentLeft&#34;&gt;&lt;span&gt;&lt;%=DateToStr(log_ViewArr(9,0),&#34;m&#34;)%&gt;&lt;/span&gt;&lt;p&gt;&lt;%=DateToStr(log_ViewArr(9,0),&#34;d&#34;)%&gt;&lt;/p&gt;&lt;/div&gt;&lt;div class=&#34;ContentRight&#34;&gt;&lt;/div&gt;<br/></div></div><br/><br/>3.增加了Mootools.JS效果，就是侧边菜单内容鼠标放置上就会变色移动的特效。<br/>相关说明请参考&nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="http://www.freedlife.cn/post/Work/mousesweet/" rel="external">http://www.freedlife.cn/post/Work/mousesweet/</a><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">1.下载JS文件，放到根目录，当然也可以放到其它目录。<br/>2.找到 header.asp 的<br/>　&lt;script type=&#34;text/javascript&#34; src=&#34;common/common.js&#34;&gt;&lt;/script&gt;<br/>在下面添加<br/>　&lt;script type=&#34;text/javascript&#34; src=&#34;common/mousesweet.js&#34;&gt;&lt;/script&gt;<br/>到此效果就已经实现了</div></div><br/><br/>9.29<br/>1.去掉了Category中的&lt;br /&gt;修正 中间显示不正常 文件cache.asp 找到<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">Category_Len = UBound(Arr_Category, 2)</div></div><br/>去掉 下面几段 里的 &lt;br /&gt;<br/><br/>2.去掉了function.asp 中的 “|”符号 ，让底部翻页样式正常，位置 查找<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">//html start<br/>&nbsp;&nbsp;&nbsp;&nbsp;var pageCode = [&#39;&lt;div class=&#34;page&#34; style=&#34;&#39;+Style+&#39;&#34;&gt;&lt;ul&gt;&lt;li class=&#34;pageNumber&#34;&gt;&#39;]; // &amp; _curPage&amp;&#34;/&#34;&amp;Pages &amp; &#34; | &#34;</div></div><br/><br/>3.左侧内容部分新增了3个背景，让文章有外框，具体修改layout.css实现]]></description>
		</item>
		
			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=189</link>
			<title><![CDATA[让并排的两个Div自适应高度（对齐高度）]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Fri,04 Jul 2008 23:32:07 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=189</guid>
		<description><![CDATA[好久没有做站了,这次做又遇到了些麻烦.... 这个主要是为了方便与两个div列能够等同高度<br/><br/>由于设计页面需要，要把两个并排显示的div实现一样高的效果，n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标。方法有以下几种：1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现。首先说下本博客实现的2个div一样高的方法（即js方法）。<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;div+css基本布局：<br/><br/>&lt;div id=&#34;mm&#34;&gt;<br/>&lt;div id=&#34;mm1&#34;&gt;&lt;/div&gt;<br/>&lt;div id=&#34;mm2&#34;&gt;&lt;/div&gt;<br/>&lt;/div&gt;<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;1、js实现div自适应高度<br/><br/>代码如下：<br/>&lt;script type=&#34;text/javascript&#34;&gt;<br/>&lt;!--<br/>window.onload=window.onresize=function(){<br/>if(document.getElementById(&#34;mm2&#34;).clientHeight&lt;document.getElementById(&#34;mm1&#34;).clientHeight){<br/>document.getElementById(&#34;mm2&#34;).style.height=document.getElementById(&#34;mm1&#34;).offsetHeight+&#34;px&#34;;<br/>}<br/>else{<br/>document.getElementById(&#34;mm1&#34;).style.height=document.getElementById(&#34;mm2&#34;).offsetHeight+&#34;px&#34;;<br/>}<br/>}<br/>--&gt;<br/>&lt;/script&gt;<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;（注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；我测试在IE6.0/IE7.0下通过，考虑绝大数人仍然用的是IE，所以并没有在opera和firefoxs下调试，哪位用的是opera或ff，可以帮忙看看飘易博客的DIV是否保持了一致的高度。）<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;2、纯CSS方法<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;css里代码（调试通过，但不会显示div下边框，即border-bottom）：<br/><br/>/*左右自适应相同高度start*/<br/>#m1,#m2<br/>{<br/>padding-bottom: 32767px !important;<br/>margin-bottom: -32767px !important; <br/>}<br/>@media all and (min-width: 0px) {<br/>#m1,#m2<br/>{<br/>padding-bottom: 0 !important;<br/>margin-bottom: 0 !important; <br/>}<br/>#m1:before, #m2:before<br/>{<br/>content: &#39;[DO NOT LEAVE IT IS NOT REAL]&#39;;<br/>display: block;<br/>background: inherit;<br/>padding-top: 32767px !important;<br/>margin-bottom: -32767px !important;<br/>height: 0;<br/>}<br/>}<br/>/*左右自适应相同高度end*/<br/><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;3、加背景图片<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;这个方法，很多大网站在使用，如163，sina等。<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;XHTML代码：<br/><br/>&lt;div id=&#34;wrap&#34;&gt;<br/>&lt;div id=&#34;column1&#34;&gt;这是第一列&lt;/div&gt;<br/>&lt;div id=&#34;column1&#34;&gt;这是第二列&lt;/div&gt;<br/>&lt;div class=&#34;clear&#34;&gt;&lt;/div&gt;<br/>&lt;/div&gt;<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;CSS代码:<br/><br/>#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}<br/>#column1{ float:left; width:300px;}<br/>#column2{ float:right; width:476px;}<br/>.clear{ clear:both;}<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp; 还有其他的一些方法，但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码，请给我们留言，欢迎与我们讨论。<br/>]]></description>
		</item>
		
			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=125</link>
			<title><![CDATA[pjblog如何加google广告？看了这里你就明白]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Thu,13 Sep 2007 00:40:35 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=125</guid>
		<description><![CDATA[因为最近也听几个朋友谈起要在网页里放广告...<br/>作这行很多年了,但是我很少在自己的网站里面放广告,这次又要看PJ的代码...更是有点晕<br/>我相信,应该有很多用PJ的朋友跟我一样,还不知道如何在页面里面放入google的广告.经过本人实践,这个是可行的...不废话,贴出方法:<br/><br/><span style="font-size:14pt"> 文章内头部添加方法 </span><br/>申请好google之后代码如下：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;script type=&#34;text/javascript&#34;&gt;&lt;!--<br/>google_ad_client = &#34;pub-5021558392382773&#34;;<br/>google_ad_width = 728;<br/>google_ad_height = 90;<br/>google_ad_format = &#34;728x90_as&#34;;<br/>google_ad_type = &#34;text&#34;;<br/>//2007-09-12: blog ad<br/>google_ad_channel = &#34;7327988421&#34;;<br/>google_color_border = &#34;E3E3E3&#34;;<br/>google_color_bg = &#34;F3F3F3&#34;;<br/>google_color_link = &#34;292929&#34;;<br/>google_color_text = &#34;292929&#34;;<br/>google_color_url = &#34;A6A6A6&#34;;<br/>google_ui_features = &#34;rc:0&#34;;<br/>//--&gt;<br/>&lt;/script&gt;<br/>&lt;script type=&#34;text/javascript&#34;<br/>&nbsp;&nbsp;src=&#34;<a href="http://pagead2.googlesyndication.com/pagead/show_ads.js" target="_blank" rel="external">http://pagead2.googlesyndication.com/pagead/show_ads.js</a>&#34;&gt;<br/>&lt;/script&gt;<br/></div></div><br/><br/>找到你的<span style="font-size:12pt">Template</span>目录下面的 <span style="font-size:12pt">Article.asp</span>文件<br/><br/>大概在20行的位置，找到如下代码：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;div id=&#34;logPanel&#34; class=&#34;Content-body&#34;&gt;<br/></div></div><br/><br/>将你的google ad代码加在这段话下，例如我的：<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;div id=&#34;logPanel&#34; class=&#34;Content-body&#34;&gt;<br/>&lt;!-- Google Ad --&gt;<br/>&lt;script type=&#34;text/javascript&#34;&gt;&lt;!--<br/>google_ad_client = &#34;pub-5021558392382773&#34;;<br/>google_ad_width = 728;<br/>google_ad_height = 90;<br/>google_ad_format = &#34;728x90_as&#34;;<br/>google_ad_type = &#34;text&#34;;<br/>//2007-09-12: blog ad<br/>google_ad_channel = &#34;7327988421&#34;;<br/>google_color_border = &#34;E3E3E3&#34;;<br/>google_color_bg = &#34;F3F3F3&#34;;<br/>google_color_link = &#34;292929&#34;;<br/>google_color_text = &#34;292929&#34;;<br/>google_color_url = &#34;A6A6A6&#34;;<br/>google_ui_features = &#34;rc:0&#34;;<br/>//--&gt;<br/>&lt;/script&gt;<br/>&lt;script type=&#34;text/javascript&#34;<br/>&nbsp;&nbsp;src=&#34;<a href="http://pagead2.googlesyndication.com/pagead/show_ads.js" target="_blank" rel="external">http://pagead2.googlesyndication.com/pagead/show_ads.js</a>&#34;&gt;<br/>&lt;/script&gt;<br/>&lt;!-- Google Ad --&gt;<br/>&lt;$ArticleContent$&gt;<br/>&lt;br/&gt;&lt;br/&gt;<br/>&lt;br/&gt;<br/>&lt;/div&gt;<br/>&lt;div class=&#34;Content-body&#34;&gt;<br/>&lt;$log_Modify$&gt;<br/></div></div><br/><br/>改好以后，请各位TX到后台的管理面板 - 〉 站点基本设置 - 〉初始化数据 - 〉 [重新生成所有日志到文件] 就可以了。这样就OK了！是不是很容易。<br/><br/>附赠<br/>============================================<br/>[日志下搜索条的添加方法]<br/><br/>后台设置为动态，打开 class 目录下的 cls_article.asp 文件，在<br/>&lt;div class=&#34;Content-bottom&#34;&gt;&lt;div class=&#34;ContentBLeft&#34;&gt;&lt;/div&gt;&lt;div class=&#34;ContentBRight&#34;&gt;&lt;/div&gt;评论: &lt;%=log_ViewArr(12,0)%&gt; |<br/><br/>引用: &lt;%=log_ViewArr(13,0)%&gt; | 查看次数: &lt;%=log_ViewArr(4,0)%&gt; |&nbsp;&nbsp;&lt;a<br/><br/>href=&#34;javascript:YwXc();YwXc();YwXc();YwXc();YwXc();YwXc();YwXc();scroll(0,0)&#34;&gt;返回顶部&lt;/a&gt;&lt;/div&gt;<br/>后面按里面代码的格式添加你自己的Google搜索代码.<br/><br/>后台设置为静态的，就打开 Template 目录下的 Article.asp 文件，在22行左右后面按里面代码的格式添加Google搜索代码<br/><br/>=====================<br/>静态模式下：<br/>打开 Template 目录下的 Article.asp 文件（Template/Article.asp），在20行左右找到<br/>&lt;div id=&#34;logPanel&#34; class=&#34;Content-body&#34;&gt;后加AD代码。这样是文章开头加AD<br/><br/>文章未尾加AD：找到&lt;$log_Modify$&gt;<br/>后在后面加AD。如果AD和文章在同一行了，就在AD后加上&lt;/br&gt;换行的意思。<br/><br/>动态模式下：文章开头放置广告<br/>修改class/cls_article.asp文件,在大约115行左右:<br/><br/>&lt;%if stat_DelAll o&#114; (stat_Del and log_ViewArr(5,0)=memName)&nbsp;&nbsp;then %&gt;　&lt;a<br/><br/>href=&#34;blogedit.asp?action=del&amp;id=&lt;%=log_ViewArr(0,0)%&gt;&#34; onclick=&#34;if (!window.confirm(&#39;是否要删除该日志&#39;)) return false&#34;<br/><br/>accesskey=&#34;K&#34;&gt;&lt;img src=&#34;images/icon_del.gif&#34; alt=&#34;&#34; border=&#34;0&#34; style=&#34;margin-bottom:-2px&#34;/&gt;&lt;/a&gt;&lt;%end if%&gt;<br/>&lt;/div&gt;<br/>&lt;/div&gt;<br/>后面加上你的广告代码,可以实现在文章开头放置广告的效果.<br/><br/>文章结尾放置广告<br/>then response.write (log_ViewArr(16,0)&amp;&#34;&lt;br/&gt;&#34;)%&gt;后直接加AD可在文章后加上AD。下面的是在tags:后显示的AD。合适于单行高的AD。<br/><br/>&lt;img src=&#34;images/tag.gif&#34; style=&#34;margin:4px 2px -4px 0px&#34; alt=&#34;&#34;/&gt;&lt;strong&gt;Tags:&lt;/strong&gt;<br/><br/>&lt;%=getTag.filterHTML(log_ViewArr(19,0))%&gt;&lt;br/&gt;<br/>&lt;/div&gt;<br/>class=&#34;ContentBLeft&#34;&gt;&lt;/div&gt;&lt;div class=&#34;ContentBRight&#34;&gt;&lt;/div&gt;<br/><br/>后面加上你的广告代码,则可以实现在文章结尾的&#34;Tags: ****&#34;后放置广告的效果<br/><br/>======================<br/>[首页底部放置广告]<br/><br/>在后台新建一个内容模块,修改排列顺序就是个数字，想在最下面的话就写个99的数字，其实数字只要是大于别的在后台看到的数字就可以的。<br/><br/>。想只在首页显示的话就你添加模块时的“所选模块可用操作”里的下拉列表中择设置首页独享..不独享的话在你的每一叶的内容文章下面会<br/><br/>也有一样的AD，但是看你blog是用什么样的皮肤，不然显示的AD会在不好看的位置，比如我这个在内容里显示时的样子如图2，我这就是在留言<br/><br/>簿的下面了，还有谁会在这里看你的AD呀是不？这样当然我就设置为只在首叶显示啦。如果你觉得好看，位置也不错的话，主要看你的皮肤是<br/><br/>什么样效果的，一定要用后台加模块的方法是最科学的。。<br/><br/>其实在侧边栏里加AD也是用这样的后台加个模块的方法是最好摆平的。。不过这时就是加侧边栏目了。。<br/>这里说个例子。比如在链接栏目下加个GGAD，你可到后台links模块里&#34;编辑HTML &#34;加上你的GGAD代码就OK。<br/><br/>想单独弄个模块也是可以的。]]></description>
		</item>
		
			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=79</link>
			<title><![CDATA[在IE中，去掉FLASH虚线外框的办法]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Sun,18 Mar 2007 11:38:01 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=79</guid>
		<description><![CDATA[呵呵，很久没有留点有技术含量的文章在这里了。<br/>这次，从网上找到了这样一个方法，能解决很多朋友头疼的FLASH在IE里面，必须先点“单击以激活此插件”这么麻烦的操作。废话不说，以下是操作：<br/>首先新建一个js文件，文件名：AC_RunActiveContent.js 代码如下：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>//v1.0<br/>//Copyright 2006 Adobe Systems, Inc. All rights reserved.<br/>function AC_AddExtension(src, ext)<br/>{<br/> if (src.indexOf(&#39;?&#39;) != -1)<br/> return src.replace(/\?/, ext+&#39;?&#39;); <br/> else<br/> return src + ext;<br/>}<br/><br/>function AC_Generateobj(objAttrs, params, embedAttrs) <br/>{ <br/> var str = &#39;&lt;object &#39;;<br/> for (var i in objAttrs)<br/> str += i + &#39;=&#34;&#39; + objAttrs[i] + &#39;&#34; &#39;;<br/> str += &#39;&gt;&#39;;<br/> for (var i in params)<br/> str += &#39;&lt;param name=&#34;&#39; + i + &#39;&#34; value=&#34;&#39; + params[i] + &#39;&#34; /&gt; &#39;;<br/> str += &#39;&lt;embed &#39;;<br/> for (var i in embedAttrs)<br/> str += i + &#39;=&#34;&#39; + embedAttrs[i] + &#39;&#34; &#39;;<br/> str += &#39; &gt;&lt;/embed&gt;&lt;/object&gt;&#39;;<br/><br/> document.write(str);<br/>}<br/><br/>function AC_FL_RunContent(){<br/> var ret = <br/> AC_GetArgs<br/> ( arguments, &#34;.swf&#34;, &#34;movie&#34;, &#34;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&#34;<br/> , &#34;application/x-shockwave-flash&#34;<br/> );<br/> AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);<br/>}<br/><br/>function AC_SW_RunContent(){<br/> var ret = <br/> AC_GetArgs<br/> ( arguments, &#34;.dcr&#34;, &#34;src&#34;, &#34;clsid:166B1BCA-3F9C-11CF-8075-444553540000&#34;<br/> , null<br/> );<br/> AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);<br/>}<br/><br/>function AC_GetArgs(args, ext, srcParamName, classid, mimeType){<br/> var ret = new Object();<br/> ret.embedAttrs = new Object();<br/> ret.params = new Object();<br/> ret.objAttrs = new Object();<br/> for (var i=0; i &lt; args.length; i=i+2){<br/> var currArg = args[i].toLowerCase(); <br/><br/> switch (currArg){&nbsp;&nbsp;<br/> case &#34;classid&#34;:<br/> break;<br/> case &#34;pluginspage&#34;:<br/> ret.embedAttrs[args[i]] = args[i+1];<br/> break;<br/> case &#34;src&#34;:<br/> case &#34;movie&#34;:&nbsp;&nbsp;<br/> args[i+1] = AC_AddExtension(args[i+1], ext);<br/> ret.embedAttrs[&#34;src&#34;] = args[i+1];<br/> ret.params[srcParamName] = args[i+1];<br/> break;<br/> case &#34;onafterup&#100;ate&#34;:<br/> case &#34;onbeforeup&#100;ate&#34;:<br/> case &#34;onblur&#34;:<br/> case &#34;oncellchange&#34;:<br/> case &#34;onclick&#34;:<br/> case &#34;ondblClick&#34;:<br/> case &#34;ondrag&#34;:<br/> case &#34;ondragend&#34;:<br/> case &#34;ondragenter&#34;:<br/> case &#34;ondragleave&#34;:<br/> case &#34;ondragover&#34;:<br/> case &#34;ondro&#112;&#34;:<br/> case &#34;onfinish&#34;:<br/> case &#34;onfocus&#34;:<br/> case &#34;onhelp&#34;:<br/> case &#34;onmousedown&#34;:<br/> case &#34;onmouseup&#34;:<br/> case &#34;onmouseover&#34;:<br/> case &#34;onmousemove&#34;:<br/> case &#34;onmouseout&#34;:<br/> case &#34;onkeypress&#34;:<br/> case &#34;onkeydown&#34;:<br/> case &#34;onkeyup&#34;:<br/> case &#34;onload&#34;:<br/> case &#34;onlosecapture&#34;:<br/> case &#34;onpropertychange&#34;:<br/> case &#34;onreadystatechange&#34;:<br/> case &#34;onrowsdel&#101;te&#34;:<br/> case &#34;onrowenter&#34;:<br/> case &#34;onrowexit&#34;:<br/> case &#34;onrowsins&#101;rted&#34;:<br/> case &#34;onstart&#34;:<br/> case &#34;onscroll&#34;:<br/> case &#34;onbeforeeditfocus&#34;:<br/> case &#34;onactivate&#34;:<br/> case &#34;onbeforedeactivate&#34;:<br/> case &#34;ondeactivate&#34;:<br/> case &#34;type&#34;:<br/> case &#34;codebase&#34;:<br/> ret.objAttrs[args[i]] = args[i+1];<br/> break;<br/> case &#34;width&#34;:<br/> case &#34;height&#34;:<br/> case &#34;align&#34;:<br/> case &#34;vspace&#34;: <br/> case &#34;hspace&#34;:<br/> case &#34;class&#34;:<br/> case &#34;title&#34;:<br/> case &#34;accesskey&#34;:<br/> case &#34;name&#34;:<br/> case &#34;id&#34;:<br/> case &#34;tabindex&#34;:<br/> ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];<br/> break;<br/> default:<br/> ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];<br/> }<br/> }<br/> ret.objAttrs[&#34;classid&#34;] = classid;<br/> if (mimeType) ret.embedAttrs[&#34;type&#34;] = mimeType;<br/> return ret;<br/>}<br/></div></div><br/><br/>然后再应用页面中head内加入<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;script src=&#34;Scripts/AC_RunActiveContent.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt;<br/></div></div><br/><br/>在要插入flash的地方加上以下<br/><br/><br/>下面这段JS修改的时候要注意，一共要修改四个地方：<br/>300 是宽度；<br/>200 是高度；<br/>images/killIEBorder 是路径和文件名，修改时注意，共有两处，还要特别注意，文件名后面不要加“.swf”，此后缀已经写在AC_RunActiveContent.js中<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;script type=&#34;text/javascript&#34;&gt;AC_FL_RunContent( &#39;codebase&#39;,&#39;<a href="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" target="_blank" rel="external">http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab</a>#version=7,0,19,0&#39;,&#39;width&#39;,&#39;300&#39;,&#39;height&#39;,&#39;200&#39;,&#39;src&#39;,&#39;images/killIEBorder&#39;,&#39;quality&#39;,&#39;high&#39;,&#39;pluginspage&#39;,&#39;<a href="http://www.macromedia.com/go/getflashplayer" target="_blank" rel="external">http://www.macromedia.com/go/getflashplayer</a>&#39;,&#39;wmode&#39;,&#39;transparent&#39;,&#39;movie&#39;,&#39;images/killIEBorder&#39; ); //end AC code&lt;/script&gt;<br/></div></div><br/><br/><br/>&lt;!--遇到浏览器禁用javascript时将调用下面这段&lt;noscript&gt;&lt;/noscript&gt;内的代码，就是Dreamweaver升级到8.0.2之前我们插入flash时的那段代码。&lt;param&gt; 标签针对IE起作用，&lt;embed&gt; 标签针对Firefox和Netscape起作用。--&gt;<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;noscript&gt;<br/>&lt;object classid=&#34;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&#34; codebase=&#34;<a href="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" target="_blank" rel="external">http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab</a>#version=7,0,19,0&#34; width=&#34;300&#34; height=&#34;200&#34;&gt;<br/> &lt;param name=&#34;movie&#34; value=&#34;images/killIEBorder.swf&#34;&gt;<br/> &lt;param name=&#34;quality&#34; value=&#34;high&#34;&gt;<br/> &lt;param name=&#34;wmode&#34; value=&#34;transparent&#34;&gt;<br/> &lt;embed src=&#34;images/killIEBorder.swf&#34; width=&#34;300&#34; height=&#34;200&#34; quality=&#34;high&#34; pluginspage=&#34;<a href="http://www.macromedia.com/go/getflashplayer" target="_blank" rel="external">http://www.macromedia.com/go/getflashplayer</a>&#34; type=&#34;application/x-shockwave-flash&#34; wmode=&#34;transparent&#34;&gt;&lt;/embed&gt;<br/>&lt;/object&gt;<br/>&lt;/noscript&gt;<br/></div></div><br/><br/>完成<br/>来个演示<br/><a target="_blank" href="http://www.stom.com.cn/example/sd/" rel="external">看看演示</a><br/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=71</link>
			<title><![CDATA[推荐一个DW的扩展-Div Tags Extension，非常好用]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Fri,12 Jan 2007 14:32:28 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=71</guid>
		<description><![CDATA[<p>这个插件的主要功能是能在Dreamweaver 里以树状形式显示网页文件的结构图，使你快速找到需要的地方.。Dreamweaver  自带的那个只能显示绝对定位的结构。</p>
<div class="ph"><img width="500" height="270" alt="Div Tags Extension" src="http://www.forest53.com/upimg/Image/tags_extension.png" /></div>
<p><a href="http://www.flashxpress.net/images/r_dream/divtags/FXPBalisesDiv_Help.htm" target="_blank">官方地址</a><span class="externallink"> <br /></span></p>
<p><span class="externallink"></span></p>
<p><span class="externallink"><a href="http://www.stom.com.cn/blog/attachments/month_0701/52007116163442.rar"><img border="0" style="margin: 0px 2px -4px 0px;" alt="" src="http://www.stom.com.cn/blog/../../images/download.gif" />点击下载此文件</a><br /></span></p>]]></description>
		</item>
		
			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=65</link>
			<title><![CDATA[关于IE和非IE浏览器的条件注释]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Thu,09 Nov 2006 04:25:39 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=65</guid>
		<description><![CDATA[以前的一个朋友过来我这里时，聊到了IE和非IE条件判定的语句的时候。突然我都发现没有很好的实例，于是今天晚上在别的地方找来了一个，记录一下<br/><br/>下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;!--[if IE]&gt;<br/>&lt;h1&gt;您正在使用IE浏览器&lt;/h1&gt;<br/>&lt;![endif]--&gt;<br/>&lt;!--[if IE 5]&gt;<br/>&lt;h1&gt;版本 5&lt;/h1&gt;<br/>&lt;![endif]--&gt;<br/>&lt;!--[if IE 5.0]&gt;<br/>&lt;h1&gt;版本 5.0&lt;/h1&gt;<br/>&lt;![endif]--&gt;<br/>&lt;!--[if IE 5.5]&gt;<br/>&lt;h1&gt;版本 5.5&lt;/h1&gt;<br/>&lt;![endif]--&gt;<br/>&lt;!--[if IE 6]&gt;<br/>&lt;h1&gt;版本 6&lt;/h1&gt;<br/>&lt;![endif]--&gt;<br/>&lt;!--[if IE 7]&gt;<br/>&lt;h1&gt;版本 7&lt;/h1&gt;<br/>&lt;![endif]--&gt;<br/></div></div><br/><br/>下面的代码是在非IE浏览器下运行的条件注释<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>&lt;!--[if !IE]&gt;&lt;!--&gt;<br/>&lt;h1&gt;您使用不是 Internet Explorer&lt;/h1&gt;<br/>&lt;!--&lt;![endif]--&gt;<br/>最终在非IE和特殊的IE浏览器下起作用<br/>(或者使用 lte lt 或者 gt gte来判断，如：<br/>&lt;!--[if lte IE 6]&gt;<br/>在IE 6下显示的信息<br/>&lt;![endif]--&gt;<br/>).<br/><br/>&lt;!--[if IE 6]&gt;&lt;!--&gt;<br/>&lt;h1&gt;您正在使用Internet Explorer version 6&lt;br /&gt;<br/>或者 一个非IE 浏览器&lt;/h1&gt;<br/>&lt;!--&lt;![endif]--&gt;<br/></div></div><br/><br/><br/>演示效果请看<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp58463">
<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->
<!--[if IE 5]>
<h1>版本 5</h1>
<![endif]-->
<!--[if IE 5.0]>
<h1>版本 5.0</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>版本 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>版本 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>版本 7</h1>
<![endif]-->



<!--[if !IE]><!-->
<h1>您使用不是 Internet Explorer</h1>
<!--<![endif]-->
最终在非IE和特殊的IE浏览器下起作用
(或者使用 lte lt 或者 gt gte来判断，如：
<!--[if lte IE 6]>
 在IE 6下显示的信息
<![endif]--> 
).

<!--[if IE 6]><!-->
<h1>您正在使用Internet Explorer version 6<br />
或者 一个非IE 浏览器</h1>
<!--<![endif]-->
</TEXTAREA><br/><INPUT onclick="runEx('temp58463')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp58463')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp58463')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div>]]></description>
		</item>
		
			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=63</link>
			<title><![CDATA[优化你的设计 5个必要的步骤]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Thu,02 Nov 2006 14:15:10 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=63</guid>
		<description><![CDATA[<p>原文链接：<a href="http://www.pronetadvertising.com/articles/5-ways-to-optimize-your-design.html">five ways to optimize your design</a><br /> 原文作者：<a href="http://www.pronetadvertising.com/about/">Neil Patel</a></p>
<p>每天有成千上万的网站被创造出来，这些新网站不是基于浏览者的需要而是基于网站所有者的需要。浏览者被忽视，是大多数网站不成功的最大原因。这里将给出5种方法来优化您的设计。</p>
<p><strong>1. 成为浏览者中的一员</strong> 把自己放在浏览者的地位。浏览者到您的网站来，他想要什么？您的网站的目标不仅仅需要满足您的需求，更重要的是需要满足浏览者的需求。要得出浏览者想要 的，有一种好的方法就是，对对您开发的产品和服务感兴趣的人做个调查，并调整您的设计以满足他们的需求和您自己的需求。这并不需要花多少钱，比如您可以问 问身边的朋友们。</p>
<p><strong>2. 简约是最终的目标</strong> 假如您看了比较成功的网站，比如 Google、Flickr 和 Blogger，他们都是简约的。为什么要加上臃肿的内容呢？尤其是当只有80%的浏览者使用了20%的上述的内容。当加入每一个特征时，请考虑浏览者的需要！把它当做您的目标吧。</p>
<p><strong>3. 内容为王</strong> 确保网站的内容以一种有效的方式排列。如果您仅仅将注意力集中于网站的视觉及其引起的感受，而忽视了内容，那么由浏览者转化为忠实的会员的比值，您认为会 很高吗？如果您想浏览者购买您的产品或服务，就需要一种简洁的、令人心悦诚服的内容和立体化的信息结构。同时最重要的是，内容要通俗易懂。</p>
<p><strong>4. 细节是大的区别</strong> 网站的每一个方面的细节都需要仔细考虑。有一些元素，比如颜色、形状甚至梯度改变后，在整体上就有可能给浏览者很大的冲击。使用蓝色、绿色、青绿色和银白 色，能给人一种平静的氛围。在您的设计中，使用圆角比使用尖角更能给人一种柔和的、个性化的感受。通过适当的混合颜色、图形、图片，您可以创造出强烈的氛 围和感受，这将对浏览者产生深刻的映像。</p>
<p><strong>5. 指导浏览者</strong> 您并不想要浏览者为了寻找一个产品而点遍您的网站。避免混乱，通过链接、导航菜单指导浏览者，是可行的。在页面上&rdquo;告诉&rdquo;浏览者，以便他们仅通过几次点击就可以买到产品和服务。通过降低浏览者点击的次数，可有效的降低浏览者的挫折感，提高从浏览者到会员的转化率。</p>
<p class="poweredbyperformancing">这些优化您的设计的方法可能看起来很简单，但是大多数情况下，他们被忽视了。试着用用，他们所起的作用，通过优化您的设计就能节约很多广告费用，这些将震撼您！</p>
<p>penguin 翻译 - 欢迎访问他的BLOG(<a href="http://qianjin.512j.com/">qianjin@Health</a>) </p>]]></description>
		</item>
		
			<item>
			<link>http://www.stom.com.cn/blog/article.asp?id=61</link>
			<title><![CDATA[因为做一个flash宣传片的方案,就浏览到了这个,推荐给大家]]></title>
			<author>sinsun#yeah.net(ellven)</author>
			<category><![CDATA[设计]]></category>
			<pubDate>Fri,20 Oct 2006 05:10:55 +0800</pubDate>
			<guid>http://www.stom.com.cn/blog/default.asp?id=61</guid>
		<description><![CDATA[<div class="UBBPanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/flash.gif" alt="" style="margin:0px 2px -3px 0px" border="0"/>Flash动画</div><div class="UBBContent"><a id="temp36436_href" href="http://www.stom.com.cn/blog/javascript:MediaShow('swf','temp36436','attachments/month_0610/020061020582.swf','400','300')"><img name="temp36436_img" src="http://www.stom.com.cn/blog/images/mm_snd.gif" style="margin:0px 3px -2px 0px" border="0" alt=""/><span id="temp36436_text">在线播放</span></a><div id="temp36436"></div></div></div><br/><br/>据说这个广告,是完全手工拍摄没有使用任何计算机辅助的... 对这样工作精神的人,致以崇高的敬意...<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.stom.com.cn/blog/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>HONDA - 广告拍摄内幕<br/>本广告一共拍摄 605 次，没有使用任何计算机绘图辅助，花费四天四夜在巴黎一个工作室拍摄而成。<br/> <br/>东京总部的大头目们第一次看到 Cog 这段广告的反应是：很好啊~~很聪明，现代的计算机技术真是不错。当他们知道这全是真的的时候，他们吓呆了。<br/> <br/>世界上共有六台量产前的 New Accord，这部广告用了两台。<br/> <br/>其中一台拆成了零件─广告用的完全都是真的车里的零件，为什么？<br/><br/>因为在经过无数次的失败以后他们卯起来要拍出最真实的影片。<br/> <br/>工作人员已经拍得快发疯了，最后有些人因为连续工作几天必须被“请“到旁边休息。<br/> <br/>其它人也打起赌来猜那一段会出错。（Honda 的自动感应水的雨刷赢最多次）<br/>终于成功的第 606 次拍摄，结束时现在鸦雀无声，然后爆出了热烈的欢呼和掌声，以及四溅的香槟。<br/> <br/>这个游戏值多少钱？八十万台币如果你算那辆车，或三亿台币如果你算整个行销计划。<br/> <br/>其中一段是单一个吊着的雨刷在空中旋转移动，拍成功的那次，是那一段唯一成功的一次...<br/>轮胎里放的是镙丝和镙帽，平衡之精细，连摄影组员走动时都得小心翼翼。<br/> <br/>常常一个大一点的动作或是不小心轻推一下什么，就得重复好几小时的工作。<br/> <br/>拍到三四百，甚至第五百多次时，制作人开始称呼这些零件为「our friends, the parts」（零件，我们的朋友们）。<br/> <br/>更有一些组员几天没睡后被其它人要求离较精细的部份远一点...<br/> <br/>当问及他花在这个广告的时间有多长时，广告导演尖声一笑，回答：「五年？还是八年了？」<br/> <br/>广告用的这两台 Accord 是全世界仅有的六台中的两台，全是 Honda 工程师手工打造的。<br/><br/>（可见当初拆掉一台时那些工程师有多心疼）<br/></div></div>]]></description>
		</item>
		
</channel>
</rss>
