时间:2023-04-22 07:27:02 | 来源:网站运营
时间:2023-04-22 07:27:02 来源:网站运营
网页经典布局方案:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>左右两栏式布局</title> <style> .wrap{ margin: 0 auto; width: 1200px; } #left{ width: 200px; height: 500px; background: #ccffff; float: left; } #right{ height: 500px; background: #ffcccc; margin-left: 200px; } </style> </head><body> <div class="wrap"> <aside id="left"></aside> <section id="right"></section> </div></body></html>
效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>左中右三栏式布局</title> <style> .wrap{ margin: 0 auto; width: 900px; } #left{ width: 200px; height: 500px; background: #ccffff; float: left; } #right{ width: 200px; height: 500px; background: #ccffff; margin-left: 200px; float: right; } #main{ height: 500px; background: #ffcccc; margin: 0 210px; } </style></head><body> <div class="wrap"> <aside id="left"></aside> <section id="right"></section> <div id="main"></div> </div></body></html>
效果:关键词:方案,布局,经典