PC端页面的基础布局——圣杯布局

最新推荐文章于 2024-07-07 18:05:52 发布

zdh1996910

最新推荐文章于 2024-07-07 18:05:52 发布

阅读量720

点赞数

文章标签：圣杯布局

本文链接：https://blog.csdn.net/zdh1996910/article/details/86667967

版权

嗨喽，大家好！我是程序员小辉辉，上期介绍了拖拽效果，小伙伴们你么你学会了吗，这次给大家讲解的是PC端布局的方式之圣杯布局，虽然说现在pc端的占比没有移动端的重要，但是还是有PC端的项目，所以来说还是比较重要的，这次小辉辉就带你们学习一下！

废话不多说，直接上代码！因为这个非常简单，它实现的只是一个最简单的页面方式，我没有加入js的样式在里面！

在这里插入图片描述
顾名思义，这种布局方式为什么叫做圣杯布局那，因为这是用三个元素生成的页面，效果非常像我们的圣杯的样子，所以，我们叫它圣杯布局！
下面我来简单介绍一下子，首先我们需要用三个元素，来生成这个布局页面，第一个元素aside和第三个元素section的css的样式都是一样的以为他们三个是横行排列，所以我们这里只设置宽的具体大小，我这里是都设置的100px，然后高度都是100%。然后加入不同的背景色，这两个元素都要加浮动，唯一不同的是一个需要向左浮动，一个需要向右浮动，具体那个元素向左浮动，那个需要向右浮动！由你自己来定，浮动的原因就是为了给中间的元素留出位置显示！然后第二个元素只写高度100%就好了，宽度不写是默认100%，但是因为我们不知道这个浏览器的宽度有多大，我们已经确定了第一个元素和第三个元素的宽度，所以为了出现错误，我们直接索性不写第二个元素的宽度，让它自己有一个默认宽度。然后加入一个背景色。然后让溢出的部门是指一个隐藏！这样，我们的圣杯布局就完成了！这个是静态效果，我把生成的具体效果给大家看一下！
在这里插入图片描述
好的，具体效果就是这样，小伙伴们，你们觉得这个像圣杯么！
今天所学的知识，你get到了么。