简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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. <🎜>
Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492184 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！