HTML淘宝购物车页面的实现
一、實驗?zāi)康暮鸵?/strong>
本實驗任務(wù)用HTML基本標簽制作一個簡單的淘寶購物車頁面，具體要求如下：
二、 實驗原理
三、 主要儀器設(shè)備、試劑或材料
Windows10操作系統(tǒng)、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%">數(shù)量</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">優(yōu)惠券</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"> 【直播節(jié)熱賣】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"> 稚優(yōu)泉化妝品旗艦店</a></td>
??????????? <td colspan="6">優(yōu)惠券</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"> 稚優(yōu)泉卸妝水眼唇臉三合一卸妝乳油膏敏感肌專用臉部溫和清潔正品</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">優(yōu)惠券</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"> 【新勢力周】大容量書包女韓版高中森系可愛簡約日系雙肩包女學(xué)生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">結(jié)算</a>
??????????? </td>
??????? </tr>
??????? </tfoot>
??? </table>
</div>
<div id="list">
??? <p align="center">關(guān)于淘寶 幫助中心 開放平臺 誠聘英才 聯(lián)系我們 網(wǎng)站合作 法律聲明 隱私權(quán)政策 知識產(chǎn)權(quán) 廉正舉報 規(guī)則意見征集</p>
??? <p align="center">阿里巴巴集團 | 淘寶網(wǎng) | 天貓 | 聚劃算 | 全球速賣通 | 阿里巴巴國際交易市場 | 1688 | 阿里媽媽 | 飛豬 | 阿里云計算 | AliOS | 阿里通信 | 萬網(wǎng) | 高德 | UC | 友盟 | 蝦米 | 釘釘 | 支付寶</p>
??? <p align="center">增值電信業(yè)務(wù)經(jīng)營許可證： 浙B2-20110446</p>
??? <p align="center">網(wǎng)絡(luò)文化經(jīng)營許可證：浙網(wǎng)文[2015]0295-065號</p>
??? <p align="center">12318舉報</p>
??? <p align="center">出版物網(wǎng)絡(luò)交易平臺服務(wù)經(jīng)營備案證： 新出發(fā)浙備字第001號</p>
??? <p align="center">互聯(lián)網(wǎng)違法和不良信息舉報電話：0571-81683755 blxxjb@alibaba-inc.com</p>
??? <p align="center">互聯(lián)網(wǎng)藥品信息服務(wù)資質(zhì)證書編號：浙-（經(jīng)營性）-2017-0005</p>
??? <p align="center">浙公網(wǎng)安備 33010002000120號</p>
??? <p align="center">（浙）網(wǎng)械平臺備字[2018]第00002號</p>
??? <p align="center"> 2003-2019 TMALL.COM 版權(quán)所有</p>
??? </div>
</body>
</html>
五、 實驗數(shù)據(jù)記錄、處理及結(jié)果分析
實驗截圖：
?
六、注意
1.注意浮動方面的問題，以及清除浮動的方式。網(wǎng)上也有很全的方法，不用局限于一種。
2.由于實現(xiàn)的頁面簡單，很多功能無法實現(xiàn)，有的鏈接也沒有實現(xiàn)可跳轉(zhuǎn)的頁面，所以可以設(shè)置空連接。
3.僅采用html的基礎(chǔ)代碼，不包含CSS和JS，很簡單，但也缺乏很對功能。需要后期完善補充。
4.涉及到一些文字、圖像、超鏈接、<div>、表格，表單，布局等一系列知識。有便于鞏固基礎(chǔ)。
七、寫在最后
有問題可評論區(qū)或私信聯(lián)系，歡迎交流
總結(jié)
以上是生活随笔為你收集整理的HTML淘宝购物车页面的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 制作淘宝界面的简易框架
- 下一篇： 前端报错Unknown custom e