このセクションでは、商品寫真、商品內(nèi)容の説明、商品數(shù)量の選択、商品単価
商品価格の小計(jì)、商品削除操作、商品合計(jì)価格の計(jì)算を表示するショッピングカート表示ページ
を作成します。 ?
|
內(nèi)容: 選択された製品情報(bào)と操作| |
| 合計(jì)価格を表示
| <h2>を使用してショッピングカートのタイトルを定義します <table> HTML テーブルを定義します。
はテーブルのヘッダーを表示し、 要素はテーブルの行を定義し、| 要素は畫像、説明、數(shù)量、小計(jì)、操作などを定義します。 tbody> テーブルのコンテンツ部分を表示します。 <tr><td> 要素はテーブルの単位を定義し、製品のコンテンツを表示します。 <button> タグを使用して「+」と「-」ボタンを作成し、真ん中の <input type="text"> を使用して數(shù)量を表示します。 | 合計(jì)金額は下部の表の外側(cè)に表示されます。 <!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>數(shù)量</th>
<th>單價(jià)</th>
<th>小計(jì)</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>純機(jī)械，超酷表帶</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="">總價(jià)格：￥<span id="totalPrice">0</span></h2>
</div>
</body>
</html> | このようにして、単純なショッピング カート ページの cart.php ファイルが作成されました。
<!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>數(shù)量</th>
<th>單價(jià)</th>
<th>小計(jì)</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>純機(jī)械，超酷表帶</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="">總價(jià)格：￥<span id="totalPrice">0</span></h2>
</div>
</body>
</html>
現(xiàn)時(shí)點(diǎn)ではコースウェアはダウンロードできません。現(xiàn)在スタッフが整理中です。今後もこのコースにもっと注目してください?
このコースを視聴した生徒はこちらも學(xué)んでいます
|
