이 섹션에서는 제품 사진, 제품 내용 설명, 제품 수량 선택, 제품 단가
제품 가격 소계, 제품 삭제 작업 및 총 제품 가격 계산을 표시하는 장바구니 표시 페이지
를 생성합니다.
제목 : 쇼핑카 转 점프 목록 페이지 |
사이드 헤드 : 사진, 설명, 단가, 선택사항, 기타 컨텐츠 등 다양한 정보 이름 표시 : 선택 제품 정보 및 운영 |
|
총 가격 표시 <h2>를 사용하여 장바구니 제목을 정의하고 <table>을 사용하여 HTML 테이블을 정의합니다.
<thead>는 테이블 헤더를 표시하고, <tr> 요소는 테이블 행을 정의하며, <th> 요소는 그림, 설명, 수량, 단가, 소계, 작업 등을 포함하는 테이블 헤더를 정의합니다. |
<tbody> 테이블 콘텐츠 부분을 표시합니다. <tr><td> 요소는 테이블 단위를 정의하고 제품 콘텐츠를 표시합니다. | <button> 태그를 사용하여 "+" 및 "-" 버튼을 만들고 중간에 <input type="text">를 사용하여 수량을 표시합니다. |
총 가격은 하단 표 외부에 표시됩니다. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<!--购物车样式表-->
<style>
h2{
text-align: center;
}
table{
margin: auto;
width: 90%;
border-color: inherit;
}
th{
color: white;
font-weight: bold;
font-family: 微软雅黑,宋体;
}
img{
height: 60%;
display: block;
margin: auto;
}
input{
text-align: center;
font-weight: bold;
}
button{
font-weight: bold;
font-size: 13px;
}
</style>
</head>
<body>
<div class="container">
<h2>购物车</h2>
<h3><a href="list.php">返回商品列表页面</a></h3>
<table id="table" border="1" cellspacing="0" cellpadding="0" class="hide">
<thead>
<tr style="background-color: #87adbf;">
<th>
<input type="checkbox" id="allCheck" class="ck" />全选
</th>
<th>图片</th>
<th>描述</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<!--
<tr>
<td><input type="checkbox" class="ck" /></td>
<td>
<img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" />
</td>
<td>纯机械，超酷表带</td>
<td>
<button style="width:100%;"class="down">-</button>
<input style="width:100%;" type="text" value="1" readonly="readonly" />
<button class="up">+</button>
</td>
<td>￥<span>3567</span></td>
<td>￥<span>3567</span></td>
<td><button class="del">删除</button></td>
</tr>
-->
</tbody>
</table>
<div class="box" id="box"></div>
<h2 id="h2" class="">总价格：￥<span id="totalPrice">0</span></h2>
</div>
</body>
</html>
이렇게 해서 간단한 장바구니 페이지 cart.php 파일을 만들었습니다.
다음 섹션
