<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0, maximum-scale=1.0">
<title>栅格系统布局</title>
<style>
.row {
width: 100%;
}
/* 通过伪元素:after清除浮动 */
.row :after {
clear: left;
/* 清除左浮动 */
content: '';
display: table;
/* 该元素会作为块级表格来显示（类似 <table>）*/
}
/* CSS3新增[attribute^=value]选择器，用于匹配属性值以指定值开头的每个元素 */
[class^="col"] {
float: left;
background-color: #e0e0e0;
}
.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="col1">侧边栏</aside>
</div>
<div class="row">
<footer>页尾</footer>
</div>
</body>
</html>
chapter05.zip
需积分: 5 108 浏览量
2022-10-27
16:14:20
上传
评论
收藏 698KB ZIP 举报
chapter05.zip （28个子文件） 
chapter05 bootstrap css 
bootstrap-grid.css.map 154KB bootstrap-reboot.min.css 4KB bootstrap.css.map 493KB bootstrap.min.css 156KB bootstrap-reboot.css 5KB bootstrap-grid.min.css 50KB bootstrap.css 193KB bootstrap-reboot.css.map 76KB bootstrap-reboot.min.css.map 32KB bootstrap.min.css.map 627KB bootstrap-grid.css 66KB bootstrap-grid.min.css.map 112KB js bootstrap.bundle.min.js 79KB bootstrap.bundle.js.map 400KB bootstrap.bundle.js 223KB bootstrap.min.js 59KB bootstrap.js.map 250KB bootstrap.min.js.map 190KB bootstrap.bundle.min.js.map 311KB bootstrap.js 132KB
demo01.html 1KB demo08.html 793B demo04.html 1KB demo05.html 772B demo02.html 430B demo06.html 937B demo03.html 409B demo07.html 896B资源评论
