知识点总结:
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
控制文本溢出时的处理方式,如显示省略号。
9. 工具提示 (Tooltip)
10. CSS3 图像处理
- 圆形头像:使用
border-radius
将图像裁剪成圆形。 - 滤镜效果:通过
filter
属性为图像添加滤镜,如灰度、模糊等效果。
11. 表单与输入
- 响应式表单:使用 Flexbox 或 Grid 创建自动适应屏幕宽度的表单布局。
12. 加载动画
- CSS3 加载动画:通过边框、旋转动画模拟常见的加载动画效果。
13. 图像库与卡片布局
- 弹性图片库:使用 Flexbox 创建弹性、响应式的图片库布局。
- 卡片布局:使用 Grid 创建响应式的卡片布局。
案例:
1. 制作渐变背景
<!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. 创建圆角按钮
<!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. 添加阴影效果
<!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 过渡效果
<!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;
}
.transition-effect:hover {
background-color: #ff5722;
}
</style>
</head>
<body>
<div class="transition-effect"></div>
</body>
</html>
5. CSS3 动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Animation</title>
<style>
@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 旋转卡片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Rotating Card</title>
<style>
.card-container {
perspective: 1000px;
}
.card {
width: 200px;
height: 300px;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card:hover {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<div class="card-front">
这是正面
</div>
<div class="card-back">
这是反面
</div>
</div>
</div>
</body>
</html>
7. 响应式导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Navbar</title>
<style>
.navbar {
display: flex;
justify-content: space-between;
background-color: #333;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
}
@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) 布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Layout</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.flex-item {
background-color: #4CAF50;
padding: 20px;
margin: 10px
;
}
</style>
</head>
<body>
<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)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.grid-item {
background-color: #4CAF50;
padding: 20px;
}
</style>
</head>
<body>
<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. 文本裁剪与溢出处理
<!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 渐变边框
<!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. 制作圆形头像
<!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 旋转与缩放
<!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);
}
</style>
</head>
<body>
<div class="rotate-scale"></div>
</body>
</html>
14. 弹性图片库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Gallery</title>
<style>
.flex-gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-gallery img {
width: 100%;
max-width: 200px;
}
</style>
</head>
<body>
<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. 悬停效果的工具提示
<!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 滤镜效果
<!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. 响应式表单设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Form</title>
<style>
.responsive-form {
display: flex;
flex-direction: column;
max-width: 400px;
margin: auto;
}
.responsive-form input {
margin-bottom: 10px;
padding: 10px;
}
@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 加载动画
<!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. 背景图像固定效果
<!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;
}
</style>
</head>
<body>
<div class="fixed-background"></div>
</body>
</html>
20. 响应式卡片布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Card Layout</title>
<style>
.grid-cards {
display: 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>