18143453325 在线咨询 在线咨询
18143453325 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 网页经典布局方案

网页经典布局方案

时间:2023-04-22 07:27:02 | 来源:网站运营

时间:2023-04-22 07:27:02 来源:网站运营

网页经典布局方案:

1.左右两栏布局

代码:

<!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>效果:

2.左中右三栏式布局

代码:

<!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>效果:

。。。。。。

关键词:方案,布局,经典

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