嗨喽，大家好！我是程序员小辉辉，上期介绍了拖拽效果，小伙伴们你么你学会了吗，这次给大家讲解的是PC端布局的方式之圣杯布局，虽然说现在pc端的占比没有移动端的重要，但是还是有PC端的项目，所以来说还是比较重要的，这次小辉辉就带你们学习一下！
废话不多说，直接上代码！因为这个非常简单，它实现的只是一个最简单的页面方式，我没有加入js的样式在里面！
顾名思义，这种布局方式为什么叫做圣杯布局那，因为这是用三个元素生成的页面，效果非常像我们的圣杯的样子，所以，我们叫它圣杯布局！
下面我来简单介绍一下子，首先我们需要用三个元素，来生成这个布局页面，第一个元素aside和第三个元素section的css的样式都是一样的以为他们三个是横行排列，所以我们这里只设置宽的具体大小，我这里是都设置的100px，然后高度都是100%。然后加入不同的背景色，这两个元素都要加浮动，唯一不同的是一个需要向左浮动，一个需要向右浮动，具体那个元素向左浮动，那个需要向右浮动！由你自己来定，浮动的原因就是为了给中间的元素留出位置显示！然后第二个元素只写高度100%就好了，宽度不写是默认100%，但是因为我们不知道这个浏览器的宽度有多大，我们已经确定了第一个元素和第三个元素的宽度，所以为了出现错误，我们直接索性不写第二个元素的宽度，让它自己有一个默认宽度。然后加入一个背景色。然后让溢出的部门是指一个隐藏！这样，我们的圣杯布局就完成了！这个是静态效果，我把生成的具体效果给大家看一下！
好的，具体效果就是这样 ，小伙伴们，你们觉得这个像圣杯么！
今天所学的知识，你get到了么。
标签：浮动,元素,圣杯,布局,PC,宽度,页面 来源： https://blog.csdn.net/zdh1996910/article/details/86667967
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。