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

제출하다 코드 재설정

자동운전

전체 화면