RichBox-富盒子工作室
专业的RIA解决方案实现团队，承接Flash/Flex/ActionScript3/AIR/HTML5/CSS项目

Categories

页面

友情链接

我的资源

最近评论

RSS RIAMeeting Feed

Feeds

我的围脖

五
04.
又一款浏览器兼容性测试工具-IETester
No Comments
Category: Web标准化

支持Vista系统，支持IE5-8Beta1的版本。

IETester最新版本：v0.2.1 下载 | 中文包


Tags:
二
15.
如何给图片加阴影
1 Comment
Category: Web标准化

如何在CSS中为尺寸不一的图片加上阴影？

看这里你就明白了：

img {
background:url(images/shadow.gif) no-repeat scroll right bottom;
border-color:#EEEEEE ;
border-style:solid none none solid;
border-width:1px medium medium 1px;
padding:4px 10px 10px 4px;
}

关键在于shadow.gif这张图片上，其中的奥秘就不用我点明了吧，呵呵

BTW:推荐一个老外写的很不错的下拉菜单（有很多，都是基于CSS+JavaScript实现的），点击这里下载。


一
30.
奇怪的HTML标签
No Comments
Category: Web标准化

<html>是网页的根标签，可以通过CSS进行控制，但在不同的浏览器下，其表现还是有所不一致的。

比如有时候我们会给<html>定义宽度和高度，类似于这样：

html {
width:100%;
height:100%;
overflow-x:hidden;
}
body {
padding:20px;
height:100%;
overflow:auto;
}

然后会发现某些标签，比如Table，在IE7下的表现会匪夷所思，所以，对<html>的CSS定义还是要慎用。

BTW：<html>居然接受ID属性，虽然在DW编辑模式下没有代码提示（由此可知这确实非标准定义），但一旦你定义了ID属性，FF2.0，IE7，IE6都是接受的，其它浏览器未测试。


一
29.
被遗忘的Table属性
No Comments
Category: Web标准化

这是几个很少被用到的Table属性，其实用好了，也一样可以发挥大功效。

1.summary

2.caption

3.colgroup

4.col

5.thead

示例：

<table width=”100%” border=”0″ cellspacing=”0″ summary=”我是表格”>
<caption>我是表格</caption>
<colgroup>
<col class=”th1″/>
<col class=”th2″/>
</colgroup>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tfoot>
</table>


一
29.
AIR开发的CSS小工具：Em calculator
No Comments
Category: Web标准化

Em calculator是一个帮助你转换度量单位以获得标准显示效果的CSS小工具。
下载地址：
http://www.jameswhittaker.com/uploads/blogfiles/emcalculator.zip
BTW：它是基于AIR技术制作的，你需要安装一个AIR的FrameWork，可以到这个获取：
http://labs.adobe.com/downloads/air.html


一
25.
Microsoft to Force IE7 Update on February 12th
No Comments
Category: Web标准化

来自slashdot的原文：

“InfoWorld is reporting that on February 12th, Microsoft will roll out Internet Explorer 7 through Windows Server Update Services to all systems – regardless of whether or not the update had been requested previously. The piece also mentions ways to prevent the update from occurring, for sysadmins who do not want to use IE7 on their systems. Microsoft claims that the decision was made due to ‘security concerns’.”

WEB前端开发工程师该弹冠相庆了，Cheers~


一
21.
JavaScript实现QQ菜单效果
No Comments
Category: Web标准化

HTML部分：

<div id=”globalNav”>
<h3>快捷导航</h3>
<ul class=”selected”>
<li><a href=”start.html”>a</a></li>
<li><a href=”start.html”>b</a></li>
</ul>
<h3>访问统计</h3>
<ul>
<li><a href=”start.html”>c</a></li>
<li><a href=”start.html”>c</a></li>
</ul>
<h3>文章分析</h3>
<ul>
<li><a href=”start.html”>e</a></li>
<li><a href=”start.html”>f</a></li>
</ul>
</div>

