NO.55 HTML-CSS案例

1.背景图相关

小代码：

效果：

---

2.文本样式

小代码：

效果：

---

3.开发一个网页----第一阶段

html网页代码：

代码片段1

代码片段2

css代码：

效果：

选择器的优先级

1）选择器的权重

·元素选择器: 1

·类选择器: 10

·ID选择器: 100

2）案例中的情况

.content>div : 10+1

.data : 10

.content>.data : 10+10

---

4.定位

什么是定位?

定位用来解决元素的排列(摆放)问题。

用定位可以随心所欲的摆放元素。

定位的分类

1)默认的定位

块元素上下排列，行内元素左右排列。

这种默认的规则称之为默认定位，也叫流定位。

流：元素有序排列而形成的队伍。

2)特殊的定位

浮动定位：通常用来解决块元素左右排列问题。

相对定位：让元素以自己为目标,产生小的偏移。

绝对定位：让元素以父辈为目标,产生大的偏移。

固定定位：让元素以窗口为目标,产生大的偏移。

后三种定位十分相似。

5.浮动定位

1）简介

作用:通常用来解决块元素左右排列的问题.

特点:浮动的元素会离队(流)

分类:左,右浮动

步骤:1)元素离队 2)后者前进 3)元素去左/右

2）右浮动

可以让块按照倒序左右排列

3）左浮动

可以让块按照正序左右排列

4）如何消除浮动影响

代码实现：