html制作花店代码,使用HTML和CSS3示例分享
以下是一个使用HTML和CSS3制作简单花店页面布局的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>花店页面布局</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f8f8f8;
}
.store {
width: 80%;
max-width: 1200px;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.store-header {
text-align: center;
padding-bottom: 15px;
}
.store-header img {
width: 120px;
}
.store-nav {
margin-top: 20px;
text-align: center;
}
.store-nav a {
margin: 0 10px;
text-decoration: none;
color: #333;
font-size: 16px;
}
.store-nav a.active {
font-weight: bold;
}
.store-products {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.store-product {
width: 200px;
margin: 10px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.store-product img {
width: 100%;
height: 200px;
object-fit: cover;
}
.store-product-name {
margin-top: 10px;
font-size: 18px;
}
.store-product-price {
color: #e84a5f;
font-weight: bold;
}
</style>
</head>
<body>
<div class="store">
<div class="store-header">
<img src="logo.png" alt="花店 Logo">
<h1>欢迎来到花店</h1>
</div>
<div class="store-nav">
<a class="active" href="#">首页</a>
<a href="#">花卉库</a>
<a href="#">关于我们</a>
</div>
<div class="store-products">
<div class="store-product">
<img src="product1.jpg" alt="花卉图片">
<div class="store-product-name">玫瑰花卉</div>
<div class="store-product-price">$20.99</div>
</div>
<!-- 其他产品可以复制上面的div块进行展示 -->
</div>
</div>
</body>
</html>这个示例展示了如何使用HTML创建一个简单的花店页面布局，并使用CSS3来增强页面的视觉效果。在这个代码中，我们定义了.store容器来包含整个页面的内容，并使用Flexbox布局来创建一个响应式的布局。我们还定义了.store-header、.store-nav和.store-products等类来分别表示页面的不同部分，并且使用CSS属性如box-shadow
评论已关闭