Développement JavaScript de la page de liste de produits du panier d'achat
Cette section crée une page de liste de produits pour afficher le nom du produit, le prix du produit, la description du produit, le bouton Ajouter au panier et l'image du produit. et Aller au panier<a>
La balise <dl> est utilisée ici pour définir la liste des produits, <dt> la balise définit l'image du produit dans la liste, <dd> description dans la liste,
Prix du produit.
La disposition est similaire à la suivante :
| Titre : Page de liste de produits | ||||||||||||||
| Lien vers la page du panier | ||||||||||||||
Nom du produit 1 Description du produit Prix du produit<🎜><🎜>Bouton "Ajouter au panier"<🎜> | <🎜>Image<🎜><🎜>Nom du produit 2<🎜><🎜>Description du produit<🎜> <🎜>Prix du produit<🎜><🎜> <🎜><🎜>Bouton "Ajouter au panier"<🎜> | <🎜>.....<🎜><🎜>Nom du produit 3<🎜><🎜>..... .<🎜 ><🎜>............<🎜><🎜> <🎜><🎜>..... .....<🎜> | < td width="129" valign="top" rowspan="4" colspan="1" style="word-break: break-all;">... ............< br/>||||||||||||
<!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><🎜>Cela termine la première étape et crée une page d'affichage de produit HTML. <🎜> ![Combat réel Front-end Vue3 [projet vue manuscrit]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![Tutoriel APIPOST [Vulgarisation des concepts techniques liés à la communication réseau]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
