JavaScript開發(fā)購物車之商品列表頁
本節(jié)創(chuàng)建一個商品列表頁，用來展示商品的名稱，商品價格，商品描述，添加到購物車按鍵，商品圖片。以及跳轉(zhuǎn)到購物車<a>鏈接。
這里使用了<dl>標簽來定義商品列表，<dt>標簽定義列表中的商品圖片，<dd>標簽描述列表中的商品名稱，商品描述，
商品價格。
布局類似如下：
| ? ? ? ? ? ? ? ? ? ? ? ? ? ? 標題：商品列表頁 | |||
| 跳轉(zhuǎn)購物車頁面鏈接 | |||
圖片 商品名稱1 商品描述 商品價格 "加入購物車"按鍵 | 圖片 商品名稱2 商品描述 商品價格 "加入購物車"按鍵 | ......... 商品名稱3 ......... ................ ................ | ................... |
使用CSS進行一些樣式調(diào)整。
完整展示代碼如下：
<!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;
}
.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>這樣就完成了第一步，創(chuàng)建了一個HTML商品展示頁面。
