前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天

在第三天的学习中，我们将深入了解CSS的一些更高级的特性，比如伪类、盒模型、浮动和定位。

1. CSS伪类

伪类用于定义元素的特殊状态。例如，我们可以使用:hover来定义鼠标悬停时元素的样式。

a:hover {
    color: red;
}

2. CSS盒模型

CSS盒模型定义了元素如何显示以及如何处理元素的内边距、边框和外边距。

div {
    width: 300px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
}

3. CSS浮动

浮动可以使元素向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动框的边框为止。

.float-left {
    float: left;
}
 
.float-right {
    float: right;
}

4. CSS定位

CSS定位用于控制元素在页面上的确切位置。有三种主要的定位机制：静态定位、相对定位和绝对定位。

.static {
    position: static;
}
 
.relative {
    position: relative;
    top: 20px;
    left: 20px;
}
 
.absolute {
    position: absolute;
    top: 20px;
    right: 20px;
}

以上代码展示了如何使用CSS伪类、盒模型、浮动和定位来增强网页的表现力和交互性。在实际开发中，你可以根据需要选择合适的技术来应对不同的设计需求。