一、购物车页面演示
.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<link href="css/common.css" rel="stylesheet"/>
<link href="css/cart.css" rel="stylesheet"/>
</head>
<body>
<div class="all">
<iframe class="iheader" src="header.html"></iframe>
<div class="cars">
<table>
<tr class="tr1">
<th>商品名称</th>
<th>市场价</th>
<th>定购价</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr class="tra">
<td>
<a><img src="img/ico_checkout.png" style="width: 20px;height: 20px;margin-top: 15px;"/></a>
<span><img src="img/cake1_s1.jpg" style="width: 100px;height: 80px; margin-top: -20px;"/></span>
<span>[悦轩饼家蛋糕]榴芒双拼(约2磅)一双拼蛋糕</span>
</td>
<td><p style="text-decoration: line-through; text-align: center;">¥298</p></td>
<td style="text-align: center;">¥198</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">删除</td>
</tr>
<tr class="tra">
<td>
<a><img src="img/ico_checkout.png" style="width: 20px;height: 20px;margin-top: 15px;"/></a>
<span><img src="img/cake2.jpg" style="width: 100px;height: 80px; margin-top: -20px;"/></span>
<span>[悦轩饼家蛋糕]芒果千层(900g)</span>
</td>
<td><p style="text-decoration: line-through; text-align: center;">¥289</p></td>
<td style="text-align: center;">¥169</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">删除</td>
</tr>
<tr class="tra">
<td>
<a><img src="img/ico_unchecked.png" style="width: 20px;height: 20px;margin-top: 15px;"/></a>
<span><img src="img/cake3.jpg" style="width: 100px;height: 80px; margin-top: -20px;"/></span>
<span>[悦轩饼家蛋糕]榴莲香雪(约2磅)一榴莲蛋糕</span>
</td>
<td><p style="text-decoration: line-through; text-align: center;">¥260</p></td>
<td style="text-align: center;">¥149</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">删除</td>
</tr>
</table>
</div>
<div class="carx">
<p class="carje" style="font-size: 12px;">应付金额:<span style="color: orange;font-weight: bold;">¥565</span>
<a style="color: aliceblue;font-weight: bold;width: 50px; height: 50px;
background-color: orange;border: 1px solid orangered;width: 50px;height: 48px;font-size: 19px;">去结算</a>
</p>
</div>
<iframe class="ifooter" src="footer.html"></iframe>
</div>
</body>
</html>
.css
.all{
width:1300px;
margin: auto;
/* border: 1px solid red; */
}
.iheader{
height: 80px;
}
iframe{
width: 1230px;
}
#carbig{
border: 1px dashed beige;
width: 1100px;
/* line-height: 800PX; */
}
table {
font-size: 12px;
border: 1px dashed black;
width: 1200px;
height: 400px;
/* text-align: center; */
border-collapse: collapse;
}
table th{
/* border: 1px solid black; */
/* text-align: center; */
}
table th td {
/* text-align: center; */
/* border: 1px blue solid; */
}
table tr td{
/* border: 1px solid black; */
/* text-align: center; */
}
table tr{
border: 1px dashed gainsboro;
}
.carx{
border: 1px dashed gainsboro;
width: 1200px;
line-height: 50px;
margin-top: 10px;
/* line-height: 50px; */
}
.all .carx .carje{
text-align:end;
}
.all .cars .tr1{
border: 1px dashed gainsboro;
background-color: gray;
}
二、表单知识点
(1)、表单
(1)、why:在页面里,需要通过表单装载数据,然后才能把数据提交给服务器
(2)、how
1、表单元素:form、input(text、button、checkbox、button、select、option、table)
(1)下拉框select常用属性:size=n:可以看到多行 数据选项;
multiple:可以选择多行数据选项
(2)、HTML5里的新标签元素:feildset:类十余winform里的grop;
datalist 可以自定义输入文本的下拉框
(3)、文本框:placeh0lder属性,用来进行文本输入提示语
三、购物车实现效果