布局在html中是不不可少的,圣杯是经典的布局。
作用在于主体优先渲染,他和双飞翼布局最大的区别在于。他指定主体内容的宽度,然后填充内部元素
左和右用相对定位来指定位置。以下是我的代码。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> body{ margin: 0; padding: 0; } .header{ width: 100%; height: 100px; background: powderblue; } .footer{ width: 100%; height: 100px; background: powderblue; } .content{ width: 1000px; min-height: 100%; margin: 0 auto; background: #0388f1; text-align: center; line-height: 100px; } .container{ width: 800px; background: #39ff1b; margin: auto; overflow: hidden; padding: 0 100px; text-align: center; } .main{ width: 100%; min-height: 800px; background: #333333; float: left; } .left{ width: 100px; min-height: 800px; background:pink; float: left; margin-left: -100%; position: relative; left: -100px; } .right{ width: 100px; min-height: 800px; background: powderblue; float: left; margin-left: -100px; position: relative; right: -100px; } ul{ margin: 0; padding: 0; } ul li{ list-style: none; display: block; float: left; margin-left: 100px; } a{ text-decoration: none; color: white; } a:llink{ color: white; } a:visited{ color: white; } .maid1{ width: 100%; height: 580px; background:red; margin-bottom: 10px; } .zuo{ width: 300px; height: 400px; background: lime; float: left; margin-top: 50px; margin-left: 10px } .you{ width: 480px; height: 580px; float: right; margin-top: 50px; line-height: 80px; } .you li{ display: block; min-height: 100%; width: 480px; border-bottom: 2px dotted black; text-align: left; } .maid2{ width:100%; height: 210px; background: aquamarine; } .z1{ width: 150px; height: 150px; margin: 0 20px; margin-top: 47px; float: left; background: #efefef; } .z2{ width: 150px; height: 150px; margin: 5px 20px; background: #efefef; float: left; } .left1 { width: 100%; height: 395px; background: #ffe80e; } .left2{ width: 100%; height: 395px; background: beige; margin-top: 10px; } .right1 { width: 100%; height: 395px; background: #ffe80e; margin-bottom: 10px; } .right2{ width: 100%; height: 395px; background: beige; } </style> </head> <body> <div class="header"> <div class="content"> <ul> <li><a href="test">首页</a></li> <li><a href="test">新闻</a></li> <li><a href="test">娱乐</a></li> <li><a href="test">音乐</a></li> <li><a href="test">关于我们</a></li> <li><a href="test">联系我们</a></li> </ul> </div> </div> <div class="container"> <div class="main"> <div class="maid1"> <div class="zuo"></div> <div class="you"> <ul> <li><a href="test">1.文章</a></li> <li><a href="test">2.文章</a></li> <li><a href="test">3.文章</a></li> <li><a href="test">4.文章</a></li> <li><a href="test">5.文章</a></li> <li><a href="test">6.文章</a></li> </ul> </div> </div> <div class="maid2"> <div class="z1"></div> <div class="z2"></div> <div class="z2"></div> <div class="z2"></div> </div> </div> <div class="left"> <div class="left1"></div> <div class="left2"></div> </div> <div class="right"> <div class="right1"></div> <div class="right2"></div> </div> </div> <div class="footer"> <div class="content"> <ul> <li><a href="test">首页</a></li> <li><a href="test">新闻</a></li> <li><a href="test">娱乐</a></li> <li><a href="test">音乐</a></li> <li><a href="test">关于我们</a></li> <li><a href="test">联系我们</a></li> </ul> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例