???? ?? ?? ??? JavaScript ??
? ????? ?? ??, ?? ??, ?? ??, ????? ?? ?? ? ?? ???? ???? ?? ?? ???? ?????. ???? <a>? ?????.
????? <dl> ??? ?? ??? ???? ? ????, <dt> ??? ??? ?? ???? ????, <dd> ??? ?? ??, ?? ??,
??? ?????. ??? ?? ??.下 ????? ??? ?????.
??? 1 ?? ?? ?? ??
| ???? ?? 2 ?? ?? ?? ??
| ........??? 3 ...... .....
| |
?? ?? ??? ??? ????.
<!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>??? ?? ? ?? ??? ???? HTML ?? ?? ???? ?????.
