商品展示信息页面 使用css html
时间: 2023-08-13 17:07:46 浏览: 110
好的,以下是一个示例代码,其中包含了一个商品展示信息页面的 HTML 结构和相应的 CSS 样式:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品展示信息页面</title>
<style>
/* 样式定义 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.product {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.product img {
max-width: 400px;
margin-right: 20px;
}
.product-info {
flex: 1;
}
.product h1 {
font-size: 32px;
margin-top: 0;
margin-bottom: 10px;
}
.product p {
font-size: 16px;
line-height: 1.5;
margin-top: 0;
margin-bottom: 10px;
}
.product-price {
font-size: 24px;
font-weight: bold;
color: #007bff;
margin-top: 10px;
margin-bottom: 20px;
}
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
background-color: #007bff;
color: #fff;
text-decoration: none;
transition: all 0.3s;
}
.button:hover {
background-color: #0062cc;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="product">
<img src="product-image.jpg" alt="商品图片">
<div class="product-info">
<h1>商品名称</h1>
<p>商品描述</p>
<div class="product-price">¥99.99</div>
<a href="#" class="button">添加到购物车</a>
</div>
</div>
</div>
</body>
</html>
```
在上面的示例代码中,我们使用了一个 `.container` 类来定义页面的最大宽度、自动居中和背景颜色等样式。然后,我们使用了一个 `.product` 类来定义商品信息的样式,包括使用 flexbox 布局、图片和商品信息等元素之间的间距和对齐方式等。我们还使用了一些其他的类来定义商品名称、商品描述、商品价格和“添加到购物车”按钮等元素的样式,包括字体大小、字体粗细、颜色、边距和过渡效果等。最后,我们将商品信息放在一个 `.container` 容器中,并使用一个 `.product` 类来包装商品图片和商品信息等元素。