JavaScript开发购物车...登陆

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>
提交重置代码
章节评论笔记课件
  • 取消回复发送
  • 取消发布笔记发送