来自 澳门威尼斯人平台 2019-12-10 19:24 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

再叙网页栅格

网页无图再不是梦想

2015/08/22 · HTML5 · 澳门威尼斯人平台,1 评论 · 网页开发

原文出处: 百码山庄   

一直以来,网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就:从一开始零零碎碎的小图标资源,到后来小图标合并成一个图片出现雪碧图,再到后来Webfont的出现不仅可以取代雪碧图,而且彻底解决了图标管理难,变色实现麻烦的问题。今天我要跟大家介绍一个小工具,也是可以帮助实现网页无图这一终极目标。理论上来讲,它可以将任何一张图片转换成一个不带图片,不带背景图的干干净净的html标签。但是这有前提:你的计算机得有足够的资源去支撑。

 Liya - 2015年8月31日

这是一篇断断续续写就的杂文,行文有些混乱,但无碍理解。

Banner 是我们最常聊到的设计元素,它是一个网页的招牌,是用户最容易看到的视觉元素。今天,我们来聊聊Banner中的急先锋,网页首图,它的设计之道。

缘起

那是一个工作日的早上,我向往常一样准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章,出于职业敏感,也出于好奇我就点进去看了一看,发现其中有一个很有意思的作品:,它仅仅用一个div标签就完成了这幅作品,于是我们几个同事好奇使然,开始分析它的实现,渐渐有了下面即将介绍的工具的影子。


常常问自己这个问题:你是谁?

网页设计师都明白,网页对于用户的第一印象是非常重要的,而网页给用户的第一印象很大程度上取决于网页的视觉设计。

渐入主题

既然可以使用一个标签制作出一副精美的像素图,那么是否就意味着可以用一个标签还原任一一张图片?唯一不能还原的是图片的精细度问题。然而,如果可以精细到每一个像素点,那么高精度的还原整张图也完全可行,只是这必将消耗非常多的计算机资源。这一设想便是催生这个小工具的催化剂,于是我便开始构思起来。

当女神潘潘导师问我是否了解网页设计中的栅格系统,为什么要使用栅格系统时,脑中能想到的只有,“遵循栅格使网页看起来整齐规范”,“方便重构”,“有利于响应式布局”。。。其实对栅格系统只是一知半解,并没有系统深入的理解,于是做了些功课,整理出这篇文章,希望能给新接触网页设计的小伙伴们一点参考。

小学

最初梦想当科学家,接着梦想当企业家。

现在的网页虽然多种多样,但是出于视觉化设计的目的,大多会使用大图背景,或者超大尺寸的Banner。当用户一打开网页的时候,映入用户眼帘的Banner ,是影响视觉设计的关键因素,它有个专门的术语是 Hero image,我们通常称之为首图。所以,网页首图的设计需要特别用心的。

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:再叙网页栅格

关键词: