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

標(biāo)題：商品列表頁
跳轉(zhuǎn)購物車頁面鏈接
圖片商品名稱1 商品描述商品價(jià)格 "加入購物車"按鍵	圖片商品名稱2 商品描述商品價(jià)格 "加入購物車"按鍵	......... 商品名稱3 ......... ................ ................	...................

Gambar

Nama Produk 1

Penerangan Produk

Harga produk

Butang "Tambah ke troli"

GambarNama Produk 2Penerangan Produk Harga Produk
Butang "Tambah ke troli"

.....Nama produk 3..... .............
..... .....

Gunakan CSS untuk membuat beberapa pelarasan gaya. Kod paparan lengkap adalah seperti berikut: rreeeIni melengkapkan langkah pertama dan mencipta halaman paparan produk HTML.

Meneruskan pembelajaran

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">純機(jī)械，超酷表帶</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">智能手機(jī)</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