Browsed by
分类:Web开发

Web中的省略号

Web中的省略号

在Web开发中,对于一种情况很常见。那就是,文本太长,而放置文本的容器不够长,而我们又不想让文本换行,所以,我们想使用省略号来解决这个问题。但是,在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事,在IE,Safari,Chrome,Opera中都可以。但在Firefox中却不行,但我们可以使用jQuery来解决Firefox不兼容的问题。下面是相关的代码示例。

使用CSS设置省略号

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (4 人打了分,平均分: 4.25 )
Loading...
哥是玩程序的

哥是玩程序的

下面一组有趣的Web示例,这些示例使用Web的一些很“土”控件做出一些很有趣的玩意儿。原来,编程是可以用来玩的,看看这些玩程序的人搞出的这些有意思的玩意,简直是玩得太有意思了。不过,请注意,这些东西只能使用Chrome打开,不然,你看不到相关的效果。

用滚动条做的时间

http://toki-woki.net/p/scroll-clock/,下面的抓图只显示了时和分,后面还有不停跳动的秒。可以在IE,Fireforx和Chrome中查看。

用滚动条做的时间

用CheckBox做成一个水滴效果

http://the389.com/works/drops/,这个示例的整个页面由Checkbox构成,你用鼠标点一下其中一个CheckBox,你会看到一个巨大的水滴滴了下去。Chrome中效果更好。

用checkbox做的雨滴效果

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (12 人打了分,平均分: 4.25 )
Loading...
Javascript 曲线表作图库

Javascript 曲线表作图库

dygraphs 是一个开源的Javascript库,它可以产生一个可交互式的,可缩放的的曲线表。其可以用来显示大密度的数据集(比如股票,气温,等等),并且可以让用户来浏览和解释这个曲线图。在它的主页(http://www.danvk.org/dygraphs/),你可以看到一些示例和用法。

dygraphs Javascript 曲线图库

要使用这个库,很简单,只需要包括dygraph-combined.js文件,其文件尺寸很经济,也就45K。

<script type="text/javascript"
  src="dygraph-combined.js"></script>

下面两个示例,你可以把数据写在javascript中,也可以设置一个csv文件。

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (2 人打了分,平均分: 4.50 )
Loading...
9个最常见IE的Bug及其fix

9个最常见IE的Bug及其fix

9个最常见IE的Bug及其fix

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。

1. 居中布局

创建一个CSS定义把一个元素放到中间的位置,可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ,然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

下面是我们所期望的输出:

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (14 人打了分,平均分: 5.00 )
Loading...
13个不错的Javascript和CSS的菜单

13个不错的Javascript和CSS的菜单

以前发布过两篇文章——“30种时尚的CSS网站导航条”和“20个优秀的Javascript导航技术”,今天向大家介绍一下,13个不错的Javascript和CSS的菜单。

1) 性感的滑动型菜单 

Sexy-menu - 13不错的Javascript CSS菜单

演示: Mootols Version
演示:Script.aculo.usVersion

 

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (9 人打了分,平均分: 5.00 )
Loading...
Ajax开发利器UIzard

Ajax开发利器UIzard

正如UIzard这个名字所暗示的,这是一个User Interface 的Wizard,从字面上理解,这是一个做界面的向导。这有什么奇怪的,Dreamwave之流已经是相当的成熟了,还能好得过它?是的,这个开源的项目,也许并没有那些商业软件那么成熟,不过,我想告诉你的是,这个开源软件绝对是值得我们重点关注的一个软件。

你可以理解为这是一个Web开发的IDE,不过其集成了Ajax方面的东西。这并不仅仅简单的是那种“所见即所得”的编辑器。而且,它也不信仅可以让那些非程序员非常简单地创建一个从前端到后端的Web应用,而且,他还可以让你连接数据库,创建非常复杂的布局和时间线,甚至于一些套件(白板,在线的类Word,Excel,PPT等功能),所有这些,你只需要简单的点几下按钮就可以了。真是相当的强大。(下面是个抓图)

UIzard

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (2 人打了分,平均分: 5.00 )
Loading...
Google Maps API用法教程

Google Maps API用法教程

在过去的一年中,在线地图的发展是相当巨大,我们可以看到在线地图的极有价值的信息和其能力。这其中,最有名气的自然是Google Maps。. Google Maps由一个相当强大的开发引擎并也有一个很大的社区提示支持。

Google 允许各种web masters 通过Google Maps API来增加或自定义他们站点特定的地图,你可能从这里取得Google API key 。一个地图 API key只对一个“目录”或域有效。key绑定了你的域名,你要在网站上放地图,需要有对应的key,否则拒绝读取地图数据,在本地测试可以不用key。当然,你可以申请多个API key。

创建一个简单的地图

在你的站点上引入Google Maps 是一件很简单的事情,你只需要加入:

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (14 人打了分,平均分: 4.29 )
Loading...
图片搜索引擎优化Checklist

图片搜索引擎优化Checklist

今天,专业的搜索引擎优化SEO(Search Engine Optimizers)会让你的网页或文章能更多得被搜索并访问到。而图片的搜索优化则是这项技术中非常特别的一部分,它可以让你的图片更容易地被人搜索到,比如:艺术图片,服务设计,或是家具等等。相信大家都知道图片远比文字更有吸引力,这是因为我们都知道——“一图胜千言”。

Image SEO

在搜索引擎的世界里,有一组有限的因素决定着图片的位置。下面是一个Checklist可以让你把你的图片搜索优化做得更好。

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (2 人打了分,平均分: 4.50 )
Loading...
CentOS上php的问题及Selinux安全设置

CentOS上php的问题及Selinux安全设置

最近有位站长在用我们WebIM客户端的时候,无法登录我们的WebIM服务器,十分惊讶。 在我们的用户里尚属首例,其实更惊讶的是我的CentOS也遇到了同样的问题。然后分析了这位站长的HttpResponse , Shamee :( 一样的OS.

搜了一下,发现的解决方法都是在代码上。 我想可能关键词有错误,因为我坚信我的问题肯定不在代码上,应该是来自OS本身的限制。于是重新debug了一下代码,报错 permission (13) connection。然后直接在洋人的邮件列表里搜了一下。

问题确定了 是SeLinux(http://zh.wikipedia.org/wiki/SELinux)安全策略的限制。

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (5 人打了分,平均分: 4.80 )
Loading...
十个Web开发文章和教程

十个Web开发文章和教程

下面是十个在2009年8月份里出现的十个非常不错的Web开发方面的文章和教程。推荐给大家,当然,都是英文啦。如果你愿意,欢迎翻译后提交给酷壳

1)一个简单的Lava 灯式的菜单(使用jQuery完成)

2)使用jQuery自动生成文章内容的目录。就像是使用Word一样,设置一下标题,然后可以自动生成文章的目录。

3)使用jQuery为图片创建图片标题和描述。这是一个超Cool的效果,当你的鼠标移到图片上的时候,图片的上下会出现遮覆,上面是标题,下面是描述,相当不错的用户体验,当鼠标移开后,遮覆消失。

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (6 人打了分,平均分: 5.00 )
Loading...