本文记录了前端三栏式布局的三种实现方法：绝对定位法、Margin负值法和自身浮动法。在实践中，强调了Margin负值法的结构布局和样式设置要点，以及自身浮动法的结构顺序。提供了相关案例链接供参考。
学习了html5结构元素、网页元素、全局属性；动手练习三栏式布局小案例（利用现html5结构）
【知识点记录】
- 绝对定位法——左右两栏采用定位，margin值撑开
- Margin负值法——中间栏被宽度为100%的浮动元素包起来，左右采用左浮动，再采用负的margin值
- 自身浮动法——左栏左浮动，右栏右浮动，中间栏放在最后。
【纠错笔记】
Margin负值法练中注意以下两点
- 结构布局——中间部分写在前面，左右写在后面
- 样式——左中右都采用左浮动，中间的宽度是100%，中间宽度为100%，无具体值，贴近左边采用的是-100%即可贴合左边；因为中间margin左右缩进100px，所以右边采用向左-100px，即可贴合。
自身浮动法
- 结构上先写左、右，中间放在最后。
<body>
<header class="header">头部</header>
<section>
<divclass="left">左</div>
<div00class="right">右</div>
<div class="main">中</div>
</section>
<footer class="footer">底部</footer>
</body>
案例文件：
demo1《自身浮动法》链接: https://pan.baidu.com/s/1dIgYD4 密码: 9bdf
demo2《margin负值法》链接: https://pan.baidu.com/s/1smD8EQh 密码: jr8f
demo3《绝对定位法》链接: https://pan.baidu.com/s/1jJwlYJk 密码: 7a78
扫一扫
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
