知识点总结:
1. 基础样式与选择器
- 颜色与背景 :通过
background-color
设置背景颜色,color
设置文本颜色。
- 字体与文本 :使用
font-family
设置字体,font-size
设置字体大小,text-align
控制文本对齐。
- 内外边距 :使用
padding
设置内边距,margin
设置外边距。
2. CSS 盒模型
- 了解元素的
width
、height
、border
、padding
、margin
以及盒模型的布局机制。
3. 定位与布局
- 浮动布局 (Float) :通过
float
实现元素的左右浮动布局,搭配 clear
属性清除浮动。
- 弹性布局 (Flexbox) :使用
display: flex
创建弹性布局,配合 flex-direction
、justify-content
、align-items
等属性实现灵活的布局方式。
- 网格布局 (CSS Grid) :通过
display: grid
创建网格布局,使用 grid-template-columns
、gap
等属性定义网格结构。
4. 响应式设计
- 使用 媒体查询 (Media Queries) 实现根据屏幕宽度动态调整布局。
- 弹性网格布局 :利用
auto-fit
和 minmax
创建可自动适应屏幕宽度的网格布局。
5. CSS3 视觉效果
- 渐变 (Gradient) :通过
linear-gradient
和 radial-gradient
创建线性与径向渐变效果。
- 边框与阴影 :使用
border-radius
实现圆角效果,使用 box-shadow
添加阴影效果。
- 透明与滤镜 :通过
opacity
设置元素透明度,使用 filter
实现灰度、模糊等滤镜效果。
- 背景图像 :使用
background-image
设置背景图像,并配合 background-size
、background-position
、background-attachment
实现固定背景、覆盖背景等效果。
6. CSS3 动画
- 过渡 (Transition) :使用
transition
创建平滑的过渡效果。
- 关键帧动画 (Keyframes Animation) :通过
@keyframes
定义动画关键帧,使用 animation
属性调用动画,实现旋转、缩放等效果。
7. 伪类与伪元素
- 伪类 (Pseudo-classes) :通过
:hover
、:active
、:focus
实现元素的悬停、点击、焦点等交互效果。
- 伪元素 (Pseudo-elements) :使用
::before
和 ::after
添加内容或装饰性元素。
8. 文本处理
- 文本溢出与裁剪 :通过
text-overflow
、white-space
和 overflow
控制文本溢出时的处理方式,如显示省略号。
10. CSS3 图像处理
- 圆形头像 :使用
border-radius
将图像裁剪成圆形。
- 滤镜效果 :通过
filter
属性为图像添加滤镜,如灰度、模糊等效果。
11. 表单与输入
- 响应式表单:使用 Flexbox 或 Grid 创建自动适应屏幕宽度的表单布局。
12. 加载动画
- CSS3 加载动画:通过边框、旋转动画模拟常见的加载动画效果。
13. 图像库与卡片布局
- 弹性图片库:使用 Flexbox 创建弹性、响应式的图片库布局。
- 卡片布局:使用 Grid 创建响应式的卡片布局。
案例:
1. 制作渐变背景
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradient Background</title>
<style>
/* 线性渐变背景 */
.linear-gradient-bg {
background: linear-gradient(to right, #ff7e5f, #feb47b);
height: 100vh;
}
/* 径向渐变背景 */
.radial-gradient-bg {
background: radial-gradient(circle, #ff7e5f, #feb47b);
height: 100vh;
}
</style>
</head>
<body>
<!-- 线性渐变背景 -->
<div class="linear-gradient-bg"></div>
<!-- 径向渐变背景 -->
<div class="radial-gradient-bg"></div>
</body>
</html>
2. 创建圆角按钮
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Round Button</title>
<style>
/* 创建圆角按钮的样式 */
.round-button {
background-color: #4CAF50; /* 按钮的背景颜色 */
color: white; /* 按钮文本的颜色 */
padding: 10px 20px; /* 内边距,控制按钮的大小 */
border: none; /* 去掉按钮的边框 */
border-radius: 25px; /* 圆角半径,控制按钮的圆角效果 */
cursor: pointer; /* 鼠标悬停时显示指针 */
}
</style>
</head>
<body>
<!-- 一个圆角按钮 -->
<button class="round-button">Click Me</button>
</body>
</html>
3. 添加阴影效果
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box and Text Shadow</title>
<style>
/* 盒子阴影 */
.box-shadow {
width: 200px; /* 盒子的宽度 */
height: 200px; /* 盒子的高度 */
background-color: #fff; /* 盒子的背景颜色 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}
/* 文本阴影 */
.text-shadow {
font-size: 24px; /* 文本大小 */
color: #333; /* 文本颜色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 文本阴影效果 */
}
</style>
</head>
<body>
<!-- 盒子阴影效果 -->
<div class="box-shadow"></div>
<!-- 文本阴影效果 -->
<p class="text-shadow">Shadowed Text</p>
</body>
</html>
4. CSS3 过渡效果
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transition Effect</title>
<style>
/* 初始状态的样式 */
.transition-effect {
width: 200px; /* 元素宽度 */
height: 200px; /* 元素高度 */
background-color: #4CAF50; /* 元素的背景颜色 */
transition: background-color 0.3s ease; /* 过渡效果,背景颜色在0.3秒内变换 */
}
/* 悬停时的样式 */
.transition-effect:hover {
background-color: #ff5722; /* 改变背景颜色 */
}
</style>
</head>
<body>
<!-- 一个带有过渡效果的元素 -->
<div class="transition-effect"></div>
</body>
</html>
5. CSS3 动画
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Animation</title>
<style>
/* 定义一个名为 "slide" 的动画 */
@keyframes slide {
0% {
transform: translateX(0); /* 动画开始时的位置 */
}
100% {
transform: translateX(100px); /* 动画结束时的位置 */
}
}
/* 应用动画效果的元素 */
.animation {
width: 100px; /* 元素宽度 */
height: 100px; /* 元素高度 */
background-color: #4CAF50; /* 元素的背景颜色 */
animation: slide 2s infinite alternate; /* 动画设置为无限次播放,并在每次完成后反向播放 */
}
</style>
</head>
<body>
<!-- 一个带有动画效果的元素 -->
<div class="animation"></div>
</body>
</html>
6. 3D 旋转卡片
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Rotating Card</title>
<style>
/* 定义3D效果的容器 */
.card-container {
perspective: 1000px; /* 设置视距,控制3D效果的强度 */
}
/* 定义卡片的基本样式 */
.card {
width: 200px; /* 卡片宽度 */
height: 300px; /* 卡片高度 */
transform-style: preserve-3d; /* 使子元素保持3D效果 */
transition: transform 0.6s; /* 旋转时的动画过渡效果 */
}
/* 悬停时,卡片旋转180度 */
.card:hover {
transform: rotateY(180deg); /* 绕Y轴旋转180度 */
}
/* 定义卡片的正面和背面样式 */
.card-front, .card-back {
position: absolute; /* 绝对定位 */
width: 100%; /* 宽度填满卡片 */
height: 100%; /* 高度填满卡片 */
backface-visibility: hidden; /* 隐藏背面内容 */
}
/* 定义卡片背面旋转180度 */
.card-back {
transform: rotateY(180deg); /* 使背面倒置 */
}
</style>
</head>
<body>
<!-- 3D旋转卡片的容器 -->
<div class="card-container">
<div class="card">
<!-- 卡片的正面 -->
<div class="card-front">
这是正面
</div>
<!-- 卡片的背面 -->
<div class="card-back">
这是反面
</div>
</div>
</div>
</body>
</html>
7. 响应式导航栏
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Navbar</title>
<style>
/* 导航栏的基本样式 */
.navbar {
display: flex; /* 使用 Flexbox 布局 */
justify-content: space-between; /* 在子元素之间均匀分布空间 */
background-color: #333; /* 设置导航栏背景颜色 */
}
/* 导航栏链接的样式 */
.navbar a {
color: white; /* 链接文本颜色 */
padding: 14px 20px; /* 链接的内边距 */
text-decoration: none; /* 去掉链接的下划线 */
}
/* 媒体查询:当屏幕宽度小于600px时,导航栏改为纵向布局 */
@media (max-width: 600px) {
.navbar {
flex-direction: column; /* 导航栏纵向排列 */
}
}
</style>
</head>
<body>
<!-- 导航栏容器 -->
<div class="navbar">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系我们</a>
<a href="#">产品</a>
</div>
</body>
</html>
8. 弹性盒模型 (Flexbox) 布局
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Layout</title>
<style>
/* Flexbox容器 */
.flex-container {
display: flex; /* 使用 Flexbox 布局 */
justify-content: center; /* 水平方向居中对齐 */
align-items: center; /* 垂直方向居中对齐 */
height: 100vh; /* 使容器填满整个视窗高度 */
}
/* Flexbox子元素 */
.flex-item {
background-color: #4CAF50; /* 元素的背景颜色 */
padding: 20px; /* 元素的内边距 */
margin: 10px
; /* 元素的外边距 */
}
</style>
</head>
<body>
<!-- Flexbox 容器,包含多个子元素 -->
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
9. 网格布局 (CSS Grid)
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid Layout</title>
<style>
/* 网格容器 */
.grid-container {
display: grid; /* 使用 CSS Grid 布局 */
grid-template-columns: 1fr 1fr 1fr; /* 定义三个等宽的列 */
gap: 10px; /* 网格项之间的间隙 */
}
/* 网格项 */
.grid-item {
background-color: #4CAF50; /* 元素的背景颜色 */
padding: 20px; /* 元素的内边距 */
}
</style>
</head>
<body>
<!-- Grid 容器,包含多个网格项 -->
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
10. 文本裁剪与溢出处理
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Overflow</title>
<style>
/* 文本裁剪样式 */
.text-ellipsis {
width: 200px; /* 文本容器的宽度 */
white-space: nowrap; /* 强制文本在一行显示 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}
</style>
</head>
<body>
<!-- 应用了文本裁剪的段落 -->
<p class="text-ellipsis">This is a very long text that will be clipped with an ellipsis...</p>
</body>
</html>
11. CSS3 渐变边框
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradient Border</title>
<style>
/* 渐变边框样式 */
.gradient-border {
border: 10px solid; /* 边框宽度 */
border-image: linear-gradient(to right, #ff7e5f, #feb47b) 1; /* 渐变边框 */
}
</style>
</head>
<body>
<!-- 一个应用了渐变边框的元素 -->
<div class="gradient-border" style="padding: 20px;">
Content inside the border
</div>
</body>
</html>
12. 制作圆形头像
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circular Avatar</title>
<style>
/* 圆形头像样式 */
.circular-avatar {
width: 100px; /* 头像宽度 */
height: 100px; /* 头像高度 */
border-radius: 50%; /* 使头像圆形 */
background-image: url('path_to_image.jpg'); /* 背景图片 */
background-size: cover; /* 使图片覆盖整个容器 */
}
</style>
</head>
<body>
<!-- 一个圆形头像 -->
<div class="circular-avatar"></div>
</body>
</html>
13. CSS3 旋转与缩放
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate and Scale</title>
<style>
/* 初始状态的样式 */
.rotate-scale {
width: 100px; /* 元素宽度 */
height: 100px; /* 元素高度 */
background-color: #4CAF50; /* 元素的背景颜色 */
transition: transform 0.3s ease; /* 过渡效果,旋转与缩放 */
}
/* 悬停时的样式 */
.rotate-scale:hover {
transform: rotate(45deg) scale(1.2); /* 旋转45度并缩放到1.2倍 */
}
</style>
</head>
<body>
<!-- 一个带有旋转与缩放效果的元素 -->
<div class="rotate-scale"></div>
</body>
</html>
14. 弹性图片库
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Gallery</title>
<style>
/* Flexbox 图片库容器 */
.flex-gallery {
display: flex; /* 使用 Flexbox 布局 */
flex-wrap: wrap; /* 自动换行 */
gap: 10px; /* 图片之间的间隙 */
}
/* 图片样式 */
.flex-gallery img {
width: 100%; /* 使图片宽度填满容器 */
max-width: 200px; /* 图片的最大宽度 */
}
</style>
</head>
<body>
<!-- Flexbox 图片库 -->
<div class="flex-gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</body>
</html>
15. 悬停效果的工具提示
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tooltip Hover Effect</title>
<style>
/* 工具提示容器 */
.tooltip {
position: relative; /* 使工具提示相对于其容器定位 */
display: inline-block; /* 使元素成为行内块 */
cursor: pointer; /* 鼠标悬停时显示指针 */
}
/* 工具提示内容样式 */
.tooltip::after {
content: "This is a tooltip"; /* 工具提示文本 */
position: absolute; /* 绝对定位 */
bottom: 100%; /* 工具提示显示在元素上方 */
left: 50%; /* 水平居中对齐 */
transform: translateX(-50%); /* 使工具提示水平居中 */
background-color: #333; /* 工具提示背景颜色 */
color: #fff; /* 工具提示文本颜色 */
padding: 5px; /* 工具提示的内边距 */
border-radius: 5px; /* 圆角效果 */
opacity: 0; /* 初始状态透明 */
visibility: hidden; /* 初始状态不可见 */
transition: opacity 0.3s ease; /* 过渡效果,透明度 */
}
/* 鼠标悬停时显示工具提示 */
.tooltip:hover::after {
opacity: 1; /* 显示工具提示 */
visibility: visible; /* 工具提示可见 */
}
</style>
</head>
<body>
<!-- 带有工具提示的元素 -->
<div class="tooltip">Hover over me</div>
</body>
</html>
16. CSS3 滤镜效果
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filter Effect</title>
<style>
/* 应用滤镜效果的元素 */
.filter-effect {
filter: grayscale(100%); /* 初始状态应用灰度滤镜 */
transition: filter 0.3s ease; /* 过渡效果,滤镜 */
}
/* 悬停时移除滤镜 */
.filter-effect:hover {
filter: grayscale(0%); /* 恢复原始颜色 */
}
</style>
</head>
<body>
<!-- 一个带有滤镜效果的图片 -->
<img src="image.jpg" alt="Example Image" class="filter-effect">
</body>
</html>
17. 响应式表单设计
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Form</title>
<style>
/* 表单容器 */
.responsive-form {
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 初始状态下纵向排列 */
max-width: 400px; /* 表单的最大宽度 */
margin: auto; /* 使表单居中对齐 */
}
/* 表单输入框 */
.responsive-form input {
margin-bottom: 10px; /* 输入框之间的间隙 */
padding: 10px; /* 输入框的
内边距 */
}
/* 屏幕宽度大于 600px 时调整布局 */
@media (min-width: 600px) {
.responsive-form {
flex-direction: row; /* 横向排列表单项 */
justify-content: space-between; /* 表单项之间的空间均匀分布 */
}
.responsive-form input {
flex: 1; /* 输入框自动适应宽度 */
margin-right: 10px; /* 输入框之间的间隙 */
}
}
</style>
</head>
<body>
<!-- 一个响应式表单 -->
<form class="responsive-form">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
</form>
</body>
</html>
18. 制作 CSS3 加载动画
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loader Animation</title>
<style>
/* 定义旋转动画 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 加载动画样式 */
.loader {
border: 8px solid #f3f3f3; /* 外边框 */
border-top: 8px solid #3498db; /* 顶部边框,颜色不同 */
border-radius: 50%; /* 圆形边框 */
width: 50px; /* 加载动画的宽度 */
height: 50px; /* 加载动画的高度 */
animation: spin 2s linear infinite; /* 应用旋转动画 */
}
</style>
</head>
<body>
<!-- 一个加载动画元素 -->
<div class="loader"></div>
</body>
</html>
19. 背景图像固定效果
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Background</title>
<style>
/* 背景图像固定样式 */
.fixed-background {
background-image: url('path_to_image.jpg'); /* 背景图像 */
background-attachment: fixed; /* 背景图像固定 */
background-size: cover; /* 使背景图像覆盖整个容器 */
height: 100vh; /* 设置容器高度为 100% 视口高度 */
}
</style>
</head>
<body>
<!-- 一个应用了固定背景图像的元素 -->
<div class="fixed-background"></div>
</body>
</html>
20. 响应式卡片布局
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Card Layout</title>
<style>
/* 响应式卡片容器 */
.grid-cards {
display: grid; /* 使用 CSS Grid 布局 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动调整列数 */
gap: 20px; /* 卡片之间的间隙 */
}
/* 卡片样式 */
.card {
background-color: #4CAF50; /* 卡片的背景颜色 */
padding: 20px; /* 卡片的内边距 */
}
</style>
</head>
<body>
<!-- 一个响应式卡片布局 -->
<div class="grid-cards">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
</body>
</html>