网页布局之大盒套小盒的布局
网页上的内容丰富多彩,它的排版也很整齐,这其中肯定用到了很多的布局,对于初学者来说,我们先大致将网页的布局看做大盒套小盒的布局
![](https://i-blog.csdnimg.cn/blog_migrate/0fafd949b9a80aeb6d31a14ad3f48c3b.webp?x-image-process=image/format,png)
网页图片
比如下面这个网页,最顶部是个header盒子,接着是导航nav盒子,再接者是搜索search盒子,下面还可以看作盒子......我们可以用一个个div来当做这些个盒子,给这些盒子设置一个相同的宽度,然后给每个盒子设置height、margin值,给一些背景色,会得到基本的布局,如下
![](https://i-blog.csdnimg.cn/blog_migrate/dad185ede3f300133b1f2fdc6a6918db.webp?x-image-process=image/format,png)
得到的布局
.html文件中的基本框架如下:
![](https://i-blog.csdnimg.cn/blog_migrate/3d013093710a79d3dae0c7eb0d520582.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/4cb234861a4f45928e649909ab803874.webp?x-image-process=image/format,png)
对应代码