一个静态淘宝购物车网页练习
话不多说，直接上代码！
<!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>
效果如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/38120.html
