相对于"双飞冀布局",圣杯布局的DOM结构更简单,更优雅,最终效果图:
下面是圣杯布局的核心代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯</title> <style> .header, .footer { width: 100%; height: 60px; background-color: #aaa; } .content { width: 1000px; min-height: 100%; margin: auto; text-align: center; line-height: 60px; background-color: #eee; } .container { width: 600px; margin: auto; overflow: hidden; padding: 0 200px; background-color: yellow; } .main { width: 100%; min-height: 650px; background-color: #66CCFF; float:left; } .left { width: 200px; min-height: 650px; background-color: #FD6FCF; float:left; margin-left: -100%; position: relative; left: -200px; } .right { width: 200px; min-height: 650px; background-color: #FC0107; float:left; margin-left: -200px; position: relative; right: -200px; } </style> </head> <body> <div class="header"> <div class="content">header</div> </div> <div class="container"> <div class="main">主要内容区</div> <div class="left">左边</div> <div class="right">右边</div> </div> <div class="footer"> <div class="content">footer</div> </div> </body>
下面我将代码中的内容逐条解释给大家:
第一步: 创建DOM结构:
基本原则是:
1.头 + 中 + 底 三部分,其中中部区域是页面主体,用三列布局完成;
2.中间三列中,中间为显示主体,必须放在前面,优先渲染,提升用户体验;
<!--1.头部:--> <div class="header"> <div class="content">header</div> </div> <!--2.中间主体:--> <div class="container"> <div class="main">主要内容区</div> <div class="left">左边</div> <div class="right">右边</div> </div> <!--3.底部:--> <div class="footer"> <div class="content">footer</div> </div>
第二步: 将页面头部和尾部公共样式写出来[写在当前文档