html布局之发展流程图
warning:
这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。
HTML布局的演变通常是从表格布局、div+css布局，到现代的响应式布局和框架布局。以下是一个简化的演变流程示例代码：
- 表格布局（1997年以前）：
<table>
<tr>
<td>Header</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Footer</td>
</tr>
</table>- DIV + CSS布局（1997年-2004年）：
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
<style>
#header, #content, #footer {
width: 100%;
}
</style>- HTML + CSS布局（2004年-2014年）：
<header>Header</header>
<div id="content">Content</div>
<footer>Footer</footer>
<style>
header, footer {
width: 100%;
}
#content {
margin: 0 200px; /* 宽度为浏览器宽度减去固定宽度的侧边栏 */
}
</style>- 响应式布局（2014年至今）：
<header>Header</header>
<div id="content">Content</div>
<footer>Footer</footer>
<style>
header, footer {
width: 100%;
}
#content {
margin: 0 auto; /* 自适应宽度 */
max-width: 1200px; /* 最大宽度 */
}
</style>- 使用框架或库（如Bootstrap, Foundation等）（2014年至今）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<header class="jumbotron">Header</header>
<div class="container">
<div class="row">
<div class="col-md-9">Content</div>
<div class="col-md-3">Sidebar</div>
</div>
</div>
<footer class="jumbotron">Footer</footer>
</body>
</html>这个流程展示了从传统布局到现代响应式布局再到利用框架进行快速开发的演变过程。
评论已关闭