前端经验

中国讯网网站建设项目

禄小伟
1295
2010年12月11日

讯网首页

鼠标滑过效果


经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小

只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验

为了给用户一个好的体验,404页面成为网站设计不可或缺的一个重要的部分,如果能设计出漂亮的404页面呢?下面45个叹为观止的国外创意404错误页面设计鉴赏应该能给你带来灵感!

46个叹为观止的国外创意404错误页面设计

1. Zombie By Invader

46个叹为观止的国外创意404错误页面设计

2. abduzeedo

46个叹为观止的国外创意404错误页面设计

3. Acro media

46个叹为观止的国外创意404错误页面设计

4. Agens

46个叹为观止的国外创意404错误页面设计

5. Amorphia

46个叹为观止的国外创意404错误页面设计

6. apadeloup

46个叹为观止的国外创意404错误页面设计

7. Ateaseweb

46个叹为观止的国外创意404错误页面设计

8. Batman

46个叹为观止的国外创意404错误页面设计

9. Blizzard

46个叹为观止的国外创意404错误页面设计

10. Blue Daniel

46个叹为观止的国外创意404错误页面设计

11. Chris Jennings

46个叹为观止的国外创意404错误页面设计

12. Club Penguin

46个叹为观止的国外创意404错误页面设计

13. D20-Srd

46个叹为观止的国外创意404错误页面设计

14. Dina sour Death Point

46个叹为观止的国外创意404错误页面设计

15. Duoh

46个叹为观止的国外创意404错误页面设计

16. Eternal-moon

46个叹为观止的国外创意404错误页面设计

17. Ferdaze

46个叹为观止的国外创意404错误页面设计

18. Fryewiles

46个叹为观止的国外创意404错误页面设计

19. Godzilla

46个叹为观止的国外创意404错误页面设计

20. Giraffe

46个叹为观止的国外创意404错误页面设计

21. Gog

46个叹为观止的国外创意404错误页面设计

22. Graffin Technology

46个叹为观止的国外创意404错误页面设计

23. henrikhedegaard

46个叹为观止的国外创意404错误页面设计

24. Home Star Runner

46个叹为观止的国外创意404错误页面设计

25. Huwshimi

46个叹为观止的国外创意404错误页面设计

26. Irn-Bru

46个叹为观止的国外创意404错误页面设计

27. Jhuskisson

46个叹为观止的国外创意404错误页面设计

28. Juke Media

46个叹为观止的国外创意404错误页面设计

29. Leap anywhwhere

46个叹为观止的国外创意404错误页面设计

30. Message.sk

46个叹为观止的国外创意404错误页面设计

31. Openendedadventure

46个叹为观止的国外创意404错误页面设计

32. Oroza

46个叹为观止的国外创意404错误页面设计

33. Pattern Tap

46个叹为观止的国外创意404错误页面设计

34. Product Planner

46个叹为观止的国外创意404错误页面设计

35. Rocket Theme

46个叹为观止的国外创意404错误页面设计

36. Shelf Worthy

46个叹为观止的国外创意404错误页面设计

37. Spring Load

46个叹为观止的国外创意404错误页面设计

38. Surfing-on-Static

46个叹为观止的国外创意404错误页面设计

39. Suspended Animations

46个叹为观止的国外创意404错误页面设计

40. Tk Designs

46个叹为观止的国外创意404错误页面设计

41. Twinpx

46个叹为观止的国外创意404错误页面设计

42. Unit Interactive

46个叹为观止的国外创意404错误页面设计

43. War Hammer

46个叹为观止的国外创意404错误页面设计

44. wulffmorgenthaler

46个叹为观止的国外创意404错误页面设计

45. X Html Kitchen

46个叹为观止的国外创意404错误页面设计

[Nginx科普 Nginx如何配置404错误页面]

禄's Blog 发布的第三款Z-Blog 2.0 主题,这款主题主打红色,黑色清爽两栏主题,适合个人建站及图文站,美食站等!

演示地址:<#ZC_BLOG_HOST#>themes/

image

Z-Blog 2.0 主题 A_bingo 下载地址

百度网盘下载  |  新浪微盘下载  |  应用中心下载  |  来自禄's Blog

[收藏]设计相关站点推荐

禄小伟
1970
1970年01月01日

教程及资讯:

http://10steps.sg

