JavaScript開發購物車之商品列表頁

本節建立一個商品清單頁，用來展示商品的名稱，商品價格，商品描述，加入購物車按鍵，商品圖片。以及跳到購物車<a>連結。

這裡使用了<dl>標籤來定義商品列表，<dt>標籤定義列表中的商品圖片，<dd>標籤描述列表中的商品名稱，商品描述，

商品價格。

佈局類似如下：

#"加入購物車"按鍵"加入購物車"按鍵...................................

標題：商品列表頁
跳轉購物車頁面連結
##商品名稱1 商品描述商品價格	#圖片商品名稱2 商品描述商品價格	......... 商品名稱3 ......... ................

#使用CSS進行一些樣式調整。

完整展示程式碼如下：

<!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>

###這樣就完成了第一步，並建立了一個HTML商品展示頁面。 ###下一節

新建檔案

<!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>

提交重置程式碼

自動運行

全螢幕