现在如果你问别人“最近两年在Web开发领域最火的技术是什么”，Ajax这个词应该能占据一席之地。确实，自从05年底被提出，Ajax技术就以难以想象的速度迅速红遍大江南北，受到无数Web开发人员的青睐和追捧。而各种平台下的Ajax框架更是如雨后春笋般向外冒，以至于连微软这样软件业的巨头也迫不及待推出自己的框架——ASP.NET Ajax，并将其作为标准组件集成于VS2008中，想藉此讨好那些已经一听见Ajax这个词就热血沸腾的Web开发人员们。
当然，有赞美就会有责骂，Ajax也不例外。在它蓬勃发展的过程中，也遭到了不少非议，很多人提出使用Ajax技术会导致系统性能下降甚至用户体验的破坏。并列出很多理由，藉此呼吁广大Web开发人员回归传统Web开发。
我算是比较早接触Ajax技术的，当时我还在进行PHP开发，听到Ajax技术这个新名词后就想弄明白是什么东西。当时资料比较少，没有现在这么多关于Ajax的书籍和框架，我手头只有一本《Ajax基础教程》，还好，Ajax技术本身不算复杂，所以我还是很快弄懂了它的基本原理，并且马上应用到一个当时正在做的PHP项目中，用来做无刷新登录和数据验证。像很多备受同步刷新限制之苦的Web开发人员一样，当时我对这种神奇的异步交 ......
作者：IIduce 来源：css9 时间：2009-12-21 阅读：601 次 原文链接 [收藏]
最近产品中需要加入“一个列表显示样式快速切换”的功能，正好在这篇文章中看到了它的实现方式，感觉很不错。
这篇文章讲述的是如何通过CSS和JQuery来实现在页面上快速切换布局（样式）的功能。这样做的好处是不言而喻的，现在的网页设计都是希望增强与用户的互动性。允许改变页面布局或信息展示方式无疑可以提高用户体验，选择他们喜欢的样式去获取信息。
首先我们看一下最终效果
第一步：创建一个漂亮别致的边框
我们首先通过一个无序列表标签(ul)来设计一个垂直的列表布局，用它来作为我们信息显示的行和列。
HTML
<ul class="display">
<li></li>
<li></li>
</ul>
CSS
提示：通过使用不同灰色的边框实现了一个漂亮别致的边框效果
ul.display {
float: left;
width: 756px;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #333;
border-right: 1px solid #333;
background: #222;
}
......
<style type="text/css">
.worksbox{width:114px;height:114px;position:relative;}
.worksbox a{border:1px solid #F0F0E8;background-color:#FFF;padding:6px;display:block;}
.worksbox a:hover{border:1px solid #000;background-color:#333;text-decoration: none;}
.worksbox a span{display:none; text-align:center; font-size:12px;}
.worksbox a:hover span{color:#FFF;display:block;background-color:#333;width:114px;position:absolute;top:94px;left:0px;line-height:20px;}
.worksbox a img{width:100px;height:100px;}
</style>
<div class="worksbox" ><a href="http://www.gzse7en.com" ><span>本期模特【朱茵】</span><img src="http://tu.gzse7en.com/upload_files/admin/20100507/1.gif" border="0" /></a></div> ......
最新文章 :