-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdetail.html
175 lines (175 loc) · 9.3 KB
/
detail.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jane Shopping</title>
<link rel="stylesheet" href="styles/reset.css"/>
<link rel="stylesheet" href="styles/common.css"/>
<link rel="stylesheet" href="styles/detail.css"/>
<link rel="stylesheet" href="skin/skin_0.css" id="cssFile"/>
<script src="scripts/jquery-1.12.3.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<script src="scripts/jquery.cookie.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/jqzoom.js"></script>
<script src="scripts/detail.js"></script>
</head>
<body>
<div id="header">
<div class="contWidth">
<div class="header-top">
<div class="header-logo"><h1>Jane Shop</h1></div>
<div class="search">
<input type="text" id="inputSearch" value="请输入商品名称"/>
</div>
<ul id="skin">
<li id="skin_0" class="selected"><a href=""></a></li>
<li id="skin_1"><a href=""></a></li>
<li id="skin_2"><a href=""></a></li>
<li id="skin_3"><a href=""></a></li>
<li id="skin_4"><a href=""></a></li>
<li id="skin_5"><a href=""></a></li>
</ul>
</div>
<div class="mainNav" id="header-nav">
<ul>
<li class="first"><a href="">首页</a></li>
<li class="first"><a href="">推荐品牌</a>
<ul>
<li><h5>品牌:</h5><a href="">耐克</a><a href="">阿迪达斯</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">阿迪达斯</a><a href="">耐克</a><a href="">达芙妮</a><a href="">耐克</a><a href="">耐克</a></li>
<li class="hr"></li>
<li><h5></h5><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a></li>
</ul>
</li>
<li class="first"><a href="">男装</a>
<ul>
<li><h5>品牌:</h5><a href="">耐克</a><a href="">阿迪达斯</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">阿迪达斯</a><a href="">耐克</a><a href="">达芙妮</a><a href="">耐克</a><a href="">耐克</a></li>
<li class="hr"></li>
<li><h5></h5><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a></li>
</ul>
</li>
<li class="first"><a href="">女装</a>
<ul>
<li><h5>品牌:</h5><a href="">耐克</a><a href="">阿迪达斯</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">阿迪达斯</a><a href="">耐克</a><a href="">达芙妮</a><a href="">耐克</a><a href="">耐克</a></li>
<li class="hr"></li>
<li><h5></h5><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a></li>
</ul>
</li>
<li class="first"><a href="">鞋包配饰</a>
<ul>
<li><h5>品牌:</h5><a href="">耐克</a><a href="">阿迪达斯</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">阿迪达斯</a><a href="">耐克</a><a href="">达芙妮</a><a href="">耐克</a><a href="">耐克</a></li>
<li class="hr"></li>
<li><h5></h5><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a><a href="">耐克</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="allProducts">
<div class="allProducts-header"><span><strong>商品分类</strong></span></div>
<h5>推荐品牌</h5>
<ul>
<li class="promoted"><a href="">耐克</a></li>
<li><a href="">阿迪达斯</a></li>
<li><a href="">达芙妮</a></li>
<li class="promoted"><a href="">李宁</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
</ul>
<h5>推荐品牌</h5>
<ul>
<li class="promoted"><a href="">耐克</a></li>
<li><a href="">阿迪达斯</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">李宁</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
</ul>
<h5>推荐品牌</h5>
<ul>
<li><a href="">耐克</a></li>
<li class="promoted"><a href="">阿迪达斯</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">李宁</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
</ul>
<h5>推荐品牌</h5>
<ul>
<li><a href="">耐克</a></li>
<li><a href="">阿迪达斯</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">李宁</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
<li><a href="">达芙妮</a></li>
</ul>
</div>
<div class="productDetail">
<div class="photo">
<div class="big">
<img src="images/detail.jpg" alt=""/>
<button class="bigger">点击放大图片</button>
</div>
<div class="small">
<img src="images/smallDetail.jpg" alt=""/>
<img src="images/smallDetail.jpg" alt=""/>
<img src="images/smallDetail.jpg" alt=""/>
</div>
</div>
<div class="information">
<ul>
<li><a href="">产品属性</a></li>
<li><a href="">产品尺码表</a></li>
<li><a href="">产品介绍</a></li>
</ul>
<div class="textInformation">
<p>实现方式：1、黑色颜色填充，各种方法下透明设置，ok实现效果（之前整理的代码提及到），但是加上文字后，发现文字也变透明了，（依照上面所说）背景来个rgb颜色，但是浏览器不兼容（现在没有找到合适的方法</p>
</div>
</div>
</div>
<div class="selectProduct">
<h4>免烫高支棉条纹衬衫</h4>
<p><strong>实现方式：1、黑色颜色填充，各种方法下透明设置，ok实现效果（之前整理的代码提及到），但是加上文字后，发现文字也变透明了，（依照上面所说）背景来个rgb颜色，但是浏览器不兼容（现在没有找到合适的方法</strong></p>
<p class="oldPrice"><span>价 格：</span><i>669.00</i> 元</p>
<p class="newPrice"><span>促 销：</span><i>200.00</i> 元</p>
<p><span>颜 色：</span><i>蓝 白</i></p>
<ul class="color">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<p class="size"><span>尺 寸：</span><i>未选择</i></p>
<ul class="size">
<li><a href="">S</a></li>
<li><a href="">L</a></li>
<li><a href="">XL</a></li>
<li><a href="">XXL</a></li>
</ul>
<p class="num"><span>数 量：</span></p>
<select name="number" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<p><span>总 计：</span><i>200元</i></p>
<p>给商品评分：</p>
<p class="star"><span></span><span></span><span></span><span></span><span></span></p>
<button class="productCar">放入购物车</button>
</div>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</body>
</html>