什么叫做布局？
又称为版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
题目：假设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应
1、浮动布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> html * { margin: 0; padding: 0; } .layout article div { min-height: 100px; } .layout.float .left { float: left; width: 300px; background: red; } .layout.float .right { float: right; width: 300px; background: blue; } .layout.float .center { background: yellow; } </style> </head> <body> <section class="layout float"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动解决方案</h1> <p> 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 </p> </div> </article> </section> </body> </html>
2、绝对定位布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> html * { margin: 0; padding: 0; } .layout article div { min-height: 100px; } .layout.absolute .left-center-right>div { position: absolute; } .layout.absolute .left { left: 0; width: 300px; background: red; } .layout.absolute .center { left: 310px; right: 310px; background: yellow; } .layout.absolute .right { right: 0; width: 300px; background: blue; } </style> </head> <body> <section class="layout absolute"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>绝对定位解决方案</h1> <p> 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 </p> </div> <div class="right"></div> </article> </section> </body> </html>
3、flexbox布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> html * { margin: 0; padding: 0; } .layout article div { min-height: 100px; } .layout.flexbox .left-center-right { display: flex; } .layout.flexbox .left { width: 300px; background: red; } .layout.flexbox .center { flex: 1; background: green; } .layout.flexbox .right { width: 300px; background: yellow; } </style> </head> <body> <section class="layout flexbox"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>flexbox解决方案</h1> <p> 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 </p> </div> <div class="right"></div> </article> </section> </body> </html>
4、表格布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> html * { margin: 0; padding: 0; } .layout article div { min-height: 100px; } .layout.table .left-center-right { width: 100%; display: table; height: 100px; } .layout.table .left-center-right>div { display: table-cell; } .layout.table .left { width: 300px; background: black; } .layout.table .center { background: green; } .layout.table .right { width: 300px; background: burlywood; } </style> </head> <body> <section class="layout table"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>表格布局解决方案</h1> <p> 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 </p> </div> <div class="right"></div> </article> </section> </body> </html>
5、网格布局