<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; } h3 { margin: 20px 0 10px 100px; font-weight: normal; } /* 导航栏自适应布局 */ ul { width: 600px; margin-left: 100px; display: flex; border: 1px solid #000; } ul li { flex: 1; text-align: center; line-height: 60px; background-color: pink; margin: 0 5px; } /* 网页自适应布局 */ .layout { width: 600px; height: 400px; border: 1px solid #000; margin-left: 100px; /* 伸缩布局 */ display: flex; /* 主轴方向 */ flex-direction: column; } .header { background-color: pink; flex: 1; } .section { background-color: red; flex: 5; display: flex; } .left { flex: 1; background-color: orange; } .right { flex: 3; background-color: #f40; } .footer { background-color: #222; flex: 1; } </style> </head> <body> <h3>导航栏自适应布局</h3> <ul> <li>消息</li> <li>消息</li> <li>消息</li> <li>消息</li> <li>消息</li> </ul> <h3>网页自适应布局</h3> <div class="layout"> <div class="header"></div> <div class="section"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div> </div> </body> </html>
- demo 效果:
