布局

首先,页面的所有元素都必须放在一个大的div里,我们一般称它为wrapper.它一般位于页面内容和body之间.

1
2
3
4
5
<body>
    <div class="wrapper">
        content
    </div>
</body>

在wrapper里,我们通常把区域划分为三块,header,content,footer.header区域一般用于放置导航栏,content区域即为页面主要内容的放置区域,footer用于显示站点信息和一些其他内容.

1
2
3
4
5
<div class="wrapper">
        <div class="header"></div>
        <div class="content">content</div>
        <div class="footer"></div>  
    </div>

这只是页面的总体布局,这三个区域内如何布局,不同类型的页面都需要不同的布局方案。

字体

要做出有高级感的页面,应尽量少选用楷体和宋体,字体颜色也应该尽量避免使用纯黑(#000000),下面是两段对比,自行体会

马老师发生甚么事了
马老师发生甚么事了

个人比较喜欢微软自带的微软雅黑(Microsoft Yahei)和微软雅黑Light(Microsoft Yahei Light)

配色

我不懂配色,总之背景色少用纯白(#FFFFFF),不要使用红(#FF0000)配蓝(#0000FF)


实战