forked from qufei1993/Examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
stepBox.html
executable file
·155 lines (155 loc) · 5.69 KB
/
stepBox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>电商网站</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="headerBar">
<div class="topBar">
<div class="comWidth">
<div class="leftArea">
<a href="#" class="collection">收藏慕课</a>
</div>
<div class="rightArea">
欢迎来到慕课网!<a href="">[登录]</a><a href="">[免费注册]</a>
</div>
</div>
</div><!-- topBar结束 -->
<div class="logoBar ">
<div class="comWidth">
<div class="logo fl">
<a href="#"><img src="images/logo.png" alt="慕课网"></a>
</div>
<div class="stepBox fr">
<div class="step"></div>
<ul class="step_text clearfix">
<li class="s01 active">我的购物车</li>
<li class="s02 active">填写核对订单</li>
<li class="s03">订单提交成功</li>
</ul>
</div>
</div>
</div><!-- logoBar结束 -->
</div><!-- headerBar结束 -->
<div class="hr_15"></div>
<div class="shoppingCart comWidth">
<div class="shopping_item">
<h3 class="shopping_tit">商品介绍</h3>
<div class="shopping_cont padding_shop">
<ul class="shopping_list">
<li>
<span class="shopping_list_text"><em>*</em>选择地区:</span>
<div class="select">
<h3>海淀区五环内</h3><span></span>
<ul class="show_select">
<li>通州</li>
<li>海淀</li>
<li>通州</li>
</ul>
</div>
</li>
<li><span class="shopping_list_text"><em>*</em>详细地址:</span><input type="text" value="最多输入26个汉字" class="input input_b input_color"></li>
<li><span class="shopping_list_text"><em>*</em>收货人:</span><input type="text" value="最多10个汉字" class="input input_color"></li>
<li><span class="shopping_list_text"><em>*</em>手机:</span><input type="text" value="如:18336075895" class="input input_color"> 或固定电话:<input type="text" class="input input_s" value="区号"> - <input type="text" class="input" value="电话号码"> - <input type="text" class="input" value="分机号">
</li>
<li class="shopping_sub"><input type="button" class="affirm" value="确认提交"></li>
</ul>
</div>
</div><!-- 收货信息结束 -->
<div class="hr_15"></div>
<div class="shopping_item">
<h3 class="shopping_tit">支付方式</h3>
<div class="shopping_cont padding_shop">
<ul class="shopping_list">
<li><input type="radio" class="radio" id="r1"><label for="r1">微信支付</label></li>
<li><input type="radio" class="radio" id="r2"><label for="r1">货到付款</label></li>
</ul>
</div>
</div><!-- 支付方式结束 -->
<div class="hr_15"></div>
<div class="shopping_item">
<h3 class="shopping_tit">送货清单<a href="#" class="backCar">返回购物车修改</a></h3>
<div class="shopping_cont pd_bt">
<div class="cart_inner">
<div class="cart_head clearfix">
<div class="cart_item t_name">商品名称</div>
<div class="cart_item t_price">单价</div>
<div class="cart_item t_return">返现</div>
<div class="cart_item t_num">数量</div>
<div class="cart_item t_count">小计</div>
</div>
<div class="cart_cont clearfix">
<div class="cart_item t_name">
<div class="cart_shopInfo clearfix">
<img src="images/des.gif" alt="">
<div class="cart_shopInfo_cont">
<p class="a_link"><a>放到房间爱三分卡萨丁你发生地方</a></p>
<p class="cart_info">司法斯蒂芬水电费按时发生地方</p>
</div>
</div>
</div>
<div class="cart_item t_price">单价</div>
<div class="cart_item t_return">返现</div>
<div class="cart_item t_num">数量</div>
<div class="cart_item t_count t_red">小计</div>
</div>
<div class="cart_message">
若您对包裹有问题,请在此留言
</div>
<div class="cart_prompt">
<i class="cart_prompt_icon"></i>抱歉以下商品无法购买
</div>
<div class="cart_cont car_bor_no clearfix">
<div class="cart_item t_name">
<div class="cart_shopInfo clearfix">
<img src="images/des.gif" alt="">
<div class="cart_shopInfo_cont">
<p class="a_link"><a>放到房间爱三分卡萨丁你发生地方</a></p>
<p class="cart_info">司法斯蒂芬水电费按时发生地方</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- 送货清单结束 -->
<div class="hr_15"></div>
<div class="shopping_item clearfix">
<h3 class="shopping_tit">订单结算</h3>
<div class="shopping_cont padding_shop clearfix">
<div class="cart_count fr">
<div class="cart_rmb">
<i>总计:</i><span>¥1945.00</span>
</div>
<div class="cart_btn_box">
<input type="button" class="cart_btn" value="提交订单">
</div>
</div>
</div>
</div><!-- 订单结算结束 -->
</div>
<div class="hr_15"></div>
<div class="footer"><!-- -->
<p>
<a href="#">网站首页</a><i>|</i>
<a href="#">人才招聘</a><i>|</i>
<a href="#">联系我们</a><i>|</i>
<a href="#">慕课云</a><i>|</i>
<a href="#">关于我们</a><i>|</i>
<a href="#">讲师招募</a><i>|</i>
<a href="#">意见反馈</a><i>|</i>
<a href="#">友情链接</a>
</p>
<p>Copyright © 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
<p class="web">
<a herf="#"><img src="images/weblogo.gif" alt=""></a>
<a herf="#"><img src="images/weblogo.gif" alt=""></a>
<a herf="#"><img src="images/weblogo.gif" alt=""></a>
<a herf="#"><img src="images/weblogo.gif" alt=""></a>
</p>
</div>
</body>
</html>