<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式栅格系统</title>
<style>
.row{
width: 100%;
}
.row:after{
clear: left;
content: '';
display: table;
}
[class^="col"]{
float: left;
background-color: #93baff;
}
.col1{
width: 25%;
}
.col2{
width: 50%;
}
@media (max-width: 768px) {
.row{
width: 100%;
}
[class^="col"]{
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<header>页头</header>
</div>
<div class="row">
<nav class="col1">导航</nav>
<div class="col2">主要内容</div>
<aside class="col3">侧边栏</aside>
</div>
<div class="row">
<footer>页尾</footer>
</div>
</body>
</html>
袁同学——6月24日