韩顺平 Div Css课程 笔记 下载本文

泰牛程序员PHP学院 htpp://www.itbull.cn

轻松搞定Div+Css

第 1 章 1.1 1.2 第 2 章 2.1 2.2 第 3 章 3.1 3.2 3.3 3.4 3.5 3.6 3.7

DIV+CSS的开山篇 ............................................................................................................... 1 什么是DIV+CSS

DIV+CSS的快速入门案例

1 1

DIV+CSS的必要性 ............................................................................................................... 3

CSS可以统一我们的网站风格

CSS可以通过滤镜来控制图片的显示风格

3 3

CSS的选择器......................................................................................................................... 5 选择器的分类 5 类选择器 5 ID选择器 6 HTML标签选择器 7 伪类选择器 11 通配符选择器 15 组合选择器 16 3.7.1 多元素选择器 .......................................................................................................... 16 3.7.2 后代选择器 .............................................................................................................. 18 3.7.3 子元素选择器 .......................................................................................................... 19 CSS选择器的深入讨论 ....................................................................................................... 21 后代选择器再说明

ID选择器的优先级高于类选择器 多个类选择器修饰同一个HTML元素 所有选择器的优先级大比武

21 22 22 23

第 4 章 4.1 4.2 4.3 4.4 第 5 章 5.1 5.2 5.3 5.4 第 6 章 6.1 6.2 6.3 6.4

CSS的使用方式................................................................................................................... 25 内联样式表 嵌入样式表 外部样式表 引入样式表

25 25 26 27

CSS的属性详解................................................................................................................... 29

CSS字体的属性 CSS文本属性 CSS背景属性

边框属性

29 29 29 30

第I页

泰牛程序员PHP学院 htpp://www.itbull.cn

6.5 6.6 6.7 第 7 章 7.1 7.2 7.3 7.4 第 8 章 8.1 8.2 8.3 8.4 第 9 章 9.1 9.2 9.3 9.4 9.5

列表属性

TABLE属性的讲解

浏览器的兼容性处理建议 31 32 34

行内元素和块元素 ............................................................................................................... 36 介绍

行内元素和块元素的区别 行内元素和块元素相互转换 标准流和非标准流

36 37 37 38

盒子模型 ............................................................................................................................... 39 盒子模型的基本概念 快速入门案例

盒子的模型的经典案例

在看一个非常经典实用案例 DIV - UL -LI

39 39 41 42

浮动 ....................................................................................................................................... 45 快速入门 深入理解浮动 右浮动

浮动的理解补充 清除浮动

45 46 48 50 52

第II页

泰牛程序员PHP学院 htpp://www.itbull.cn

第 1 章 div+css的开山篇

1.1 什么是div+css

div是区块,在网页开发中,用来存放内容(文字,图片,表格等等)

css 是层叠样式表,它的作用是用来规定div和div中的内容的位置和样式(颜色,大小,背景,列表的样式)

div+css 结合就可以做到把内容和样式分离,好处是1. 代码简洁,便于维护 2. 理由seo[搜索引擎优化]

1.2 div+css的快速入门案例

代码:

第1页

泰牛程序员PHP学院 htpp://www.itbull.cn

第2页