-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdetails.html
125 lines (123 loc) · 5.58 KB
/
details.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
<!DOCTYPE html>
<html>
<head>
<title>详情列表页</title>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/public.css"/>
<link rel="stylesheet" href="css/details.css"/>
</head>
<body>
<div class="details">
<!-- 头部 -->
<div class="xf_header">
<header>
<a href="index.html">
<img src="img/logo_big01.png" alt="logo">
</a>
<div class="city">
<img src="img/icon-address.png" alt="icon-address">
<span>北京市</span>
<a href="#">切换城市</a>
</div>
<nav> <!--这里可以直接用Nav标签做优化-->
<a href="#">全部</a>
<a href="#">蛋糕</a>
<a href="#">下午茶</a>
<a href="#">手信</a>
<a href="#">团购预约</a>
<a href="#">关于我们</a>
</nav>
<div class="link">
<img src="img/i-search.jpg" alt="搜索">
<img src="img/i-cart.jpg" alt="购物车">
<img src="img/i-user.jpg" alt="登录注册">
<a href="#">联系我们</a>
</div>
</header>
</div>
<div class="xf_content">
<div class="content clear">
<ul class="clear"> <!--使用common里写好的clear消除子元素对父级的影响-->
<li>
<img src="img/cake1.jpg" alt="一号蛋糕">
<p>榴莲季：爆浆榴榴</p>
<p>￥99.00</p>
</li>
<li>
<img src="img/cake1.jpg" alt="一号蛋糕">
<p>榴莲季：爆浆榴榴</p>
<p>￥99.00</p>
</li>
<li>
<img src="img/cake1.jpg" alt="一号蛋糕">
<p>榴莲季：爆浆榴榴</p>
<p>￥99.00</p>
</li>
<li>
<img src="img/cake1.jpg" alt="一号蛋糕">
<p>榴莲季：爆浆榴榴</p>
<p>￥99.00</p>
</li>
<li>
<img src="img/cake1.jpg" alt="一号蛋糕">
<p>榴莲季：爆浆榴榴</p>
<p>￥99.00</p>
</li>
<li>
<img src="img/cake1.jpg" alt="一号蛋糕">
<p>榴莲季：爆浆榴榴</p>
<p>￥99.00</p>
</li>
<li>
<img src="img/cake1.jpg" alt="一号蛋糕">
<p>榴莲季：爆浆榴榴</p>
<p>￥99.00</p>
</li>
<li>
<img src="img/cake1.jpg" alt="一号蛋糕">
<p>榴莲季：爆浆榴榴</p>
<p>￥99.00</p>
</li>
</ul>
<div class="page clear">
<img src="img/arrow_03.jpg" alt="上翻页箭头">
<span>1</span>
<img src="img/arrow_05.jpg" alt="下翻页箭头">
</div>
</div>
</div>
<div class="xf_footer"> <!--脚注部分显示不出来的原因是把footer放在了box外边，因为无法显示-->
<footer>
<div class="footer1">
<div class="msg">
<a href="#">品牌动态</a>
<a href="#">生产经营资质</a>
<a href="#">企业合作</a>
<a href="#">发票申请</a>
<a href="#">平台规则</a>
<a href="#">联系我们</a>
<a href="#">售后客服</a>
</div>
<div class="tel">
<a href="#">
<img src="img/tel_03.jpg" alt="">
<span>892377</span>
</a>
<a href="#">WEIBO</a>
<a href="#">WEIXIN</a>
<a href="#">WEWE</a>
<a href="#">WEWE</a>
</div>
</div>
<div class="footer2">
<div class="copyright">
<span>深圳市幸福商城科技股份有限公司</span>
<span>粤ICP备16039394号</span>
<span>京公网安备44030702002399</span>
<span>公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业区A座5楼</span>
</div> <!--copyright的命名适合底部-->
</div>
</footer>
</div>
</body>
</html>