杂志风格也就是我们平时看到的报纸或杂志，主要特点是排版干净简洁，主要以区块对内容进行风格，这种风格应用到网站中后，也能制作出简洁大方的网站，而且这种制作方法主要在排版，无需多余效果。

本文推荐的这款杂志风格网站界面也是秉承了其特点，没有多余修饰，只是用虚线来分割排版，很适合一些博客网站借鉴

开始制作过程，首先我们要做的是设置好网格，因为主要步骤都是通过排版实现，在PS中建立一个宽1680px,高1100px的背景，随后左右各留出360px的空白区域，这样中间部分宽度就是960px。这是目前网站最流行的宽度设置
 

之后我们将网站界面左右空白部分用灰色填充，留出中间的杂志网站容器区域，这样看起来更明显
 

我们将网站标志放在正中央，标志很简单，都是字母组成，使用comfortaa字体,中间文字使用绿色
 

添加导航菜单，还是只需要使用文字就行，导航文字颜色分别为#7b7c7c与#92a801
 

在导航菜单下面加上一段文字，我们想用其作为滚动新闻，在文字最后还可以加上两个小箭头，以后方便利用JS代码来对文字内容进行翻页浏览
 

然后在后面加上社会化标签与RSS，对于以内容为主的博客或杂志网站来说，社会化标签是很重要的，几乎每个此类网站都会使用，我们也不例外
 

接着用虚线进行区域分割，我们网站所有的布局区域都是统一用虚线分割
 

随后利用PS中的网格线来将网站界面划分成三栏，大小如下图标识
 

左侧栏是主要内容区域，以图文形式排列
 

为了区分突出每个标题与内容的独立性，每个图文区块都使用灰色背景进行区分，这样视觉上更出色，标题颜色也使用统一的绿色
 

之后为了让读者获得更好视觉体验，我们为每个标题右侧添加一个小图标，以表示这是一篇文章的标题，让其更醒目