장바구니 상품 목록 페이지 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>

제출하다 코드 재설정

자동운전