css响应式页面布局
时间: 2023-12-07 19:39:04 浏览: 39
CSS响应式布局是指通过CSS媒体查询技术,使得网页能够在不同的设备上(如PC、平板、手机等)自适应地展现出最佳的布局效果。下面是一个简单的CSS响应式布局的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式布局</title>
<style type="text/css">
/* 基础样式 */
body {
margin: 0;
padding: 0;
font-size: 16px;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.box {
width: 100%;
height: 200px;
background-color: #ccc;
margin-bottom: 20px;
}
/* 媒体查询 */
@media screen and (min-width: 768px) {
.box {
width: 50%;
margin-right: 20px; margin-bottom: 0;
float: left;
}
}
@media screen and (min-width: 1200px) {
.box {
width: 33.33%;
margin-right: 20px;
margin-bottom: 0;
float: left;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```
上面的例子中,我们首先定义了基础样式,包括了整个页面的字体大小、容器的宽度、内边距等。然后,我们使用媒体查询技术,在不同的屏幕尺寸下,对盒子的宽度、外边距、浮动等进行了不同的设置,从而实现了响应式布局的效果。
--相关问题--:
1. 如何使用CSS实现网页的动画效果?
2. 如何使用CSS实现网页的背景渐变效果