用elementui写一个响应式布局网页
时间: 2023-10-05 11:13:00 浏览: 54
好的,以下是一个使用 ElementUI 实现响应式布局的网页示例:
```html
<template>
<div class="container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" :lg="6">
<div class="card">
<img src="https://picsum.photos/200/200" alt="Sample Image">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum augue non libero malesuada, sit amet pellentesque leo mattis. Aliquam vitae velit eu felis consequat eleifend.</p>
<a href="#">Read More</a>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6">
<div class="card">
<img src="https://picsum.photos/200/200" alt="Sample Image">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum augue non libero malesuada, sit amet pellentesque leo mattis. Aliquam vitae velit eu felis consequat eleifend.</p>
<a href="#">Read More</a>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6">
<div class="card">
<img src="https://picsum.photos/200/200" alt="Sample Image">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum augue non libero malesuada, sit amet pellentesque leo mattis. Aliquam vitae velit eu felis consequat eleifend.</p>
<a href="#">Read More</a>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6">
<div class="card">
<img src="https://picsum.photos/200/200" alt="Sample Image">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum augue non libero malesuada, sit amet pellentesque leo mattis. Aliquam vitae velit eu felis consequat eleifend.</p>
<a href="#">Read More</a>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'ResponsiveLayout',
}
</script>
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.card {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card img {
width: 100%;
height: auto;
margin-bottom: 10px;
border-radius: 50%;
}
</style>
```
在这个示例中,我们使用了 `el-row` 和 `el-col` 组件来实现网页布局。我们将每个卡片放在一个 `el-col` 中,并使用了 `:xs`、`:sm`、`:md` 和 `:lg` 属性来设置不同屏幕尺寸下的列宽。这样,当用户在不同的设备上访问网站时,网页会自动调整布局,以适应不同的屏幕尺寸。
除了 `el-row` 和 `el-col` 组件之外,我们还使用了一些简单的 CSS 样式来设置卡片的样式。我们使用了 `max-width` 属性来设置容器的最大宽度,并使用 `margin` 和 `padding` 属性来设置容器的外边距和内边距。我们还使用了 `box-shadow` 属性来为卡片添加投影效果,并为卡片图片添加了圆角。