CSS Sprites的优缺点

2009/10/12 13:29  |  分类:Css

说起CSS Sprites我想大家肯定不陌生,因为它并不是一门新技术,目前它已经在网页开发中发展得较为成熟,但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。随着Web设计向着精致、巧妙的方向发展,设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。
  说白了,CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
  当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
CSS Sprites优点
  CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。
  1.利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
  2.个人认为CSS Sprites能减少图片的字节,我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
全文阅读 »

轻松创建VIMEO头部网站样式

2009/09/27 16:10  |  分类:Css

我真的很喜欢顶端导航Vimeo.com风格。 我第一次看到它就想制作它。 而这正是我要在这教程。最喜欢的还属是下拉菜单,当你鼠标悬停在搜索框上, 它为你提供不同的搜索选项,您可以选择并缩小搜索范围,很方便,也很新颖。

点击此处下载该文件吧!

image

本教程是简单的CSS下拉菜单中的无序列表的基础,视觉的结构描述如下图:

image

你可以看到,我们UL有四个项目。 第一个是LOGO。 然后是登录链接,与子菜单和子菜单的搜索项目的帮助链接。 每个子菜单时显示正在悬停的相应链接。

全文阅读 »

AI制作一个立体饼图

2009/09/24 12:51  |  分类:Photoshop

开篇说点题外话,最近一直很忙,忙到没有心情,夜夜做梦。其实梦境有好有坏。

群友问我PS立体饼图怎么画,其实这个用AI要比PS快很多倍。

具体做法是:

1.新建一个画布,安自己尺寸。(要大画大,要小画小。)

2.工具栏中下部

1

点选饼图工具即可。

全文阅读 »

HTML4.0与XHTML1.0的区别

2009/09/22 12:17  |  分类:Xhtml

XHTML是XML的一个应用,一些在基于SGML的HTML 4中完全合法的习惯在XHTML中必须改变。编排良好性Well-formedness是[XML]引入的一个新概念。从本质上说,这意味着元素必须有结束标签,或者必须以特殊方式书写(在下面说明)。

  元素必须嵌套,尽管SGML规定层叠非法,但现有的浏览器普遍允许层叠。

  正确:嵌套元素。
  <p>here is an emphasized <em>paragraph</em>.</p>

  不正确:层叠元素。
  <p>here is an emphasized <em>paragraph.</p></em>

  元素和属性名必须小写
  对所有HTML元素和属性名,XHTML 文档必须使用小写。 因为XML是大小写敏感的,所以这个差别是必须的。如 <li> 和 <LI> 是不同的标签。

  对非空元素,必须使用结束标签
  在基于 SGML的 HTML 4 中,一些隐含结束意义的元素允许忽略结束标签。而在基于XML的XHTML中,这种忽略不被允许。除了在DTD中被声明为空的元素,所有元素必须有结束标签。

  正确:结束了的元素。
  <p>here is a paragraph.</p><p>here is another paragraph.</p>
全文阅读 »

IE8穿马甲-多账户登录

2009/09/16 15:37  |  分类:Life

相信不少人遇到过这样的问题,登录某个网站后,比如邮箱,在登录同一网站的另一个邮箱,先前的邮箱就会要求重新登录才可以正常使用,当然在开心网,QQ空间都是一样的。

以上问题,实际是因为浏览器的饼干,(cookie)捣的鬼,使用IE8可以解决此问题。启动IE8,先登录第一个账户,然后店主ALT激活菜单栏,选择“文件-新建会话”,打开第一个心的IE窗口,此时就可以使用第二个账户登录了,如果有第三个账户登录,可以重复上述方法。

原因:之所以可以使用多个账户登录,是因为新加回话生成的IE窗口,不会与原来的IE窗口公用COOKIE,所以对之前登录的账户就不会产生干扰了。

父容器内子容器浮动的高度自适应

2009/09/10 11:29  |  分类:Css

这是一个很简单的BUG,高手请绕行。

当一个子块浮动的时候,外面的父块高度就不以子块高度为标准了,也就是说,当子块浮动后,它不能够撑开父块,这个问题很容易解决。

方法是在父元素加上
overflow:auto;
zoom:1;  
解释一下:overflow:auto;是让高度自适应,zoom:1;是为了兼容IE6(注:在本人机子上IE6可以不加这句话),也可以用height:1%;的方式来解决。

最近确实比较忙,也没太多时间来认真写一篇文章了。哎,努力吧,为了生存。

【推荐】英文字体下载

2009/09/08 15:23  |  分类:Photoshop

相信中文字体,大家都很好找到,著名的字体下载有:字体下载大宝库,字体中国等等。

无意中在《电脑爱好者》上看到了一个比较牛的英文字体下载站点,迫不及待的想大家分享一下,地址是 :http://www.dafont.com/,有兴趣的同学可以去这里看看。

雅虎LOGO的中文发音

2009/09/06 14:49  |  分类:Javascript

今天懒人上看了一个雅虎中文LOGO发音的效果,觉得还蛮有意思,实现起来也不难,所以发上来和大家分享一下。index

点击预览

关于PHOTOSHOP不可不用的20个快捷键

2009/09/04 18:27  |  分类:Photoshop

网上游很多关于PHTOSHOP的快捷键的文章,其实我个人倒是觉得没必要把上千个快捷键都记住(当然,如果记忆力好的话,多记多好),像我这样记忆力差劲的,常用的记住足够啦。
快捷键真是我们学习工作,居家旅游的好帮手啊!

1. 缩放到100%(实际像素)
在左侧工具栏双击或右击”缩放工具”就可以缩放画布到100%.
Ctrl+1 或 Ctrl+Alt+0

2. 展开或收起所有图层
按住Ctrl+点击图层组左侧小箭头就可以展开/收起所有图层

3. 图层编组
合并选定图层然后ctrl+g将其合并编组到一个图层组

4. 切换字体
字体面板,用方向键上下可以快速的切换字体。

5. 调整字体大小
按住Ctrl+Shift+鼠标移到”字体大小”框里,然后向左右方向移动鼠标,字体大小将以10单位递增.
而单独按”向上”或”向下”方向键也可以以1单位调整字体大小.

全文阅读 »

简易可行的iframe 自适应高度

2009/09/04 16:23  |  分类:Javascript

关于iframe 自适应高度 的方法有很多种,但我还是觉得下面方法简单

<iframe width=”100%” src=”http://www.hezc.com/” frameBorder=”0″ scrolling=”no” allowTransparency=”true” name=”autoHeight” onload=”this.height=autoHeight.document.body.scrollHeight”></iframe>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
</head>
<body>
<h1>下面是Iframe 取的页面内容 </h1>
<iframe width=”100%” src=”http://www.hezc.com/” frameBorder=”0″ scrolling=”no” allowTransparency=”true” name=”autoHeight” onload=”this.height=autoHeight.document.body.scrollHeight”></iframe>
</body>
</html>

文章出处:http://www.hezc.com/article.asp?id=88

Pages: Prev 1 2 3 4 5 6 7 8 ...31 32 33 Next