第15章 web开发技术2
3 响应式设计：
css媒体查询（media queries）是一种技术，可以根据设备的屏幕尺寸、分辨率、方向等特性，应用不同的css样式，实现网页在不同设备上的自适应布局。
使用方法：
1 使用`media`规则开始媒体查询。
2 指定一个或多个媒体特征（如`min-width`、`max-width`、`orientation`等）。
3 在大括号内编写针对特定设备的css样式。
以下是一个简单的示例，演示了如何使用媒体查询实现在不同设备上显示不同样式的导航栏：
```html
＜!doctype html＞
＜html lang=&34;en&34;＞
＜head＞
＜meta charset=&34;utf-8&34;＞
＜meta name=&34;viewport&34; content=&34;width=device-width, initial-scale=10&34;＞
＜title＞media queries示例＜/title＞
＜style＞
nav {
background-color: 333;
overflow: hidden;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
dropdown {
position: relative;
display: inline-block;
}
dropdown-content {
display: none;
position: absolute;
background-color: f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,02);
z-index: 1;
}
dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
dropdown-content a:hover {background-color: f1f1f1}
dropdown:hover dropdown-content {
display: block;
}
media screen and (max-width: 600px) {
nav a {
display: block;
text-align: left;
}
nav {
overflow: hidden;
}
dropdown {
float: none;
}
dropdown-content {
position: relative;
}
dropdown-content a {
text-align: left;
}
}
＜/style＞
＜/head＞
＜body＞
＜div class=&34;nav&34;＞
＜a href=&34;home&34;＞主页＜/a＞
＜a href=&34;news&34;＞新闻＜/a＞
＜a href=&34;contact&34;＞联系我们＜/a＞
＜div class=&34;dropdown&34;＞
＜button class=&34;dropbtn&34;＞下拉菜单＜/button＞
＜div class=&34;dropdown-content&34;＞
＜a href=&34;&34;＞菜单项 1＜/a＞
＜a href=&34;&34;＞菜单项 2＜/a＞
＜a href=&34;&34;＞菜单项 3＜/a＞
＜/div＞
＜/div＞
＜/div＞
＜/body＞
＜/html＞
```
在这个示例中，我们使用了媒体查询来根据屏幕宽度调整导航栏的样式。当屏幕宽度小于等于600像素时，导航栏的链接将垂直显示，下拉菜单也会调整到适合小屏幕的样式。
4 动画与过渡效果：通过css动画、过渡和变换实现网页的动态效果。
使用css动画、过渡和变换可以为网页添加动态效果，提高用户体验。以下是这些效果的简要介绍和示例：
1 动画（animation）：
动画是通过设置一系列关键帧（keyframes）来创建平滑的过渡效果。使用`keyframes`规则定义关键帧，然后在需要动画的元素上应用`animation`属性。
```css
keyframes fadein {
0 { opacity: 0; }
100 { opacity: 1; }
}
fade-in-animation {
animation: fadein 1s ease-in forwards;
}
```
2 过渡（transition）：
过渡是在某个属性发生变化时，平滑地从一个状态过渡到另一个状态。使用`transition`属性来定义过渡效果。
```css
transition-example {
transition: background-color 05s ease;
}
transition-example:hover {
background-color: ff8c00;
}
```
3 变换（transform）：
变换是通过改变元素的几何形状来实现动态效果，例如缩放、旋转、倾斜等。使用`transform`属性应用变换效果。
```css
transform-example {
transform: rotate(30deg);
}
transform-example:hover {
transform: rotate(45deg) scale(11);
}
```
结合使用动画、过渡和变换，可以为网页添加更丰富的动态效果。以下是一个示例，展示了如何使用这些效果制作一个动画按钮：
```html
＜!doctype html＞
＜html lang=&34;en&34;＞
＜head＞
＜meta charset=&34;utf-8&34;＞
＜meta name=&34;viewport&34; content=&34;width=device-width, initial-scale=10&34;＞
＜title＞css动画、过渡和变换示例＜/title＞
＜style＞
button {
display: inline-block;
padding: 10px 20px;
background-color: 4caf50;
color: white;
text-decoration: none;
border-radius: 4px;
transition: all 03s ease;
}
button:hover {
background-color: 3e8e41;
transform: translatey(-2px);
}
keyframes buttonanimation {
0 { transform: translatey(0); }
100 { transform: translatey(-5px); }
}
buttonanimated {
animation: buttonanimation 03s infinite;
}
＜/style＞
＜/head＞
＜body＞
＜a href=&34;&34; class=&34;button animated&34;＞点击我＜/a＞
＜/body＞
＜/html＞
```
在这个示例中，我们为按钮添加了一个动画效果，使其在鼠标悬停时上下跳动。使用过渡效果平滑地改变按钮的背景颜色和位置，同时应用变换效果使按钮在悬停时稍微向上移动。