Javascript部分：

function initNav() {
var h3s=$(“globalNav”).getElementsByTagName(“h3″);
var uls=$(“globalNav”).getElementsByTagName(“ul”);
for(var i=0;i<h3s.length;i++) {
h3s[i].target=uls[i];
h3s[i].onclick=function() {
for(var j=0;j<uls.length;j++) {
if(uls[j]==this.target) {
uls[j].className=”selected”;
} else {
uls[j].className=”";
}
}
initNavHeight();
}
}
initNavHeight();
}
function initNavHeight() {
var h3s=$(“globalNav”).getElementsByTagName(“h3″);
var h=$(“globalNav”).offsetHeight;
var si=getElementsByClassName($(“globalNav”),”selected”)[0];
si.style.height=h-(h3s.length*27)-20+”px”;
}


一
10.
也谈CSS框架
2 Comments
Category: Web标准化

有感于来自淘宝UED博客的一篇文章：

段正淳的css笔记(6)-浅谈css框架开发

当一种技术的应用到了一个比较成熟的层面，就会自然衍生出框架的概念。

何谓框架？即在技术底层的基础上，抽象一些概念和方法组成一个架构，引用框架的应用都将基于这个架构来做，这样最大限度的降低开发和维护成本，减少开发时间，并最大限度的实现代码可重用性。

这个概念其实并不陌生，在我之前的一些文章中，其实已经隐含了一些框架的想法，但之所以没有提出来，是感觉在XHTML和CSS这个层面，框架不是很容易抽象，各个站点的结构差异太大，没有固定的框架可以适应所有站点的应用，生搬硬套只会让结构变得庞大而且累赘。众所周知，在WEB这个层面，尤其是前端，用户的访问速度是第一的，也就意味着结构的优化是第一的，而框架显然不能满足这一点。

但是，这样并不是说在WEB前端（主要指CSS方面）不能使用框架，在特定的应用环境下，比如一个固定的网站体系之下，框架的优势将会发挥的很明显，包括：更好的结构标准化，更好的团队沟通合作，更好的浏览器兼容性等等，所以，应该在每个WEB前端的Team内部，形成一套框架的机制，并约定内部成员共同遵守，这也将使框架的价值发挥到极致。


一
02.
JavaScript实现文字的自动截取
No Comments
Category: Web标准化

HTML部分：

<ul id=”ul1″ maxwidth=”10″>
<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>
<script>rewritetUL(“ul1″);</script>

JS部分：

<script>
function rewritetUL(obj) {
var l=Number($(obj).getAttribute(“maxwidth”));
var as=$(obj).getElementsByTagName(“a”);
for(var i=0;i<as.length;i++) {
if(as[i].innerHTML.length>l) {
as[i].setAttribute(“title”,as[i].innerHTML);
var s=as[i].innerHTML.toString().substr(0, l);
as[i].innerHTML=s;
}
}
}
function $(obj) {
return document.getElementById(obj);
}
</script>


十二
27.
高级导航风格的CSS实现方式
No Comments
Category: Web标准化

利用XHTML和CSS，我们可以设计出千奇百怪各式各样的导航样式，比如下面的这一种，也是在设计方案中很常见的。
效果图：

制作的难点在于导航的每个项之间不是简单的排列关系，相互之间有边角的重合，对于这个特性，用CSS的Margin负边值加以解决。

#nav li a {
display:block;
background:url(bg.gif) no-repeat left -45px;
width:152px;
height:29px;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color:#FFF;
text-align:center;
text-decoration:none;
margin:0 0 0 -36px;
padding:8px 20px 0 0;
float:right;
}
#nav li a:hover,#nav li.select a {
background:url(bg.gif) no-repeat left top;
}

完整的示例及代码点击这里下载


下一页 »
Powered by Wordpress
Theme © 2005 - 2009 FrederikM.de
BlueMod is a modification of the blueblog_DE Theme by Oliver Wunder