网页布局基础

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.使用绝对定位实现横向两列布局

上一篇下一篇

猜你喜欢

热点阅读