网页布局基础
2017-02-23 本文已影响21人
mo默22
第一章 自动居中——列布局
1-1 相关知识点讲解
1. W3C标准
2. CSS中的定位机制
（1）标准文档流
注：块级元素和行级元素都是盒子模型
1-2 盒子模型
1-3 自动居中——列布局的实现
1.三个技能点
2.margin属性实现居中
第2章 横向两列布局
2-1 浮动布局简介及float属性
1.浮动布局
2.float属性
2-2 常用清除浮动的常用方法
2-3 横向两列布局
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#wrap{background: #00C;margin:0 auto;width:960px;}
#header{background: #FF3300;width:100%;}
#mainbody{background: #FC0;width:100%;overflow: hidden;}
.left{width:800px;height:200px;background: #000;float: left;}
.right{width: 140px;height: 500px;background: #690;float: right;}
#footer{background: #639;width:100%;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版权部分</div>
</div>
</body>
</html>
第3章 绝对定位布局
3-1 简介
1.绝对定位布局简介
2.position属性
3-2 相对定位
3-3 绝对定位
1.未设置偏移量
2.设置偏移量
3.使用绝对定位实现横向两列布局
