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 :

< td width=" 114" valign="top">
< td width="129" valign="top" rowspan="4" colspan="1" style="word-break: break-all;">... ............< br/>< /tbody>

Titre : Page de liste de produits

Lien vers la page du panier

标题：商品列表页
跳转购物车页面链接
图片商品名称1 商品描述商品价格 "加入购物车"按键	图片商品名称2 商品描述商品价格 "加入购物车"按键	......... 商品名称3 ......... ................ ................	...................

Image

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<🎜><🎜>..... .<🎜 ><🎜>............<🎜><🎜>
<🎜><🎜>..... .....<🎜>

<🎜><🎜>Utilisez CSS pour créer quelques ajustements de style. <🎜><🎜><🎜>Le code d'affichage complet est le suivant : <🎜>

<!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. <🎜>section suivante

nouveau fichier

<!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;
 }
 img{
 height:17%
}
 .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>

soumettre Réinitialiser le code

Opération automatique

Plein écran