day13
CSS布局
行布局
多列布局
圣杯布局
双飞翼布局
圣杯布局
布局要求：
三列布局，中间宽度自适应，两边定宽
中间栏要在浏览器中有限展示渲染
允许任意列的高度最高
用最简单的CSS，最少的HACK语句
双飞翼布局:
去掉相对布局，只需要浮动和负边距
行布局
margin: 0 auto;
上下为0，左右居中
100%
页面自适应
{
position:absolute;
left:50%;
top:50%
margin-left:-50%width;
margin-top:-50%height;
}
垂直，水平都居中
案例：
行布局.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; text-align: center; font-size: 16px; } .header{ width: 100%; height: 50px; background-color: #333; margin: 0 auto; line-height: 50px; position: fixed; left: 0; top: 0; } .banner{ width: 800px; height: 300px; background-color: #30a457; line-height: 300px; margin: 0 auto; margin-top: 50px; } .container{ width: 800px; height: 1000px; background-color: #4c77f2; margin: 0 auto; } .footer{ width: 800px; height: 100px; background-color: #333; margin: 0 auto; line-height: 100px; } </style> </head> <body> <div class="header">这是页面的头部</div> <div class="banner">这是页面的banner</div> <div class="container">这是页面的内容</div> <div class="footer">这是页面的尾部</div> </body> </html>
行布局垂直水平居中.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #fff; text-align: center; } .container{ width: 800px; height: 200px; background-color: #17DEF3; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -400px; } </style> </head> <body> <div class="container">这是页面</div> </body> </html>
两列布局.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0; padding: 0; } .container{ width: 80%; height: 1000px; margin: 0 auto; text-align: center; } .left{ width: 60%; height: 1000px; background-color: #7079F5; float: left; } .right{ width: 40%; height: 1000px; background-color: #0BFDFD; float: left; } </style> </head> <body> <div class="container"> <div class="left">这是页面左侧</div> <div class="right">这是页面右侧</div> </div> </body> </html>
三列布局.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; background-color: #fff; text-align: center; font-size: 16px; } .container{ width: 90%; height: 1000px; margin: 0 auto; } .left{ width: 30%; height: 1000px; background-color: #afd; float: left; } .middle{ width: 50%; height: 1000px; background-color: #123; float: left; } .right{ width: 20%; height: 1000px; background-color: #444; float: right; } </style> </head> <body> <div class="container"> <div class="left">这是页面左侧</div> <div class="middle">这是页面中部</div> <div class="right">这是页面右侧</div> </div> </body> </html>
混合布局.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0; padding: 0; font-size: 16px; text-align: center; color: #fff; } .header{ width: 80%; height: 50px; margin: 0 auto; background-color: #5880f9; } .banner{ width: 80%; height: 300px; background-color: #8b8d91; margin: 0 auto; } .container{ width: 80%; height: 1000px; margin: 0 auto; } .left{ width: 40%; height: 1000px; background-color: #67b581; float: left; } .right{ width: 60%; height: 1000px; background-color: #d0d0d0; float: right; } .footer{ width: 80%; height: 100px; background-color: #ed817e; margin: 0 auto; } </style> </head> <body> <div class="header">这是页面的头部</div> <div class="banner">这是页面的轮播图</div> <div class="container"> <div class="left">这是页面的左侧</div> <div class="right">这是页面的右侧</div> </div> <div class="footer">这是页面的右侧</div> </body> </html>
圣杯布局.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; text-align: center; font-size: 16px; } body{ min-width: 630px; } .header,.footer{ width: 100%; height: 40px; float: left; line-height: 40px } .container{ padding: 0 220px 0 200px; } .left,.middle,.right{ float: left; position: relative; min-height: 300px; } .middle{ width: 100%; background-color: #607D8B; } .left{ width: 200px; background-color: #2196F3; margin-left: -100%; left: -200px; } .right{ width: 220px; background-color: #F00; margin-left: -220px; left: 220px; } </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="container"> <div class="middle"> <h4>middle</h4> <p>这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部</p> </div> <div class="left"> <h4>left</h4> <p>这是页面的左侧</p> </div> <div class="right"> <h4>right</h4> <p>这是页面的右侧</p> </div> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
双飞翼布局.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; text-align: center; font-size: 16px; } body{ min-width: 700px; } .header,.footer{ width: 100%; height: 40px; line-height: 40px; background-color: #ddd; float: left; } main{ width: 100%; } .main,.sub,.extra{ float: left; min-height: 300px; } .main-inner{ margin-left: 200px; margin-right: 220px; min-height: 300px; background-color: #607D8B; } .sub{ width: 200px; margin-left: -100%; background-color:#2196F3; } .extra{ width: 220px; margin-left: -220px; background-color: #f00; } </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="main"> <div class="main-inner"> <h4>main-inner</h4> 这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部这是页面的中部 </div> </div> <div class="sub"> <h4>sub</h4> 这是页面的左侧 </div> <div class="extra"> <h4>extra</h4> 这是页面的右侧 </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>