HTML淘宝购物车页面的实现
一、實驗目的和要求
本實驗任務用HTML基本標簽制作一個簡單的淘寶購物車頁面，具體要求如下：
二、 實驗原理
三、 主要儀器設備、試劑或材料
Windows10操作系統、WebStorm
四、 實驗方法與步驟
<!DOCTYPE html>
<html lang="en">
<head>
??? <meta charset="UTF-8">
??? <title>淘寶購物車</title>
</head>
<body>
<div id="logo" style="float:left;" >
??? <img? height="60" width="160" padding="10" src="images/taobao_logo.png" alt="logo">
</div>
<div id="grabble" style="height: 80px;width: 500px;float: right; ">
??? <br>
??? <form width="400px" height="60px" id="sousuo" action="http://www.taobao.com" method="get" name="搜索功能">
????? <input width="400px" height="60px" type="text" name="sousuo"/><input type="submit" value="搜索">
??? </form>
</div>
<div id="fudong" style="height:80px;width:400px;">
</div>
<div id="content">
??? <table width="95%" border="0">
??????? <caption >
??????????? <p align="left">購物車（全部3）</p></caption>
??????? <thead height="70">
??????? <th>
??????????? <input id="allCheckBox" type="checkbox" value="全選"/>全選
??????? </th>
??????? <th width="25%" > 商品信息</th>
??????? <th width="20%"> </th>
??????? <th width="10%">單價</th>
??????? <th width="10%">數量</th>
??????? <th width="10%">金額</th>
??????? <th width="10%">操作</th>
??????? </thead>
??????? <tbody >
??????? <tr height="50">
??????????? <td >店鋪：<a href="https://stylenanda3ce.tmall.com/shop/view_shop.htm?spm=a1z0d.6639537.1997196601.77.7b207484vHbnNJ&user_number_id=4260076097"> 3CE官方旗艦店</a></td>
??????????? <td colspan="6">優惠券</td>
??????? </tr>
??????? <tr bgcolor="D3D3D3" height="150">
??????????? <td>
??????????? <input id="checkbox1" type="checkbox" value="選擇"/>
??????????? <img src="images/3ce1.png" width="100px">
??????????? </td>
??????????? <td>
??????????????? <a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.80.7b207484vHbnNJ&id=631873305236&sku_properties=122276315:3289490"> 【直播節熱賣】3CE絲絨唇釉唇泥 霧面顯白保濕啞光慕斯口紅玳瑁色 </a>
??????????? </td>
??????????? <td>
??????????????? 顏色分類：【熱賣色】絲絨唇釉#DAFFODIL 「豆沙紅」
?? ?????????????款式：基本款
??????????? </td>
??????????? <td>￥110.00</td>
??????????? <td>1</td>
??????????? <td>
??????????????? <input id="num1" type="text"? value="110.00" readonly/>
??????????? </td>
??????????? <td><a href="#">移入收藏夾</a><br>
??????????? <a href="#">刪除</a></td>
??????? </tr>
??????? </tbody>
??????? <tbody >
??????? <tr height="50">
??????????? <td >店鋪：<a href="https://chioture.tmall.com/shop/view_shop.htm?spm=a1z0d.6639537.1997196601.363.7b207484vHbnNJ&user_number_id=776151038"> 稚優泉化妝品旗艦店</a></td>
??????????? <td colspan="6">優惠券</td>
??????? </tr>
??????? <tr bgcolor="D3D3D3" height="150">
??????????? <td>
??????????????? <input id="checkbox2" type="checkbox" value="選擇"/>
??????????????? <img src="images/zhiyouquan.png" width="100px">
??????????? </td>
??????????? <td>
??????????????? <a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.366.7b207484vHbnNJ&id=566736402567"> 稚優泉卸妝水眼唇臉三合一卸妝乳油膏敏感肌專用臉部溫和清潔正品</a>
??????????? </td>
??????????? <td>
??????????????? 凈含量：300ml
??????????? </td>
??????????? <td>￥59.90</td>
??????????? <td>2</td>
??????????? <td>
??????????????? <input id="num2" type="text"? value="119.80" readonly/>
??????????? </td>
??????????? <td><a href="#">移入收藏夾</a><br>
??????????????? <a href="#">刪除</a></td>
??????? </tr>
??????? </tbody>
??????? <tbody >
??????? <tr height="50">
??????????? <td >店鋪：<a href="https://shop141214248.taobao.com/shop/view_shop.htm?spm=a1z0d.6639537.1997196601.1.7b207484p2WKyN&user_number_id=2708019236"> 文文包袋廠</a></td>
??????????? <td colspan="6">優惠券</td>
??????? </tr>
??????? <tr bgcolor="D3D3D3" height="150">
??????????? <td >
??????????????? <input id="checkbox3" type="checkbox" value="選擇"/>
??????????????? <img src="images/bag.png" width="100px">
??????????? </td>
??????????? <td>
??????????????? <a href="https://item.taobao.com/item.htm?spm=a1z0d.6639537.1997196601.4.7b207484p2WKyN&id=595241703012"> 【新勢力周】大容量書包女韓版高中森系可愛簡約日系雙肩包女學生ins校園原宿 </a>
??????????? </td>
??????????? <td>
??????????????? 顏色分類：灰色小號 不帶蛙哥 放14寸電腦
??????????? </td>
??????????? <td>￥49.00</td>
??????????? <td>1</td>
??????????? <td>
??????????????? <input id="num1" type="text"? value="49.00" readonly/>
??????????? </td>
??????????? <td><a href="#">移入收藏夾</a><br>
??????????????? <a href="#">刪除</a></td>
??????? </tr>
??????? </tbody>
??????? <tfoot>
??????? <tr>
??????????? <td height="130"? colspan="2" align="left">
??????????????? <input id="allCheck" type="checkbox" value="全選"/>全選
??????????????? <a href="#">移入收藏夾</a>   <a href="#">刪除</a></td>
??????????? </td>
??????????? <td colspan="5" align="right">
??????????????? 已選商品
??????????????? <input type="text" value="0" readonly>件
??????????????? 合計（不含運費）:<input type="text" value="0.00" readonly> 元
??????????????? <a href="https://buy.tmall.com/order/confirm_order.htm?spm=a1z0d.6639537.0.0.undefined">結算</a>
??????????? </td>
??????? </tr>
??????? </tfoot>
??? </table>
</div>
<div id="list">
??? <p align="center">關于淘寶 幫助中心 開放平臺 誠聘英才 聯系我們 網站合作 法律聲明 隱私權政策 知識產權 廉正舉報 規則意見征集</p>
??? <p align="center">阿里巴巴集團 | 淘寶網 | 天貓 | 聚劃算 | 全球速賣通 | 阿里巴巴國際交易市場 | 1688 | 阿里媽媽 | 飛豬 | 阿里云計算 | AliOS | 阿里通信 | 萬網 | 高德 | UC | 友盟 | 蝦米 | 釘釘 | 支付寶</p>
??? <p align="center">增值電信業務經營許可證： 浙B2-20110446</p>
??? <p align="center">網絡文化經營許可證：浙網文[2015]0295-065號</p>
??? <p align="center">12318舉報</p>
??? <p align="center">出版物網絡交易平臺服務經營備案證： 新出發浙備字第001號</p>
??? <p align="center">互聯網違法和不良信息舉報電話：0571-81683755 blxxjb@alibaba-inc.com</p>
??? <p align="center">互聯網藥品信息服務資質證書編號：浙-（經營性）-2017-0005</p>
??? <p align="center">浙公網安備 33010002000120號</p>
??? <p align="center">（浙）網械平臺備字[2018]第00002號</p>
??? <p align="center"> 2003-2019 TMALL.COM 版權所有</p>
??? </div>
</body>
</html>
五、 實驗數據記錄、處理及結果分析
實驗截圖：
?
六、注意
1.注意浮動方面的問題，以及清除浮動的方式。網上也有很全的方法，不用局限于一種。
2.由于實現的頁面簡單，很多功能無法實現，有的鏈接也沒有實現可跳轉的頁面，所以可以設置空連接。
3.僅采用html的基礎代碼，不包含CSS和JS，很簡單，但也缺乏很對功能。需要后期完善補充。
4.涉及到一些文字、圖像、超鏈接、<div>、表格，表單，布局等一系列知識。有便于鞏固基礎。
七、寫在最后
有問題可評論區或私信聯系，歡迎交流
總結
以上是生活随笔為你收集整理的HTML淘宝购物车页面的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 制作淘宝界面的简易框架
- 下一篇： 前端报错Unknown custom e