生成一段网页布局的前端代码
时间: 2023-06-05 11:07:35 浏览: 66
很高兴为您提供帮助!以下是一段简单的网页布局的前端代码,您可以根据需要自行修改和调整:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页布局示例</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.item {
width: 30%;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
}
.item:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.item img {
width: 100%;
height: 200px;
object-fit: cover;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.item .title {
padding: 10px;
font-weight: bold;
text-align: center;
}
.item .desc {
padding: 10px;
}
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>网页布局示例</h1>
</div>
<div class="content">
<div class="item">
<img src="https://via.placeholder.com/400x200" alt="Placeholder" />
<div class="title">标题1</div>
<div class="desc">描述1</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/400x200" alt="Placeholder" />
<div class="title">标题2</div>
<div class="desc">描述2</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/400x200" alt="Placeholder" />
<div class="title">标题3</div>
<div class="desc">描述3</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/400x200" alt="Placeholder" />
<div class="title">标题4</div>
<div class="desc">描述4</div>
</div>
</div>
<div class="footer">
版权所有 ©2021
</div>
</body>
</html>
```
希望这段代码对您有所帮助!如果您有任何其他问题,请随时向我提问。