http://www.instantshift.com/

http://webdesignledger.com/国外优秀原创设计资讯网站

http://deviantart.com/    国外著名的设计师行业网站。

http://designinstruct.com/  教程类的较多

http://dribbble.com/ 设计师行业网站

http://www.smashingmagazine.com/ 国外优秀原创设计资讯网站

欧美酷站:

http://www.newwebpick.com/     设计思路拓展

http://www.thefwa.com/         国际流行前沿站点

http://www.irie.be/            国外的酷站收录集

http://www.webdesignfile.com   国外的酷站收录集

http://www.coolhomepages.com/

http://www.webdesign.org/

http://www.pagecrush.com/

CSS酷站

http://www.cssmania.com/

http://www.cssbag.com/

http://www.welovecss.net/

http://www.cssgarden.co.uk/

http://csslovely.com/

http://www.cssleak.com/

这里用到的技巧也很简单,就是在图片之前创建一个<span>,并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活,demo中介绍了20多种样式,大家可以参看。


demo预览地址:http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html?TB_iframe=true&height=550&width=840

demo下载地址:http://www.webdesignerwall.com/file/decorative-gallery-demo.zip

这种css技巧带来的好处

  • 节约时间 — 你不需要在photoshop中创建图片模板,然后为每张图片生成独立文件。

  • 保留原始图片源 — 我们不用担心日后需要更换图片主题的时候,没有原图片。因为我们根本没有修改他。

  • 相当的灵活 — 你只需要调整css就能换一个完全不同的样式。

  • 在任何站点都能工作 — 这个css技巧在任何站点,任何图片大小下都适用。

  • 解决浏览器兼容问题 — 通过了大多数浏览器的测试 (Firefox, Safari, Opera, 甚至包括行为怪异的IE6)。

基本概念

我们需要在包裹img的div中创建一个span元素,在他上面适用background-image来产生遮罩的效果。如果你不喜欢插入一个空的span标签,我们可以使用javascript来动态生成他,之后我们会介绍到。下面的代码揭示了他如何工作。

对于css代码,我们需要注意的是,需要为div设置position:relative,为span设置 position:absolute。这样你就可以通过为span设置top和left属性,来任意摆布他在div中的位置了。

IE PNG hack

为了能让透明的png图片在ie6中工作,我们需要使用到强大的 iepngfix.htc hack。下载 iepngfix.htc 文件,并在页面<head>标签中添加如下代码。

复制代码
<!--[if lt IE 7]><style type="text/css">  .photo span { behavior: url(iepngfix.htc); }</style><![endif]-->
复制代码

外观

我们只需要修改指定span元素的css,就能实现不同样式的变化。查看demo源代码,你会发现其中的奥秘。

jquery解决方案

如果你不喜欢在页面中直接添加空的span标签,可以使用下面的jquery代码,实现span的动态添加。

