文字溢出的处理

经常会在项目中碰到文字溢出的情况,解决起来也比较麻烦,而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止,我还没找到用CSS就能完美解决文字溢出的办法。前几天就再次碰到这个问题,之后一查,发现和迅雷的一个页面重构的面试题惊奇的相似,仔细一想,也没啥巧合不巧合的,只能说这种情况太常见了。

要求是这样的:一个新闻列表,新闻标题后紧跟着日期,新闻标题的宽度超过一定的宽度就要自动截断,但是日期必须显示完整。

花了点时间研究了下,最终的效果对于浏览器的兼容不是很理想,但我觉得也是很不错了。

阅读全文 »

YUI Compressor–另一款压缩JS/CSS的小工具

<p>
前不久给同志们介绍了压缩JavaScirpt和CSS文件的<a href="http://stylechen.com/minify.html" title="压缩JS/CSS的利器–minify">minify</a>,这个是用PHP5开发的基于服务端的压缩,并且需要Apache+PHP环境的支持。虽然压缩效果还是比较理想,但是有环境限制,今天我再给同志们介绍一款可以在本机压缩JavaScirpt和CSS文件的程序:YUI Compressor。</p>
<p>YUI Compressor是Yahoo!开发的一个专门用于压缩JavaScript和CSS文件的小工具,操作系统中需要jdk环境的支持。所有要使用这个小工具,得先安装jdk,然后配置JAVA_HOME的环境变量。</p>
<p>jdk的下载地址:<a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html" title="jdk的下载地址" target="_blank">http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html</a></p>

阅读全文 »

基于jQuery的鼠标悬停时放大图片的效果制作

<p>这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动。这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示:</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/09/jquery-image-hover-zoom-demo.jpg" alt="基于jQuery的鼠标悬停时放大图片的效果演示" /></div>

阅读全文 »

使用JavaScript实现随机切换网页背景图

<p>每刷新一次页面,就切换一个背景图,并且切换的顺序是随机的,第一次看到这个效果的时候虽然觉得这个效果有点意思,但并没有深究。直到前不久看到<a href="http://bbs.yuyadong.com/thread.php?fid=87" title="亚当学院的JavaScript视频教程" target="_blank">当哥</a>的JavaScript视频教程时,才突然有了灵感,原来实现这个效果是这么的简单。</p>
<p>先看看演示效果:</p>
<div class="demo"><a href="http://stylechen.com/wp-content/uploads/demo/random-bodyBg/index.html" target="_blank">查看演示</a></div>
<p>你可以准备很多张背景图,并且背景图的切换都是随机的,不过由于每次刷新一次页面都会加载一个背景图片,这在一定程度上增大了服务器的负载。不过这些都不是本文讨论的范畴,看看下面的JavaScript代码:</p>

阅读全文 »

解决HTML5中图片元素多出来的3.5px

现在使用HTML5的简短的Doctype声明已经成了一种流行趋势:<!DOCTYPE html>,这个HTML5的声明支持Firefox、Chrome等现代浏览器和IE6/7/8等浏览器,这个已经在本博的另一篇文章22个HTML5的初级技巧中有讲解过。

本博也在前不久也把原来的XHTML的Doctype声明换成了HTML5的Doctype声明,换过之后才发觉一个问题,所有网页上显示的图片(背景图片除外)都会在图片的下方多出3.5px,如下图所示:

HTML5中图片元素多出来的3.5px
阅读全文 »
第 16 页,共 18 页« 最新...10...1415161718