已知一“商场购物”页面的显示效果如下: 请参考显示效果给出网页中HTML与CSS代码。
时间: 2024-02-15 20:03:30 浏览: 17
以下是一个简单的HTML和CSS代码示例,实现了类似于商场购物页面的显示效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>商城购物页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 80%;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 28px;
color: #333;
margin: 0 0 20px;
}
.product {
display: flex;
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.product img {
width: 150px;
height: 150px;
margin-right: 20px;
}
.product h2 {
font-size: 24px;
color: #333;
margin: 0 0 10px;
}
.product p {
font-size: 16px;
color: #666;
margin: 0 0 10px;
}
.product button {
padding: 10px 20px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.product button:hover {
background-color: #c00;
}
</style>
</head>
<body>
<div class="container">
<h1>商城购物页面</h1>
<div class="product">
<img src="product1.jpg" alt="Product 1">
<div>
<h2>商品名称</h2>
<p>商品描述</p>
<p>价格: 99元</p>
<button>加入购物车</button>
</div>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<div>
<h2>商品名称</h2>
<p>商品描述</p>
<p>价格: 199元</p>
<button>加入购物车</button>
</div>
</div>
<div class="product">
<img src="product3.jpg" alt="Product 3">
<div>
<h2>商品名称</h2>
<p>商品描述</p>
<p>价格: 299元</p>
<button>加入购物车</button>
</div>
</div>
</div>
</body>
</html>
```
这段代码使用了一些基本的HTML标签和CSS属性,包括:
- `<!DOCTYPE html>`:声明文档类型为HTML5。
- `<html>`:HTML文档的根元素。
- `<head>`:包含了文档的元数据和引用的资源。
- `<title>`:指定了文档的标题,显示在浏览器的标题栏中。
- `<style>`:定义了文档中使用的样式。
- `body`:HTML文档的主体部分。
- `.container`:CSS类选择器,定义了一个容器元素,用于包含所有商品。
- `h1`:HTML标题元素,显示了页面的标题。
- `.product`:CSS类选择器,定义了一个商品元素。
- `img`:HTML图像元素,用于显示商品图片。
- `h2`:HTML子标题元素,用于显示商品名称。
- `p`:HTML段落元素,用于显示商品描述和价格。
- `button`:HTML按钮元素,用于添加商品到购物车。
- `margin`、`padding`、`border`、`border-radius`、`box-shadow`等CSS属性,用于控制元素的外观和布局。
这些元素和属性的组合可以实现类似于商场购物页面的显示效果。