知识点总结:
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>