一个静态淘宝购物车网页练习
生活随笔
收集整理的這篇文章主要介紹了
一个静态淘宝购物车网页练习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一個靜態淘寶購物車網頁練習
話不多說，直接上代碼！
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;width: 1903px;}body{background-image: url(img/背景.png);background-repeat: repeat-y;overflow-x: hidden;background-size: cover;font:12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;}a{text-decoration: none;}.top a:link{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋體, sans-serif;color: #6c6c6c;}.top a:visited{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋體, sans-serif;color: #6c6c6c;}.top a:hover{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋體, sans-serif;color: #ff5100;}.top{height: 36px;background-color: #f5f5f5;border-bottom: 1px solid #eee;}.toplength{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋體, sans-serif;color: #6c6c6c;margin: 0 auto;width: 1190px;height: 35px;}.top .left{width: 243.38px;height: 35px;display: inline-block;float: left;}.top .left .userli{display: inline-block;line-height: 35px;width: 85.38px;padding: 0px 6px; }.top .left li{display: inline-block;float: left;line-height: 35px;width: 79px;padding: 0px 6px;}.top .left .userbg{background-image: url(img/下.png);background-position: 67px 8px;background-repeat: no-repeat;}.top .right{width: 632.59px;height: 35px;display: inline-block;float: right;}.top .right #mytaobao{background-image: url(img/下.png);background-position: 60.5px 8px;background-repeat: no-repeat;}.top .right li{display: inline-block;float: left;line-height: 35px;width: 79px;padding: 0px 6px;}.top .right #goods{width: 72px;height: 35px;}.top .right #favorite{width: 84px;}.top .right #shop{width: 112px;}.top .right #shu{width: 14.59px;padding: 0px 5px;color: #DDDDDD;}.top .right #seller{width: 103px;}.shopcar{width: 53px;height: 35px;margin: 0px 7px 0px 0px;display: inline-block;}.shopcarlogo{width: 17px;height: 35px;background-image: url(img/購物車.png);background-position: -3px 4px;background-repeat: no-repeat;display: inline-block;vertical-align: middle;}.shopcar #car{display: inline-block;width: 36px;height: 35px;}/* Taobao logo以及搜索框的樣式*/.Tbsl{background-color: #fff;height: 80px;margin: 0px 0px 24px;}.Tbsl #local{width: 1190px;height: 80px;margin: 0px auto;padding: 11px 0px;}.Tbsl #logo{display: block;width: 142px;background-image: url(img/淘寶logo.png);background-size: 142px 58px;float: left;margin: 0px 0px 0px -26px;padding: 58px 0px 0px;background-repeat: no-repeat;}.Tbsl #select{width: 424px;height: 42px;margin-top: 8px;border-radius: 21px;float: right;font-size: 12px;font-weight: 400;line-height: 18px;display: inline-block;background-color: #EBEBEB;}.Tbsl #select #ul{border-radius: 21px 0px 0px 21px;background-color: #F5F5F5;width: 106px;height: 42px;border-right: 1px solid #f5f5f5;border-left: 1px solid #f5f5f5;display: inline-block;float: left;}.Tbsl #select li{display: inline-block;width: 104px;height: 45px;}.Tbsl #select a{display: inline-block;width: 104px;height: 45px;line-height: 45px;text-align: center;}#select #floatleft{width: 320px;height: 42px;display: inline-block;position: absolute;}#floatleft #text{width: 236px;height: 42px;margin-right: 4px;display: inline-block;float: left;background-color: #EBEBEB;border: none;outline: none;}#floatleft #submitbg{background-color: #EBEBEB;}#floatleft #submit{display: inline-block;float: left;width: 81px;height: 38px;margin: 0px 0px 0px 2px;border-radius: 38px;border: none;background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;font-size: 18px;color: white;background-repeat: repeat-x;font-weight: 700;cursor: pointer;line-height: 38px;margin: 2px 0px;}.cbody{width: 1903px;height: 100%;}.cbody #bodylocal{width: 1190px;height: 100%;margin: 0px auto;border-radius: 24px;background-color: #FFFFFF;}#bodylocal #overview{padding: 0px 18px;width: 1190px;height: 73px;border-bottom: 1px solid rgb(230,230,230);}#overview #overleft{display: inline-block;color: #000;font-size: 18px;font-weight: 600;height: 72px;line-height: 72px;width: auto;}#overview #overright{display: inline-block;width: auto;height: 72px;line-height: 72px;float: right;}#overright #rightone{font-size: 14px;position: relative;top:-2px;}#overright #righttwo{font-family: Verdana,Arial;font-size: 22px;padding-left: 2px;font-weight: 500;font-style: normal;color: #FF5000;margin-right: 12px;margin-left: 4.22px;}#overright #settle{display: inline-block;width: 74px;height: 42px;line-height: 42px;background-color: #AAAAAA;border-radius: 21px;color: white;text-align: center;font-size: 16px;position: relative;top:-2px;text-decoration: none;}#listname{display: inline-block;width: 100%;height: 50px;line-height: 50px;font-size: 13px;font-weight: 700;color: #3C3C3C;}#listname #one{float: left;width: 80px;margin-right: -38px;margin-left: 8px;}#listname #two{float: left;width: 342px;padding-left: 117px;}#listname #three{float: left;width: 212px;padding-left: 10px;margin-right: 42px;}#listname #four{float: left;width: 130px;padding-left: 10px;}#listname #five{float: left;width: 120px;padding-left: 10px;}#listname #six{float: left;width: 140px;}#listname #seven{float: left;width: 102px;padding-left: 30px;}#one #all{width: 15px;height: 15px;line-height: 50px;position: relative;margin-left: 20px;vertical-align: text-bottom;margin-bottom: 1px;}#one #text{width: auto;}#commodity{height: auto;width: 1190px;}#commodity #storeone{display: inline-block;height: 38px;line-height: 38px;padding-left: 15px;}#storeone #one{display: inline-block;width: 15px;height: 15px;vertical-align: text-bottom;}#storeone #two{display: inline-block;width: 16px;height: 16px;background-image: url(img/來源標準.png);background-repeat: no-repeat;background-position: -20px -105px;margin: -6px 6px 0px 0px;vertical-align: text-bottom;}#storeone #three{color: #3C3C3C;font-size: 12px;font-weight: 400;}#storeone #four{display: inline-block;width: 20px;height: 20px;background-image: url(img/聯系水滴.gif);background-repeat: no-repeat;background-position: -80px 0;vertical-align: text-bottom;margin-left: 15px;}#goodsone{display: inline-block;width: 1140px;height: auto;margin: 0px 24px;border: 1px solid #F5F5F5;border-radius: 18px;background-color: #F5F5F5;margin-bottom: 15px;}#goodsone #list{display: inline-block;width: 1140px;height: 41px;padding: 9px 0px 3px 0px;border-bottom: 1px solid #e8e8e8;color: #6C6C6C;}#list #one{display: inline-block;width: 50px;height: 24px;line-height: 41px;float: left;}#list #two{display: inline-block;width: auto;height: 22px;background-color: #e7e7e7;padding: 0px 8px;margin-right: 15px;float: left;}#list #three{display: inline-block;float: left;width: auto;height: 20px;}#three #threetext{color: #f40;width: auto;display: inline-block;font-family: verdana;line-height: 22px;}#goodsone #information{width: 1140px;}#information #goodslist{display: inline-block;float: left;padding-right: 12px;height: auto;width: auto;}#goodslist li{display: inline-block;float: left;width: auto;min-height: 119px;}#goodslist #choicediv{display: inline-block;float: left;width: 50px;height: 102px;padding-top: 20px;}#choicediv #choice{display: inline-block;width: 15px;height: 15px;float: right;margin: 1px 10px 0px 0px;}#goodslist #imagediv{display: block;width: 342px;padding-top: 20px;}#imagediv #image{display: block;width: 80px;height: 80px;background-image: url(./img/商品圖標.jpg);background-repeat: no-repeat;float: left;}#goodslist #namediv{display: block;width: 239px;height: auto;margin-left: 91px;margin-top: -3px;padding-right: 12px;}#namediv #name{display: block;width: 239px;height: 40px;color: #3C3C3C;}#namediv #emp{display: block;width: 239px;height: 26px;}#namediv #serve{display: block;width: 239px;height: 26.73px;background-image: url(img/xcard.png),url(img/7天退換.png),url(img/消費者保障.png);background-repeat: no-repeat;background-position: left center,18px center,36px center;margin-bottom: 3px;}#goodslist #empdiv{display: block;width: 212px;height: 118px;padding: 16px 8px 16px 0px;border: 1px dashed transparent;}#goodslist #price{display: block;width: 130px;height: 54px;font-family: Verdana,Tahoma,arial;font-weight: 700;color: #3C3C3C;padding:20px 0px 0px 10px;}#goodslist #numbdiv{display: block;width: 120px;height: 45px;padding-top: 20px;left: 0px;}#numbdiv #button_sub{width: 19px;height: 25px;float: left;border: 1px solid #e5e5e5;border-left-color: transparent;}#numbdiv #numb{display: block;width: 41px;height: 25px;float: left;text-indent: 15px;appearance: none;border: 1px solid #AAAAAA;}#numbdiv #button_add{width: 19px;height: 25px;float: left;border: 1px solid #e5e5e5;border-left-color: transparent;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}#goodslist #amountprice{display: block;width: 140px;height: 35px;padding-top: 16px;color: #F40;font-style: normal;font-family: Verdana,Tahoma,arial;font-weight: 700;}#goodslist #aperatediv{display: block;width: 102px;height: 119px;padding-left: 30px;padding-top: 17px;float: left;}.cbody a:link{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋體, sans-serif;color: #3C3C3C;}.cbody a:visited{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋體, sans-serif;color: #3C3C3C;}.cbody a:hover{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋體, sans-serif;color: #ff5100;text-decoration: underline;}#fixed_bottomdiv{position: static;display: block;width: 1190px;height: 73px;border-top: 1px solid #e6e6e6;}#local_bottomdiv{display: block;width: 1142px;height: 73px;margin: 0px auto;}#local_bottomdiv #one{display: block;width: 67px;height: 72px;padding-left: 5px;float: left;line-height: 72px;}#one #choice{display: inline-block;width: 15px;height: 15px;vertical-align: text-bottom;line-height: 72px;}#local_bottomdiv #two{display: block;width: 200px;height: 72px;float: left;}#two a{display: block;line-height: 72px;width: auto;height: 72px;margin-left: 25px;float: left;color: #3C3C3C;}#local_bottomdiv #rightdiv{display:block;height: 48px;width: auto;padding-left: 20px;float: right;}#rightdiv #three{display: block;height: 48px;width: auto;float: left;line-height: 72px;}#rightdiv #four{display: block;height: 48px;width: 29px;float: left;line-height: 72px;}#rightdiv #five{display: block;height: 48px;width: auto;float: left;line-height: 72px;}#rightdiv #six{display: inline-block;width: 74px;height: 42px;background: #B0B0B0;line-height: 42px;color: #fff;border-radius: 21px;text-align: center;font-size: 16px;font-family: 'Lantinghei SC','Microsoft Yahei';float: left;margin: 15.5px 0px;}#local_bottomdiv #numb{color: #f40;font-weight: 700;font-size: 20px;font-family: tohoma,arial;padding: 0px 5px;}.xiamian{display: block;width: 1903px;height: auto;background-color: #fff;text-align: center;margin-top: 20px;color: #6C6C6C;}.xiamian #textone{display: inline-block;width: 1190px;height: auto;padding-bottom: 8px;}</style></head><body><caption><div class="top"><!-- 這是網頁頂部的盒子 --><div class="toplength"><!-- 這是包裝列表的盒子 --><ul class="left"><li class="userli userbg"><a href="#">用戶名</a></li><li><a href="#">手機逛淘寶</a></li><li><a href="#">網頁無障礙</a></li></ul><ul class="right"><li><a href="#">淘寶網首頁</a></li><li id="mytaobao"><a href="#">我的淘寶</a> </li><li id="goods"><div class="shopcar"><div class="shopcarlogo"></div><a href="#" id="car">購物車</a></div></li><li id="favorite"><a href="#"> 收藏夾</a></li><li id="shop"><a href="#">商品分類</a> <a href="#">免費開店</a></li><li id="shu">|</li><li id="seller"><a href="#">千牛賣家中心</a></li><li><a href="#">聯系客服</a></li></ul></div></div></caption><thead><div class="Tbsl"><!-- Taobao和搜索的背景盒子 --><div id="local"><!-- Taobao和搜索的盒子 --><a id="logo"></a><!-- Taobao LOGO --><div id="select"><!-- 搜索框的盒子 --><ul id="ul"><!-- 搜索欄左側 寶貝 --><li><a><span>🔍 </span>寶貝<span> </span></a></li></ul><div id="floatleft"><form action="#" method=""><input id="text" type="text" name="select" style="text-indent: 3px" style="font-size: 25px;"/><input id="submit" type="submit" value="搜索"/></form></div></div></div></div></thead><tbody><div class="cbody"><div id="bodylocal"><div id="overview"><!-- 這個是上面的結算部分 --><span id="overleft">購物車（全部3）</span><div id="overright"><!-- 已選商品 價格 結算 --><span id="rightone">已選商品（不含運費）</span><em id="righttwo">0.00</em><a id="settle">結 算</a></div></div><div id="listname"><!-- 全選購物車，列名等 --><div id="one"><!-- 全選 --><input type="checkbox" id="all"/><span id="text"> 全選</span></div><div id="two"><!-- 商品信息 -->商品信息</div><div id="three"><!-- 占位 --> </div><div id="four"><!-- 單價 -->單價</div><div id="five"><!-- 數量 -->數量</div><div id="six"><!-- 金額 -->金額</div><div id="seven"><!-- 操作 -->操作</div></div><div id="commodity"><!-- 商品部分 ------------------><!-- ---------------------------------------重復該部分可以添加不同商店的商品---------------------------------------------------------- --><div id="storeone"><!-- 店鋪信息 --><input type="checkbox" name="" id="one"/> <span id="two"></span><span id="three">店鋪: 機械工業出版社旗</span><a id="four"></a></div><!-- ---------------------------------------------------- --><div id="goodsone"><!-- 商品信息 --><div id="list"><!-- 商品是否包郵等優惠信息 --><div id="one"></div><div id="two"><span>38元包郵</span></div><div id="three"><div id="threetext">已享優惠:包郵</div><span> 滿38,包郵</span></div></div><div id="information"><!-- 商品圖片、商品名等等 --><ul id="goodslist"><li><div id="choicediv"><input type="checkbox" id="choice"/></div></li><li><div id="imagediv"><div id="image"></div><div id="namediv"><div id="name">官網正版 數據結構與算法分析Java語言描述原書第3版 馬克 艾倫 維斯 計算機科學叢書</div><!-- 商品名 --><div id="emp"></div><div id="serve"></div><!-- 小圖標 --></div></div></li><li><div id="empdiv"></div><!-- 占位 --></li><li><div id="price">￥44.85</div><!-- 價格 --></li><li><div id="numbdiv"><button type="button" id="button_sub"></button><input type="number" value="1" id="numb" data-max="999999" data-min="1" autocomplete="off"/><button type="button" id="button_add">+</button></div><!-- 數量 --></li><li><div id="amountprice">￥44.85</div><!-- 金額 --></li><li><div id="aperatediv"><a href="#">移入收藏夾</a><a href="#">刪除</a></div><!-- 操作 --></li></ul></div></div><!-- -------------------------------------------------------------------------------------------------------------------------- --><!-- ---------------------------------------重復該部分可以添加不同商店的商品---------------------------------------------------------- --><div id="storeone"><!-- 店鋪信息 --><input type="checkbox" name="" id="one"/> <span id="two"></span><span id="three">店鋪: 機械工業出版社旗</span><a id="four"></a></div><!-- ---------------------------------------------------- --><div id="goodsone"><!-- 商品信息 --><div id="list"><!-- 商品是否包郵等優惠信息 --><div id="one"></div><div id="two"><span>38元包郵</span></div><div id="three"><div id="threetext">已享優惠:包郵</div><span> 滿38,包郵</span></div></div><div id="information"><!-- 商品圖片、商品名等等 --><ul id="goodslist"><li><div id="choicediv"><input type="checkbox" id="choice"/></div></li><li><div id="imagediv"><div id="image"></div><div id="namediv"><div id="name">官網正版 數據結構與算法分析Java語言描述原書第3版 馬克 艾倫 維斯 計算機科學叢書</div><!-- 商品名 --><div id="emp"></div><div id="serve"></div><!-- 小圖標 --></div></div></li><li><div id="empdiv"></div><!-- 占位 --></li><li><div id="price">￥44.85</div><!-- 價格 --></li><li><div id="numbdiv"><button type="button" id="button_sub"></button><input type="number" value="1" id="numb" data-max="999999" data-min="1" autocomplete="off"/><button type="button" id="button_add">+</button></div><!-- 數量 --></li><li><div id="amountprice">￥44.85</div><!-- 金額 --></li><li><div id="aperatediv"><a href="#">移入收藏夾</a><a href="#">刪除</a></div><!-- 操作 --></li></ul></div></div><!-- -------------------------------------------------------------------------------------------------------------------------- --><!-- ---------------------------------------重復該部分可以添加不同商店的商品---------------------------------------------------------- --><div id="storeone"><!-- 店鋪信息 --><input type="checkbox" name="" id="one"/> <span id="two"></span><span id="three">店鋪: 機械工業出版社旗</span><a id="four"></a></div><!-- ---------------------------------------------------- --><div id="goodsone"><!-- 商品信息 --><div id="list"><!-- 商品是否包郵等優惠信息 --><div id="one"></div><div id="two"><span>38元包郵</span></div><div id="three"><div id="threetext">已享優惠:包郵</div><span> 滿38,包郵</span></div></div><div id="information"><!-- 商品圖片、商品名等等 --><ul id="goodslist"><li><div id="choicediv"><input type="checkbox" id="choice"/></div></li><li><div id="imagediv"><div id="image"></div><div id="namediv"><div id="name">官網正版 數據結構與算法分析Java語言描述原書第3版 馬克 艾倫 維斯 計算機科學叢書</div><!-- 商品名 --><div id="emp"></div><div id="serve"></div><!-- 小圖標 --></div></div></li><li><div id="empdiv"></div><!-- 占位 --></li><li><div id="price">￥44.85</div><!-- 價格 --></li><li><div id="numbdiv"><button type="button" id="button_sub"></button><input type="number" value="1" id="numb" data-max="999999" data-min="1" autocomplete="off"/><button type="button" id="button_add">+</button></div><!-- 數量 --></li><li><div id="amountprice">￥44.85</div><!-- 金額 --></li><li><div id="aperatediv"><a href="#">移入收藏夾</a><a href="#">刪除</a></div><!-- 操作 --></li></ul></div></div><!-- -------------------------------------------------------------------------------------------------------------------------- --></div><div id="fixed_bottomdiv"><!-- 下面的結算條部分 --><div id="local_bottomdiv"><div id="one"><!-- 全選 --><input type="checkbox" id="choice"/><span>全選</span></div><div id="two"><!-- 操作 --><a href="#">刪除</a><a href="#">移入收藏夾</a></div><div id="rightdiv"><!-- 結算 --><div id="three">已選商品<span id="numb">0</span>件</div><div id="four"><!-- 占位 --></div><div id="five">合計（不含運費）：<span id="numb">0.00</span></div><div id="six">結 算</div></div></div></div></div></div></tbody><tfoot><div class="xiamian"><p id="textone">© 2003-現在 Taobao.com 版權所有</p></div></tfoot></body> </html>效果如下：
總結
以上是生活随笔為你收集整理的一个静态淘宝购物车网页练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页游戏分线到不分线
- 下一篇： dSPACE 卸载