Welcome, Old Sport!

网站排版技巧

by ilikecss ON 2012/07/20 7455

网站排版技巧网站排版是门艺术,很多站长容易忽略,提高站点排版效果会使设计更具有可读性。一个网站做好,肯定花费许多时间去调试,就算是多年的老站也会持续这个动作,总感觉这里那里不对,希望把站点建设的更美观。这篇文章里,我想介绍下一些网站排版的心得技巧。

1. 行高(line-height)

相信对于我们博客来说,文章是”主角”,”主角”是需要化妆和修饰的。正确的行高因该是多少呢?以初始字体12px15px设定的话,正确的行高是字体大小+7规则,这样文章的行高是最舒服的感觉。

body{
    font-size:13px;
    line-height:20px; /* 13px + 7px */
}

2. 标题的边距

另外一个常见问题就是有些博客文章标题和主体边距欠妥,其实因该给标题更大的空间。

3. 字体误区

做过设计的朋友知道,网站出现多种字体是硬伤,切记。我们一般设计使用1到2个相近字体就可以了。

4. 字的间距

不论是文章还是代码请给它们一点间距。

p {
   letter-spacing: 1px;
}

5. 链接文本

在文章中的链接文本最好给它下划线区分,不过现在很多设计师都不太使用链接下划线了,这点因人而异。

a {
   text-decoration: underline;
}

6. 区分标题和文章(主和次)

这点我相信大家做的都很好,就算不是学设计的朋友也会注意到。标题和文本区分明显,有利于给读者更清晰的阅读逻辑顺序。

7. 符号书写正确

区分全角和半角,符号使用html转义字符,可参照(10条HTML容易出错的转义符)

14条评论
  1. #1

    Q_Queenie说道:

    不需要多么花哨的设计
    好的页面,更多体现在细节考虑上
    对吗?

  2. #2

    金刚禅狮子吼说道:

    终于也宽屏了么~

    • 我感觉这个舒服点,你觉得呢? :cool:

      • 金刚禅狮子吼说道:

        主要是习惯了你960的风格,今天突然给我宽起来,感觉好奇怪~

  3. #3

    axiu说道:

    受教了

  4. #4

    体验盒子说道:

    宽屏是大气不少,但小屏不会自动适应,当然小屏太小众了,可忽略…… :grin:

  5. #5

    Marvin说道:

    正在用小屏……好吧,宽了感觉好紧凑~

  6. #6

    啄木游弋说道:

    隔了一段时间没来,就改成宽屏了么?不过说实话,感觉宽的有点过了,最好还是在两遍稍微留点缝隙吧,这样显得有些拥挤,和晃眼。




TOP