复制代码
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){    //预添加 span 标签  $(".photo a").prepend("<span></span>");   });</script>
复制代码

#1. 简单画廊

让我们使用之前介绍的技术,来创建画廊吧。

#1b. 迷你icon

这个例子为了展示了,如何在图片上面放置不同的icon。我们需要为span标签设置不同的css class 名称。

#2. 带文字的图片

该例子为了展示了如何创建带文字连接的画廊。

#2b. 弹出文字

#3. 迷你纸夹

#4. 软木板画廊

sIFR版本(文字替换)

在这个版本中借助 sIFR, 实现将em中的文字替换为手写体。

#4b.胶带效果

#5.黑框艺术画廊

#5b.金边艺术画廊

#6.水彩效果

 

sIFR版本

#7.高光效果

#8.木板画廊

最后我们展示如何使用background-image来实现木板的效果。

最后评论

我们可以看到这种css技巧相当的灵活,他极具创造性,他将图片和css有机的结合在了一起。你也可以使用这种方式,创建自己不同风格的画廊。

如今,我们有具备视网膜屏幕的iPhone,iPod,ipad和 Mac。这些产品拥有大量的用户,随着苹果产品的不断创新和增加,(Retina)视网膜屏幕技术的使用也越来越广泛。就像您周围看到的,这群庞大的用户正逐渐深入到人们的生活。接下来,咱们就看看如何把这项技巧运用在网页设计当中,让你的作品也看起来更加锐利,清晰。


起初,我觉得视网膜屏幕并没有多大的用户基础,毕竟这是个新技术, 然而,当我浏览了一下软件分析数据,发现苹果的所有设备都已经支持了视网膜屏幕技术,包括Macbook 13寸和15寸的使用者,再加上Chrome, firefox,IE浏览器的支持,使得视网膜屏幕技术的使用者越来越庞大起来,所以作为网页开发者不得不重视他们的视觉体验了。

如何制作图片

你会猜测视网膜技术是把图片存储成高分辨率的,提高单位面积的像素率 ?呵呵,这可不是关键。其实,你只需要做一步,把你的图片存成他的像素的两倍大小,也就是把一张200×200的图片存成400×400的。然后把大图的尺寸改成小图的,这样你的图片就会在高分辨率屏幕上看起来犀利很多。上面的方法听起来很简单,但是我们如何去做呢?

AI里的图片

矢量图片是最佳途径。假如我们有个logo是AI的或eps的,这样我们改起来很方便,因为我们可以随意的调整他的大小,无论是在AI里还是在PS里,然后导出就可以了(在ps里可以粘贴成适量对象,我觉得这很废话,相信各位都会)。

Photosho里的矢量工具

但是,我们如何用photogshop做呢?photoshop不是矢量软件,这不表示ps不能做矢量图片,形状图层就可以制作出完美的矢量图像,放大两倍完全不是问题。

快速处理图片

现在有个关键问题,设计师们放大或缩小图片不是什么问题,但是如果你 已经做好了你的网页,然后你想让这个页面也支持视网膜屏幕,我想你也不能毫无办法的把页面上的图片去重新做一份两倍大小的吧。盲目的放大 又会产生锯齿。下面就是我的办法:在图像—图像大小里面有个选择叫“邻近”。 这个操作对于小图标和单色图像很有用处,虽然不如矢量图片放大两倍之后 的效果好,不过在时间紧急的时候是个不错的选择。

将大图缩小成小图的办法是否可行?

你也许会问我做一张大图,然后缩小一倍,这样不行吗? 理论上来说,在印刷领域这是没啥问题的,不过在网页设计当中,是以像素为基础的,以至于我们缩小图片之后,也会产生锯齿,而且图片越小锯齿越明显!

将图片用代码的方式表现

当我们把这一大一小两张图片都准备好了,就可以把他们加到网页里面了, 我们首先重命名一下那些大图,比如s.jpg。

Javascript这样做

<script src="js/retina.js"></script>

第一是很简单的,把图片关联到retina.js.script,如上所示:

CSS这样做

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {header h1 a {background-image: url(images/blogspoon-logo@2x.png);background-size: 164px 148px;}}

然后,手动的添加css样式,添加代码:(如上) min0-device-pixel-ratio:2,是看设备是否是高分辨率的视网膜屏幕 background则是设置背景图片的尺寸。

HTML这样做

<img src="images/snarf@2x.jpg" width="300px" height="150px" />

上述的css办法对背景图片来说很给力,但是对于页面的图片来说,你需要去调整一下标签。调整图片的高和宽的数值,使图片大小成为标准大小 (如上)

好嘞!完成以上操作,您就可以让访问者通过他们的视网膜屏幕更清晰锐利的访问您的网页作品了,是不是很酷?赶紧来改造您的页面吧。

网站建设请加QQ:1278846,价格优惠,品质高。

网站静态生成收录好,功能强大,方便优化排名,安全稳定,打开快。


部分作品(原创设计):

<#zc_blog_host#>themes 主题站

http://parking.x-home.com.cn 宜红智能停车场

http://www.heartcos.com 心妆国际

http://www.yksj.cn 双佳石油化工

...

查看更多作品请加QQ交流


营口双佳石油化工有限公司项目

禄小伟
1048
1970年01月01日


一汽四平专用汽车集团网站项目

禄小伟
1908
1970年01月01日

一汽四平专用汽车红色版首页

一汽四平专用汽车蓝色版首页

一汽四平专用汽车蓝色版内容页

一汽四平专用汽车红色版产品列表页


Powered By Z-BlogPHP 1.5 Zero

Copyright webexp.cn Rights Reserved.

本站基于 阿里云服务器 + Ename域名 + Z-Blog 构建   |   站点地图   |   辽ICP备13003381号-4