一个静态淘宝购物车网页练习
话不多说，直接上代码！
<!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>
效果如下：
805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
