css布局一个截面图 |css图片自动切换代码

/* CSS代码 */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100vh;
padding: 0 2rem;
}
.content {
width: 60%;
}
.sidebar {
width: 30%;
}
.img-container img {
width: 100%;
height: auto;
object-fit: cover;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.content {
width: 100%;
margin-bottom: 2rem;
}
}

上面的代码演示了如何使用CSS布局一个截面图。首先，大家创建一个容器元素，并将其设置为flex布局。大家使用flex-direction属性将子元素水平排列，并使用justify-content属性在父元素的两端分别对齐子元素。大家还使用align-items属性将子元素垂直居中对齐。

接下来，大家使用类名content创建一个内容区域，并使用类名sidebar创建一个侧边栏。大家将内容区域的宽度设置为60%，将侧边栏的宽度设置为30%。大家还使用类名img-container创建一个图片容器，其中的图片将占据整个容器的宽度，并根据需要进行缩放。

最后，大家使用@media查询来设置响应式布局。当屏幕宽度小于768px时，大家将容器元素的flex-direction属性设置为垂直排列，并将内容区域的宽度设置为100%。

使用以上的CSS布局代码，可以轻松地实现一个截面图的布局。通过使用CSS的布局功能，大家可以创建出各种不同的排版和风格的页面，为大家的用户带来更好的用户体验。