Pembangunan JavaScript halaman senarai produk troli beli-belah

Bahagian ini mencipta halaman senarai produk untuk memaparkan nama produk, harga produk, penerangan produk, butang tambah pada troli beli-belah dan imej produk. dan Lompat ke pautan Troli<a>

Teg <dl> digunakan di sini untuk menentukan senarai produk, <dt> teg mentakrifkan imej produk dalam senarai, <dd> penerangan dalam senarai,

Harga produk.

Reka letak adalah serupa dengan yang berikut:

< td width=" 114" valign="top">
< td width="129" valign="top" rowspan="4" colspan="1" style="word-break: break-all;">... ............< br/>< /tbody>

... >

Lompat ke pautan halaman troli beli-belah

标题：商品列表页
跳转购物车页面链接
图片商品名称1 商品描述商品价格 "加入购物车"按键	图片商品名称2 商品描述商品价格 "加入购物车"按键	......... 商品名称3 ......... ................ ................	...................

Gambar

Nama Produk 1

Penerangan Produk

Harga produk

<🎜><🎜>Butang "Tambah ke troli"<🎜>

<🎜>Gambar<🎜><🎜>Nama Produk 2<🎜><🎜>Penerangan Produk<🎜> <🎜>Harga Produk<🎜><🎜>
<🎜><🎜>Butang "Tambah ke troli"<🎜>

<🎜>.....<🎜><🎜>Nama produk 3<🎜><🎜>..... .<🎜 ><🎜>............<🎜><🎜>
<🎜><🎜>..... .....<🎜>

<🎜><🎜>Gunakan CSS untuk membuat beberapa pelarasan gaya. <🎜><🎜><🎜>Kod paparan lengkap adalah seperti berikut: <🎜>rreee<🎜>Ini melengkapkan langkah pertama dan mencipta halaman paparan produk HTML. <🎜>bahagian seterusnya

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik