1 Star 0 Fork 0

王风宝/SUPERMAKET

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
购物车(2).html 9.98 KB
一键复制 编辑 原始数据 按行查看 历史
王风宝 提交于 2020-05-08 17:13 . WEB基础参赛项目,荣获三等奖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/style2.css" />
<style>
.arrow{
width:32px ;
height: 32px;
background-image: url(img/arrow.png);
position: fixed;
top: 90%;
right: 20px;
z-index: 11;
}
*{
margin: 0px;
padding: 0px;
list-style-type: none;
text-decoration: none;
color: #000000;
}
.heard{
width: 100%;
height: 200px;
}
.heard-top{
width: 100%;
height: 50px;
background-color: #000000;
}
.heard-top div{
width: 1200px;
height: 50px;
margin: auto;
/*border: 1px solid white;*/
}
.heard-top div img{
width: 200px;
height: 50px;
float: left;
}
.heard-top div ul li a{
width: 100px;
height: 50px;
float: right;
color: #FFFFFF;
line-height: 50px;
text-align: center;
}
.heard-top div ul li:hover a{
color: #FE9126;
transition: all 1s;
}
/*顶部黑色导航栏*/
.heard-cen{
width: 100%;
height: 100px;
background-color: white;
}
.heard-cen div{
width: 1200px;
height:100px;
/*border: 1px solid;*/
position: relative;
margin: auto;
}
.heard-cen div h1{
margin: auto;
width: 500px;
height: 100px;
font-size: 50px;
line-height: 100px;
color: #FE9126;
}
.heard-cen div input{
width: 250px;
height: 40px;
font-size: 30px;
position:absolute;
top: 30px;
right: 70px;
}
.heard-cen div span{
width: 40px;
height: 40px;
float: right;
position: absolute;
top: 30px;
right:20px;
border: 1px solid;
background-position-x: -12px;
background-position-y: 53px;
background-image:url(img/sousuo.png) ;
}
.heard-cen div span:hover{
background-image: url(img/sss.png);
}
/*中间白色导航带搜索框*/
.heard-bot{
width: 100%;
height: 50px;
background-color: #FE9126;
}
.h-b-d{
width: 1200px;
height:50px;
margin: auto;
/*border: 1px solid;*/
position: relative;
}
.index{
width: 200px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
/*border: 1px solid;*/
}
.one{
width:200px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
cursor: pointer;
/*border: 1px solid;*/
}
.two{
display: none;
width: 200px;
height: 250px;
background-color: white;
z-index: 4;
position: relative;
box-shadow: 0px 0px 5px;
/*border: 1px solid;*/
}
.two ol li a{
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
display: block;
color: #999999;
}
.two ol li:hover a{
color: #FE9126;
box-shadow: 0px 0px 5px;
}
.one:hover .two{
display: block;
}
/*导航栏结束可以复制*/
.bottom{
width: 100%;
height: 300px;
text-align: center;
background-color: #2B2A2A;
}
.bottom img{
width: 400px;
height:90px;
margin-top: 100px;
}
.bottom a{
width: 100%;
min-height: 50px;
line-height: 50px;
text-align: center;
color: white;
display: block;
}
/*默认*/
.body{
width: 100%;
height: 750px;
margin: auto;
margin-top: 70px;
position: relative;
}
</style>
</head>
<!--
作者:王风宝
时间:2019-11-22
描述:购物车
-->
<body>
<div class="heard"><!--顶部导航-->
<a href="#DINGBU" class="arrow"></a>
<div class="heard-top">
<div>
<img src="img/logo.png" /><a name="DINGBU">
<ul>
<li><a href="购物车(2).html">购物车</a></li>
<li><a href="登录(2).html">登录</a></li>
<li><a href="注册(2).html">注册</a></li>
<li><a href="关于(2).html">关于</a></li>
</ul></a>
</div>
</div><!--顶部黑色-->
<div class="heard-cen">
<div>
<h1>SUPER MARKET</h1>
<input type="text" />
<span></span>
</div>
</div>
<div class="heard-bot">
<div class="h-b-d">
<ul>
<li class="index"><a href="index.html">首页</a></li>
<li class="one">
<p>水果</p>
<div class="two">
<ol>
<li><a href="水果(2).html">春季水果</a></li>
<li><a href="水果(2).html">夏季水果</a></li>
<li><a href="水果(2).html">冬季水果</a></li>
<li><a href="水果(2).html">秋季水果</a></li>
</ol>
</div>
</li>
<li class="one">
<p>蔬菜</p>
<div class="two">
<ol>
<li><a href="蔬菜.html">青菜</a></li>
<li><a href="蔬菜.html">干菜</a></li>
<li><a href="蔬菜.html">肉类</a></li>
<li><a href="蔬菜.html">海鲜</a></li>
</ol>
</div>
</li>
<li class="one">
<p>零食</p>
<div class="two">
<ol>
<li><a href="零食(2).html">坚果</a></li>
<li><a href="零食(2).html">辣条</a></li>
<li><a href="零食(2).html">饼干</a></li>
<li><a href="零食(2).html">干果</a></li>
</ol>
</div>
</li>
<li class="one">
<p>生活用品</p>
<div class="two">
<ol>
<li><a href="生活用品(2).html">餐具</a></li>
<li><a href="生活用品(2).html">家具</a></li>
<li><a href="生活用品(2).html">卫浴</a></li>
<li><a href="生活用品(2).html">服饰</a></li>
</ol>
</div>
</li>
<li class="one">
<a href="每日推荐2.html">每日特价</a>
</li>
</ul>
</div>
</div>
</div>
<!--顶部导航结束-->
<div class="body">
<div class="shopping-car-container">
<div class="car-headers-menu">
<div class="row">
<div class="col-md-1 car-menu">
<label><input type="checkbox" id="check-goods-all" /><span id="checkAll">全选</span></label>
</div>
<div class="col-md-3 car-menu">商品信息</div>
<div class="col-md-3 car-menu">商品参数</div>
<div class="col-md-1 car-menu">单价</div>
<div class="col-md-1 car-menu">数量</div>
<div class="col-md-1 car-menu">金额</div>
<div class="col-md-2 car-menu">操作</div>
</div>
</div>
<div class="goods-content">
<!--goods display-->
</div>
<div class="panel panel-default">
<div class="panel-body bottom-menu-include">
<div class="col-md-1 check-all-bottom bottom-menu">
<label>
<input type="checkbox" id="checked-all-bottom" />
<span id="checkAllBottom">全选</span>
</label>
</div>
<div class="col-md-1 bottom-menu">
<span id="deleteMulty">
删除
</span>
</div>
<div class="col-md-6 bottom-menu">
</div>
<div class="col-md-2 bottom-menu">
<span>已选商品 <span id="selectGoodsCount">0</span></span>
</div>
<div class="col-md-1 bottom-menu">
<span>合计:<span id="selectGoodsMoney">0.00</span></span>
</div>
<div class="col-md-1 bottom-menu submitData submitDis">
结算
</div>
</div>
</div>
<!--删除确认弹框-->
<div class="modal fade" tabindex="-1" role="dialog" id="deleteItemTip" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
</div>
<div class="modal-body">
确认删除此商品?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary deleteSure">确定</button>
</div>
</div>
</div>
</div>
<!--是否勾选商品提示-->
<div class="modal fade" tabindex="-1" role="dialog" id="selectItemTip" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
</div>
<div class="modal-body">
请选择要删除的商品!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<!--批量删除商品-->
<div class="modal fade" tabindex="-1" role="dialog" id="deleteMultyTip" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
</div>
<div class="modal-body">
确认删除选择的商品!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary deleteMultySure">确定</button>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<img src="img/logo2.png" />
<a href="#DINGBU">返回顶部</a>
</div>
</body>
<script type="text/javascript" src="js/jquery.min2.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/WangFengbao/SUPERMAKET.git
[email protected]:WangFengbao/SUPERMAKET.git
WangFengbao
SUPERMAKET
SUPERMAKET
master

搜索帮助