This section creates a product list page to display the name of the product, product price, product description, add to shopping cart button, and product image. and the Jump to Cart <a> link.
The <dl> tag is used here to define the product list, the <dt> tag defines the product images in the list, and the <dd> tag describes the product name and product description in the list,
Product price.
The layout is similar to the following:
# Link
|
|
|
| #Picture
Product name 1 |
Product description| Product price "Add to cart" button Picture
Product name 2Product description | Product price "Add to cart" button ..........
Product Name 3.......... | ............ ............ ............
|
|
|
Use CSS to make some styling adjustments.
|
The complete display code is as follows: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商品列表页面</title>
<!--商品列表样式表-->
<style>
h2{
text-align: center;
}
a{
text-decoration: none;
}
.mycar{
border: 1px solid #d4d4d4;
width: 160px;
background-color: #d4d4d4;
font-family: 微软雅黑,宋体;
}
dl{
float: left;
border: 1px solid #d4d4d4;
margin-left: 10px;
margin-top: 20px;
}
.m1{
margin-left: 35%;
font-family: 微软雅黑,宋体;
font-size: 16px;
font-weight: bolder;
display: block;
}
.m2{
font-size: 10px;
color: #0000FF;
margin-top: 3%;
margin-left: 33%;
display:block;
line-height: 14px;
}
.m3{
color: red;
font-weight: bolder;
font-size: 18px;
display: block;
line-height: 14px;
text-align: left;
}
.m4{
background-color: crimson;
font-weight: bolder;
color: white;
display: block;
line-height: 14px;
margin-left: 30%;
}
@media only screen and (min-width: 410px){
dl{
margin: 20px 8px;
}
}
@media only screen and (min-width: 350px) and (max-width: 410px){
dl{
margin: 20px 8px;
}
}
}
@media only screen and (max-width: 350px){
dl{
margin: 20px 8px;
}
}
</style>
</head>
<body>
<div class="container">
<h2>商品展示列表</h2>
<div class="mycar">
<a href="cart.php">我的购物车</a><i style="margin-left: 10px; color: red; font-weight: bolder;" id="ccount">0</i>
</div>
<div class="list">
<dl pid="1001">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg"/>
</dt>
<dd class="m1">智能手表</dd>
<dd class="m2">纯机械，超酷表带</dd>
<dd class="m3">￥<span>3567</span></dd>
<dd>
<button class="m4">加入购物车</button>
</dd>
</dl>
<dl pid="1002">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58297f4735d73302.jpg" />
</dt>
<dd class="m1">智能手机</dd>
<dd class="m2">大屏幕，超高配置</dd>
<dd class="m3">￥<span>2999</span></dd>
<dd>
<button class="m4">添加购物车</button>
</dd>
</dl>
<dl pid="1003">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58298020ad204771.jpg" />
</dt>
<dd class="m1">平板电脑</dd>
<dd class="m2">新上市，值得拥有</dd>
<dd class="m3">￥<span>1899</span></dd>
<dd>
<button class="m4">添加购物车</button>
</dd>
</dl>
<dl pid="1004">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/582980398200b667.jpg" />
</dt>
<dd class="m1">超极本</dd>
<dd class="m2">够轻薄，够流畅</dd>
<dd class="m3">￥<span>4999</span></dd>
<dd>
<button class="m4">添加购物车</button>
</dd>
</dl>
</div>
</div>
</body>
</html>
This completes the first step and creates an HTML product display page.
Next Section
