body里面怎么写:/* 设置所有元素使用盒模型 */ * { box-sizing: border-box; } /* 设置页面中的图片自适应宽度 */ img { max-width: 100%; height: auto; } /* 使用flexbox布局,使元素自适应排列 */ .container { display: flex; flex-wrap: wrap; justify-content: space-between; } /* 使用媒体查询,根据屏幕宽度设置不同的样式 */ @media screen and (max-width: 768px) { /* 当屏幕宽度小于等于768px时,设置元素为一列排列 */ .container { flex-direction: column; } }
时间: 2024-03-24 13:36:58 浏览: 74
可以将这段CSS代码直接写在HTML文件中的`<style>`标签中,或者写在单独的CSS文件中,然后在HTML文件中使用`<link>`标签引入该CSS文件。
以下是一个示例,将CSS代码写在HTML文件中的`<style>`标签中:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自适应布局示例</title>
<style>
/* 设置所有元素使用盒模型 */
* {
box-sizing: border-box;
}
/* 设置页面中的图片自适应宽度 */
img {
max-width: 100%;
height: auto;
}
/* 使用flexbox布局,使元素自适应排列 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 使用媒体查询,根据屏幕宽度设置不同的样式 */
@media screen and (max-width: 768px) {
/* 当屏幕宽度小于等于768px时,设置元素为一列排列 */
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 此处是页面中的元素内容 -->
</div>
</body>
</html>
```
在以上示例中,CSS代码写在了HTML文件的`<style>`标签中,然后通过`.container`选择器对页面中的元素进行布局。同时,使用媒体查询来根据屏幕宽度设置不同的样式,以适应不同大小的屏幕。
阅读全文