如何快速打造一个有设计感的网站

2017-03-14 09:04来源：优设作者：情非得已人气：1088 次阅读我要投稿

怎样在网页中应用手绘风格，以改善网站的用户体验
手绘风格非常有利于展示人性色彩，形成独特的识别度，为用户带来真实感。当你收到好友寄来的明信片时，你总是希望看到卡片是手写的，带着好友独特的笔迹，而不是用电脑打印出来的。一
解析网站404网页设计那些不得不说的事
前阵子做我们一淘优惠商家统一的报错页面，整理了一些有意思的404页面(后简称404)，加之最近网友热议的QQ空间公益404页面，在这里一起拿出来跟大家分享一下。
z-index属性的使用方法和层级树CSS教程
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺

四. CSS3

将上面都搞定后接下来要做的就是再加点 CSS3 特效了，如果时间不够的话简单的添加上盒阴影box-shadow和字体阴影text-shadow就可以让网站增色不少，CSS 代码如下。

h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }

如果时间足够的话还可以添加一个放射渐变填充效果，可以让标题的显示效果更重一些，如下面对比图所示。(如果想要更多 CSS 效果的话可以去学习一下 CodeSchool 的在线教程)

如何快速打造一个有设计感的网站,PS教程,

五. jQuery

其实到这里了话网站看起来已经很不错了，但为了让它更加个性化，还需要再添加上一张背景图片。对很多程序员来说这一步是比较难以进行的，那么应该如何选择一张设计师可能会使用的图片呢?答案就是去iStockPhoto或类似的付费图库中去寻找。

这里我们将使用 Winter Sun 这张照片，为了让网站保持自适应布局，还需要使用 Backstretch 这个 jQuery 插件让背景图可以随时自动调整大小。

首先需要付费下载背景图片，然后放到 /img/ 文件目录中去。

将此图片设置为的背景图(background-image): $.backstretch(“/img/winter.jpg”);

加入背景图后网页主题部分会产生遮挡，所以可以让其透明，这样网站效果看起来会更加现代、有设计感。这里可以使用这个技巧将网站变得透明，代码见右边，.container-narrow {background: url(/img/cream_dust_transparent.png) repeat 0 0;}

如何快速打造一个有设计感的网站,PS教程,