html布局

创作一个网页,第一步要先设计好网页的布局,这样能够更好地把控整个页面。
过去比较常用的是div布局,也可以用table布局,html5流行起来以后也可以用标签布局,这样代码会更简洁。
布局最常用的标签有:

标签 含义 常用法
header 页眉 标题、logo、导航
nav 导航 导航栏、目录、超链接
aside 侧栏 侧边栏
section 内容
footer 页脚 友情链接,版权声明,文件建立日期,联系方式

这是常规页面的布局,有头有脚,左侧辅助,右侧主要内容。


html布局_第1张图片
1.png

现在有很多网站是这么设计的,把侧边栏放到了右边,把主要内容放到了左边,这样按照人从左向右读的习惯,第一眼就能关注到网页中的重点信息。


html布局_第2张图片
2.png

为了追求页面的简洁,可以去掉header和footer,减轻负重,让人看了很舒服。


html布局_第3张图片
3.png

随着手机使用占比的增加,这种风格目前越来越多地被使用,去掉侧边栏,把导航nav放到头部。有的把footer去掉,甚至也有header和footer都去掉的设计。


html布局_第4张图片
4.png

你可能感兴趣的:(html布局)