Authored by microTT

潮流分析 参展品牌 活动咨询 页面修改完成

1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
  3 +
3 <head> 4 <head>
4 <meta charset="UTF-8"> 5 <meta charset="UTF-8">
5 <title>Brands</title> 6 <title>Brands</title>
6 - <link rel="stylesheet" href="../../res/css/index.css"/> 7 + <link rel="stylesheet" href="../../res/css/index.css" />
7 </head> 8 </head>
  9 +
8 <body> 10 <body>
  11 + <!-- 主站导航 start -->
9 <div class="yoho-nav clearfix"> 12 <div class="yoho-nav clearfix">
10 <ul class="clearfix"> 13 <ul class="clearfix">
11 <li> 14 <li>
@@ -35,66 +38,154 @@ @@ -35,66 +38,154 @@
35 </ul> 38 </ul>
36 <a class="contact-btn" href="javascript:;">contact</a> 39 <a class="contact-btn" href="javascript:;">contact</a>
37 </div> 40 </div>
  41 + <!-- 主站导航 end -->c
  42 + <!-- 页眉 start -->
38 <div class="header"> 43 <div class="header">
39 - <h1 class="logo"></h1> 44 + <!-- 页首 logo start -->
  45 + <h1 class="logo">
  46 + <img src="../../res/images/yohood/logo3.0.png">
  47 + </h1>
  48 + <!-- 页首 logo end -->
  49 + <!-- yohood 导航 start -->
40 <div class="nav"> 50 <div class="nav">
41 <ul class="clearfix"> 51 <ul class="clearfix">
  52 + <!-- 单个菜单标签 start -->
42 <li> 53 <li>
43 - <a href="javascript:;">HOME</a>  
44 - <span>首页</span> 54 + <a href="javascript:;">
  55 + <em>HOME</em>
  56 + <span>首页</span>
  57 + <i></i>
  58 + </a>
45 </li> 59 </li>
  60 + <!-- 单个菜单标签 end -->
  61 + <!-- 单个菜单标签 start -->
46 <li> 62 <li>
47 - <a href="javascript:;">ACTIVITY</a>  
48 - <span>活动详情</span>  
49 - </li>  
50 - <li>  
51 - <a href="javascript:;">COUNSEL</a>  
52 - <span>最新资讯</span> 63 + <a href="javascript:;">
  64 + <em>ACTIVITY</em>
  65 + <span>活动资讯</span>
  66 + <i></i>
  67 + </a>
  68 + <!-- 二级菜单 start -->
  69 + <div class="second-menu">
  70 + <a href="javascript:;">
  71 + <em>品牌咨询</em>
  72 + <i></i>
  73 + </a>
  74 + <a href="javascript:;">
  75 + <em>活动介绍</em>
  76 + <i></i>
  77 + </a>
  78 + <a href="javascript:;">
  79 + <em>活动介绍</em>
  80 + <i></i>
  81 + </a>
  82 + <a href="javascript:;">
  83 + <em>亮点活动</em>
  84 + <i></i>
  85 + </a>
  86 + <a href="javascript:;">
  87 + <em>限量商品</em>
  88 + <i></i>
  89 + </a>
  90 + </div>
  91 + <!-- 二级菜单 end -->
53 </li> 92 </li>
  93 + <!-- 单个菜单标签 end -->
  94 + <!-- 单个菜单标签 start -->
54 <li class="current"> 95 <li class="current">
55 - <a href="javascript:;">BRAND</a>  
56 - <span>参展品牌</span>  
57 - </li>  
58 - <li>  
59 - <a href="javascript:;">VIDEO</a>  
60 - <span>热点视频</span> 96 + <a href="javascript:;">
  97 + <em>BRAND</em>
  98 + <span>参展品牌</span>
  99 + <i></i>
  100 + </a>
61 </li> 101 </li>
  102 + <!-- 单个菜单标签 end -->
  103 + <!-- 单个菜单标签 start -->
62 <li> 104 <li>
63 - <a href="javascript:;">RECOMMEND</a>  
64 - <span>限量推荐</span> 105 + <a href="javascript:;">
  106 + <em>VIDEO</em>
  107 + <span>热点视频</span>
  108 + <i></i>
  109 + </a>
65 </li> 110 </li>
  111 + <!-- 单个菜单标签 end -->
  112 + <!-- 单个菜单标签 start -->
66 <li> 113 <li>
67 - <a href="javascript:;">SCENE</a>  
68 - <span>现场活动</span> 114 + <a href="javascript:;">
  115 + <em>REGISTRATION</em>
  116 + <span>在线登记</span>
  117 + <i></i>
  118 + </a>
  119 + <!-- 二级菜单 start -->
  120 + <div class="second-menu">
  121 + <a href="javascript:;">
  122 + <em>参展商登记</em>
  123 + <i></i>
  124 + </a>
  125 + <a href="javascript:;">
  126 + <em>媒体登记</em>
  127 + <i></i>
  128 + </a>
  129 + <a href="javascript:;">
  130 + <em>赞助商登记</em>
  131 + <i></i>
  132 + </a>
  133 + </div>
  134 + <!-- 二级菜单 end -->
69 </li> 135 </li>
  136 + <!-- 单个菜单标签 end -->
  137 + <!-- 单个菜单标签 start -->
70 <li> 138 <li>
71 - <a href="javascript:;">SHOW</a>  
72 - <span>潮流分享</span> 139 + <a href="javascript:;">
  140 + <em>SHOW</em>
  141 + <span>潮流分享</span>
  142 + <i></i>
  143 + </a>
73 </li> 144 </li>
  145 + <!-- 单个菜单标签 end -->
74 </ul> 146 </ul>
75 </div> 147 </div>
  148 + <!-- yohood 导航 end -->
76 </div> 149 </div>
  150 + <!-- 页眉 end -->
77 <div class="bd"> 151 <div class="bd">
78 - <div class="slide-main">  
79 - <div class="slide-box">  
80 - <div class="slide-wrap clearfix">  
81 - <div class="box"><a href="javascript:;"><img src="http://img03.res.yoho.cn/blogimg/2014/09/23/13/0179e17640e29e62b52439902484a8fa50.gif?imageMogr2/thumbnail/!0968x0468r/crop/0968x0468/strip/quality/80" alt=""/></a></div>  
82 - <div class="box"><a href="javascript:;"><img src="http://img03.res.yoho.cn/blogimg/2014/09/23/13/01f0a56c52203da48881a64b336b41091b.jpg?imageMogr2/thumbnail/!0968x0468r/crop/0968x0468/strip/quality/80" alt=""/></a></div>  
83 - <div class="box"><a href="javascript:;"><img src="http://img04.res.yoho.cn/blogimg/2014/11/17/11/025aadd704383ed18365f15a5e1cde9e5d.jpg?imageMogr2/thumbnail/!0968x0468r/crop/0968x0468/strip/quality/80" alt=""/></a></div> 152 + <!-- 页面主体头部轮播广告栏 start -->
  153 + <div class="slide-main clearfix">
  154 + <div class="slide-box-warp">
  155 + <div class="slide-box">
  156 + <div class="slide-wrap clearfix">
  157 + <!-- 单个banner start -->
  158 + <div class="box">
  159 + <a href="javascript:;"><img src="../../res/images/yohood/banner.png" alt="" /></a>
  160 + </div>
  161 + <!-- 单个banner end -->
  162 + <!-- 单个banner start -->
  163 + <div class="box">
  164 + <a href="javascript:;"><img src="../../res/images/yohood/banner.png" alt="" /></a>
  165 + </div>
  166 + <!-- 单个banner end -->
  167 + <!-- 单个banner start -->
  168 + <div class="box">
  169 + <a href="javascript:;"><img src="../../res/images/yohood/banner.png" alt="" /></a>
  170 + </div>
  171 + <!-- 单个banner end -->
  172 + </div>
84 </div> 173 </div>
85 - </div>  
86 - <div class="slide-navigator">  
87 - <div class="dib clearfix">  
88 - <a href="javascript:;" class="on"></a>  
89 - <a href="javascript:;"></a>  
90 - <a href="javascript:;"></a> 174 + <div class="slide-navigator">
  175 + <div class="dib clearfix">
  176 + <a href="javascript:;" class="on"></a>
  177 + <a href="javascript:;"></a>
  178 + <a href="javascript:;"></a>
  179 + </div>
  180 + </div>
  181 + <div class="slide-control">
  182 + <a class="slide-prev iconfont" href="javascript:void(0);">&#xe601;</a>
  183 + <a class="slide-next iconfont" href="javascript:void(0);">&#xe603;</a>
91 </div> 184 </div>
92 - </div>  
93 - <div class="slide-control">  
94 - <a class="slide-prev iconfont" href="javascript:void(0);">&#xe601;</a>  
95 - <a class="slide-next iconfont" href="javascript:void(0);">&#xe603;</a>  
96 </div> 185 </div>
97 </div> 186 </div>
  187 + <!-- 页面主体头部轮播广告栏 end -->
  188 + <!-- 参展品牌页面内容主体 start -->
98 <div class="brand-main"> 189 <div class="brand-main">
99 <div class="search-wrap"> 190 <div class="search-wrap">
100 <input type="text" placeholder="搜索品牌..."> 191 <input type="text" placeholder="搜索品牌...">
@@ -116,226 +207,161 @@ @@ -116,226 +207,161 @@
116 <img src="../../res/images/yohood/cooperation/brand-img.png" alt=""> 207 <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
117 </div> 208 </div>
118 <div class="text"> 209 <div class="text">
119 - <p>早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前</p> 210 + <p>早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前</p>
  211 + </div>
  212 + <div>
120 <a href="javascript:;">进入品牌店铺</a> 213 <a href="javascript:;">进入品牌店铺</a>
121 </div> 214 </div>
122 </div> 215 </div>
123 - <div class="related-post"> 216 + <div class="related-post brand-related-post">
124 <h3>相关资讯</h3> 217 <h3>相关资讯</h3>
125 <div class="post-list main-layout clearfix"> 218 <div class="post-list main-layout clearfix">
126 - <div class="layout-item tiled"> 219 + <!-- 单个资讯碎片 start -->
  220 + <div class="layout-item clearfix">
127 <div class="image-box"> 221 <div class="image-box">
128 <a href="javascript:;"> 222 <a href="javascript:;">
129 - <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="" style="height:230px;width:230px;"> 223 + <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
130 <i class="play-icon"></i> 224 <i class="play-icon"></i>
131 </a> 225 </a>
132 </div> 226 </div>
133 <div class="content"> 227 <div class="content">
134 - <h2 class="volupia">  
135 - <a href="/news/detail/id/169">test</a>  
136 - </h2> 228 + <h2 class="volupia"><a href="/news/detail/id/169">test test test test test test test test test test test</a></h2>
  229 + <p class="time">NovemBer 11,2016</p>
137 </div> 230 </div>
138 </div> 231 </div>
139 - <div class="layout-item tiled"> 232 + <!-- 单个资讯碎片 end -->
  233 + <!-- 单个资讯碎片 start -->
  234 + <div class="layout-item clearfix">
140 <div class="image-box"> 235 <div class="image-box">
141 <a href="javascript:;"> 236 <a href="javascript:;">
142 - <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="" style="height:230px;width:230px;"> 237 + <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
143 <i class="play-icon"></i> 238 <i class="play-icon"></i>
144 </a> 239 </a>
145 </div> 240 </div>
146 <div class="content"> 241 <div class="content">
147 <h2 class="volupia"> 242 <h2 class="volupia">
148 - <a href="/news/detail/id/169">test</a>  
149 - </h2> 243 + <a href="/news/detail/id/169">test test test test</a>
  244 + </h2>
  245 + <p class="time">NovemBer 11,2016</p>
150 </div> 246 </div>
151 </div> 247 </div>
152 - <div class="layout-item tiled"> 248 + <!-- 单个资讯碎片 end -->
  249 + <!-- 单个资讯碎片 start -->
  250 + <div class="layout-item clearfix">
153 <div class="image-box"> 251 <div class="image-box">
154 <a href="javascript:;"> 252 <a href="javascript:;">
155 - <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="" style="height:230px;width:230px;"> 253 + <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
156 <i class="play-icon"></i> 254 <i class="play-icon"></i>
157 </a> 255 </a>
158 </div> 256 </div>
159 <div class="content"> 257 <div class="content">
160 <h2 class="volupia"> 258 <h2 class="volupia">
161 - <a href="/news/detail/id/169">test</a>  
162 - </h2> 259 + <a href="/news/detail/id/169">test test test test</a>
  260 + </h2>
  261 + <p class="time">NovemBer 11,2016</p>
163 </div> 262 </div>
164 </div> 263 </div>
  264 + <!-- 单个资讯碎片 end -->
165 </div> 265 </div>
166 </div> 266 </div>
167 </div> 267 </div>
168 </li> 268 </li>
169 - <li><a href="javascript:;" target="_blank">  
170 - <div class="img-box">  
171 - <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">  
172 - </div>  
173 - <p>004</p>  
174 - </a></li>  
175 - <li><a href="javascript:;" target="_blank">  
176 - <div class="img-box">  
177 - <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">  
178 - </div>  
179 - <p>004</p>  
180 - </a></li>  
181 - <li><a href="javascript:;" target="_blank">  
182 - <div class="img-box">  
183 - <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">  
184 - </div>  
185 - <p>004</p>  
186 - </a></li>  
187 - <li><a href="javascript:;" target="_blank">  
188 - <div class="img-box">  
189 - <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">  
190 - </div>  
191 - <p>004</p>  
192 - </a></li>  
193 - <li><a href="javascript:;" target="_blank">  
194 - <div class="img-box">  
195 - <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">  
196 - </div>  
197 - <p>004</p>  
198 - </a></li>  
199 - <li><a href="javascript:;" target="_blank">  
200 - <div class="img-box">  
201 - <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">  
202 - </div>  
203 - <p>004</p>  
204 - </a></li>  
205 - <li><a href="javascript:;" target="_blank">  
206 - <div class="img-box">  
207 - <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">  
208 - </div>  
209 - <p>004</p>  
210 - </a></li>  
211 - <li><a href="javascript:;" target="_blank">  
212 - <div class="img-box">  
213 - <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">  
214 - </div>  
215 - <p>004</p>  
216 - </a></li> 269 + <li>
  270 + <a href="javascript:;" target="_blank">
  271 + <div class="img-box">
  272 + <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
  273 + </div>
  274 + <p>004</p>
  275 + </a>
  276 + </li>
  277 + <li>
  278 + <a href="javascript:;" target="_blank">
  279 + <div class="img-box">
  280 + <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
  281 + </div>
  282 + <p>004</p>
  283 + </a>
  284 + </li>
  285 + <li>
  286 + <a href="javascript:;" target="_blank">
  287 + <div class="img-box">
  288 + <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
  289 + </div>
  290 + <p>004</p>
  291 + </a>
  292 + </li>
  293 + <li>
  294 + <a href="javascript:;" target="_blank">
  295 + <div class="img-box">
  296 + <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
  297 + </div>
  298 + <p>004</p>
  299 + </a>
  300 + </li>
  301 + <li>
  302 + <a href="javascript:;" target="_blank">
  303 + <div class="img-box">
  304 + <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
  305 + </div>
  306 + <p>004</p>
  307 + </a>
  308 + </li>
  309 + <li>
  310 + <a href="javascript:;" target="_blank">
  311 + <div class="img-box">
  312 + <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
  313 + </div>
  314 + <p>004</p>
  315 + </a>
  316 + </li>
  317 + <li>
  318 + <a href="javascript:;" target="_blank">
  319 + <div class="img-box">
  320 + <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
  321 + </div>
  322 + <p>004</p>
  323 + </a>
  324 + </li>
  325 + <li>
  326 + <a href="javascript:;" target="_blank">
  327 + <div class="img-box">
  328 + <img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
  329 + </div>
  330 + <p>004</p>
  331 + </a>
  332 + </li>
217 </ul> 333 </ul>
218 <div class="no-search"> 334 <div class="no-search">
219 <p>未搜索到“jucy judy”的相关品牌</p> 335 <p>未搜索到“jucy judy”的相关品牌</p>
220 - <a href="javascript:;"><查看全部品牌</a> 336 + <a href="javascript:;">
  337 + <查看全部品牌</a>
221 </div> 338 </div>
222 </div> 339 </div>
223 </div> 340 </div>
  341 + <!-- 参展品牌页面内容主体 end -->
224 </div> 342 </div>
  343 + <!-- 页脚 start -->
225 <div class="ft"> 344 <div class="ft">
226 - <div class="limited-goods">  
227 - <h2>限量商品</h2>  
228 - <div class="limited-slide-box">  
229 - <div class="slide-wrap clearfix">  
230 - <div class="box">  
231 - <ul class="goods-list clearfix">  
232 - <li><a href="javascript:;">  
233 - <div class="img-box">  
234 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
235 - <span class="red">TOP 1</span>  
236 - </div>  
237 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
238 - <p class="price">¥339.00</p>  
239 - </a></li>  
240 - <li><a href="javascript:;">  
241 - <div class="img-box">  
242 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
243 - <span class="red">TOP 2</span>  
244 - </div>  
245 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
246 - <p class="price">¥339.00</p>  
247 - </a></li>  
248 - <li><a href="javascript:;">  
249 - <div class="img-box">  
250 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
251 - <span class="red">TOP 3</span>  
252 - </div>  
253 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
254 - <p class="price">¥339.00</p>  
255 - </a></li>  
256 - <li><a href="javascript:;">  
257 - <div class="img-box">  
258 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
259 - <span>TOP 4</span>  
260 - </div>  
261 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
262 - <p class="price">¥339.00</p>  
263 - </a></li>  
264 - <li><a href="javascript:;">  
265 - <div class="img-box">  
266 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
267 - <span>TOP 5</span>  
268 - </div>  
269 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
270 - <p class="price">¥339.00</p>  
271 - </a></li>  
272 - </ul>  
273 - </div>  
274 - <div class="box">  
275 - <ul class="goods-list clearfix">  
276 - <li><a href="javascript:;">  
277 - <div class="img-box">  
278 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
279 - <span class="red">TOP 1</span>  
280 - </div>  
281 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
282 - <p class="price">¥339.00</p>  
283 - </a></li>  
284 - <li><a href="javascript:;">  
285 - <div class="img-box">  
286 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
287 - <span class="red">TOP 2</span>  
288 - </div>  
289 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
290 - <p class="price">¥339.00</p>  
291 - </a></li>  
292 - <li><a href="javascript:;">  
293 - <div class="img-box">  
294 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
295 - <span class="red">TOP 3</span>  
296 - </div>  
297 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
298 - <p class="price">¥339.00</p>  
299 - </a></li>  
300 - <li><a href="javascript:;">  
301 - <div class="img-box">  
302 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
303 - <span>TOP 4</span>  
304 - </div>  
305 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
306 - <p class="price">¥339.00</p>  
307 - </a></li>  
308 - <li><a href="javascript:;">  
309 - <div class="img-box">  
310 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
311 - <span>TOP 5</span>  
312 - </div>  
313 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
314 - <p class="price">¥339.00</p>  
315 - </a></li>  
316 - </ul>  
317 - </div>  
318 - </div>  
319 - </div>  
320 - <div class="limited-slide-control">  
321 - <a class="limited-slide-prev iconfont" href="javascript:void(0);">&#xe600;</a>  
322 - <a class="limited-slide-next iconfont" href="javascript:void(0);">&#xe602;</a>  
323 - </div>  
324 - </div> 345 + <p class="copyright">
  346 + CopyRight © 2007-2016 南京新与力文化传播有限公司苏ICP备09011225号-11
  347 + </p>
325 </div> 348 </div>
  349 + <!-- 页脚 end -->
  350 + <!-- 返回顶部按钮 start -->
326 <div class="return-top"> 351 <div class="return-top">
327 <a href="javascript:void(0);" id="toTop" class="ifont" style="display: inline;"> 352 <a href="javascript:void(0);" id="toTop" class="ifont" style="display: inline;">
328 - <span class="iconfont">&#xe605;</span>  
329 - TOP 353 + <span class="iconfont">&#xe605;</span>
330 </a> 354 </a>
331 </div> 355 </div>
  356 + <!-- 返回顶部按钮 end -->
332 <div class="overlay"></div> 357 <div class="overlay"></div>
333 </body> 358 </body>
334 <script type="text/javascript" src="../../res/js/lib/seajs.js"></script> 359 <script type="text/javascript" src="../../res/js/lib/seajs.js"></script>
335 <script type="text/javascript"> 360 <script type="text/javascript">
336 - seajs.use(['jquery','channel'],function($,channel){  
337 - channel.common();  
338 - channel.brand();  
339 - }) 361 +seajs.use(['jquery', 'channel'], function($, channel) {
  362 + channel.common();
  363 + channel.brand();
  364 +})
340 </script> 365 </script>
341 -</html>  
  366 +
  367 +</html>
@@ -254,7 +254,7 @@ @@ -254,7 +254,7 @@
254 </div> 254 </div>
255 <div class="content"> 255 <div class="content">
256 <h2 class="volupia"> 256 <h2 class="volupia">
257 - <a href="/news/detail/id/169">test test test test</a> 257 + <a href="/news/detail/id/169">test test test test test test test test</a>
258 </h2> 258 </h2>
259 <p class="time">NovemBer 11,2016</p> 259 <p class="time">NovemBer 11,2016</p>
260 </div> 260 </div>
@@ -161,7 +161,7 @@ @@ -161,7 +161,7 @@
161 </div> 161 </div>
162 <div class="news-main"> 162 <div class="news-main">
163 <!-- 单个资讯类别 start --> 163 <!-- 单个资讯类别 start -->
164 - <div id="allActivity" class="news-content content-main"> 164 + <div class="news-content content-main">
165 <div class="main-layout fluid-list-inner clearfix"> 165 <div class="main-layout fluid-list-inner clearfix">
166 <!-- 单个资讯碎片 start --> 166 <!-- 单个资讯碎片 start -->
167 <div class="fluid-item layout-item tiled"> 167 <div class="fluid-item layout-item tiled">
@@ -171,196 +171,7 @@ @@ -171,196 +171,7 @@
171 </a> 171 </a>
172 </div> 172 </div>
173 <div class="item-info"> 173 <div class="item-info">
174 - <a class="fluid-tag item-tag brand-info" href="#brandInfo">品牌资讯</a>  
175 - <span class="item-time">November 11, 2016</span>  
176 - </div>  
177 - <div class="content">  
178 - <h2 class="volupia">  
179 - <a href="/news/detail/id/169">test test test test test test test test test test test test test </a>  
180 - </h2>  
181 - <p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>  
182 - </div>  
183 - </div>  
184 - <!-- 单个资讯碎片 end -->  
185 - <!-- 单个资讯碎片 start -->  
186 - <div class="fluid-item layout-item tiled">  
187 - <div class="image-box">  
188 - <a href="javascript:;">  
189 - <img src="../../res/images/yohood/center-1-2.png" alt="">  
190 - </a>  
191 - <span class="play-icon"></span>  
192 - </div>  
193 - <div class="item-info">  
194 - <a class="fluid-tag item-tag activity-intro" href="javascript:;">活动介绍</a>  
195 - <span class="item-time">November 11, 2016</span>  
196 - </div>  
197 - <div class="content">  
198 - <h2 class="volupia">  
199 - <a href="/news/detail/id/169">test test test test test test test test </a>  
200 - </h2>  
201 - <p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>  
202 - </div>  
203 - </div>  
204 - <!-- 单个资讯碎片 end -->  
205 - <!-- 单个资讯碎片 start -->  
206 - <div class="fluid-item layout-item tiled">  
207 - <div class="image-box">  
208 - <a href="javascript:;">  
209 - <img src="../../res/images/yohood/center-1-3.png" alt="">  
210 - </a>  
211 - </div>  
212 - <div class="item-info">  
213 - <a class="fluid-tag item-tag spotlight-activity" href="javascript:;">亮点活动</a>  
214 - <span class="item-time">November 11, 2016</span>  
215 - </div>  
216 - <div class="content">  
217 - <h2 class="volupia">  
218 - <a href="/news/detail/id/169">test test test test test test test test test test test test</a>  
219 - </h2>  
220 - <p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>  
221 - </div>  
222 - </div>  
223 - <!-- 单个资讯碎片 end -->  
224 - <!-- 单个资讯碎片 start -->  
225 - <div class="fluid-item layout-item tiled">  
226 - <div class="image-box">  
227 - <a href="javascript:;">  
228 - <img src="../../res/images/yohood/center-2-1.png" alt="">  
229 - </a>  
230 - </div>  
231 - <div class="item-info">  
232 - <a class="fluid-tag item-tag limited-edition" href="javascript:;">限量商品</a>  
233 - <span class="item-time">November 11, 2016</span>  
234 - </div>  
235 - <div class="content">  
236 - <h2 class="volupia">  
237 - <a href="/news/detail/id/169">test test test test test test test test </a>  
238 - </h2>  
239 - <p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>  
240 - </div>  
241 - </div>  
242 - <!-- 单个资讯碎片 end -->  
243 - <!-- 单个资讯碎片 start -->  
244 - <div class="fluid-item layout-item tiled">  
245 - <div class="image-box">  
246 - <a href="javascript:;">  
247 - <img src="../../res/images/yohood/center-2-2.png" alt="">  
248 - </a>  
249 - </div>  
250 - <div class="item-info">  
251 - <a class="fluid-tag item-tag brand-info" href="javascript:;">品牌资讯</a>  
252 - <span class="item-time">November 11, 2016</span>  
253 - </div>  
254 - <div class="content">  
255 - <h2 class="volupia">  
256 - <a href="/news/detail/id/169">test test test test test test test test </a>  
257 - </h2>  
258 - <p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>  
259 - </div>  
260 - </div>  
261 - <!-- 单个资讯碎片 end -->  
262 - <!-- 单个资讯碎片 start -->  
263 - <div class="fluid-item layout-item tiled">  
264 - <div class="image-box">  
265 - <a href="javascript:;">  
266 - <img src="../../res/images/yohood/center-2-3.png" alt="">  
267 - </a>  
268 - </div>  
269 - <div class="item-info">  
270 - <a class="fluid-tag item-tag activity-intro" href="javascript:;">活动介绍</a>  
271 - <span class="item-time">November 11, 2016</span>  
272 - </div>  
273 - <div class="content">  
274 - <h2 class="volupia">  
275 - <a href="/news/detail/id/169">test test test test test test test test </a>  
276 - </h2>  
277 - <p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>  
278 - </div>  
279 - </div>  
280 - <!-- 单个资讯碎片 end -->  
281 - <!-- 单个资讯碎片 start -->  
282 - <div class="fluid-item layout-item tiled">  
283 - <div class="image-box">  
284 - <a href="javascript:;">  
285 - <img src="../../res/images/yohood/center-3-1.png" alt="">  
286 - </a>  
287 - </div>  
288 - <div class="item-info">  
289 - <a class="fluid-tag item-tag spotlight-activity" href="javascript:;">亮点活动</a>  
290 - <span class="item-time">November 11, 2016</span>  
291 - </div>  
292 - <div class="content">  
293 - <h2 class="volupia">  
294 - <a href="/news/detail/id/169">test test test test test test test test </a>  
295 - </h2>  
296 - <p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>  
297 - </div>  
298 - </div>  
299 - <!-- 单个资讯碎片 end -->  
300 - <!-- 单个资讯碎片 start -->  
301 - <div class="fluid-item layout-item tiled">  
302 - <div class="image-box">  
303 - <a href="javascript:;">  
304 - <img src="../../res/images/yohood/center-3-2.png" alt="">  
305 - </a>  
306 - </div>  
307 - <div class="item-info">  
308 - <a class="fluid-tag item-tag limited-edition" href="javascript:;">限量商品</a>  
309 - <span class="item-time">November 11, 2016</span>  
310 - </div>  
311 - <div class="content">  
312 - <h2 class="volupia">  
313 - <a href="/news/detail/id/169">test test test test test test test test </a>  
314 - </h2>  
315 - <p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>  
316 - </div>  
317 - </div>  
318 - <!-- 单个资讯碎片 end -->  
319 - <!-- 单个资讯碎片 start -->  
320 - <div class="fluid-item layout-item tiled">  
321 - <div class="image-box">  
322 - <a href="javascript:;">  
323 - <img src="../../res/images/yohood/center-3-3.png" alt="">  
324 - </a>  
325 - </div>  
326 - <div class="item-info">  
327 - <a class="fluid-tag item-tag brand-info" href="javascript:;">品牌资讯</a>  
328 - <span class="item-time">November 11, 2016</span>  
329 - </div>  
330 - <div class="content">  
331 - <h2 class="volupia">  
332 - <a href="/news/detail/id/169">test test test test test test test test </a>  
333 - </h2>  
334 - <p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>  
335 - </div>  
336 - </div>  
337 - <!-- 单个资讯碎片 end -->  
338 - </div>  
339 - <div id="pageContent" style="text-align: center;" class="pagination">  
340 - <div class="pagination-inner" id="img_page" model="default" rel="">  
341 - <a class="current" p="1">1</a>  
342 - <a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">2</a>  
343 - <a href="http://www.yohood.cn/default/index/page/3" class="link2" p="3">3</a>  
344 - <a href="http://www.yohood.cn/default/index/page/4" class="link2" p="4">4</a>  
345 - <a href="http://www.yohood.cn/default/index/page/5" class="link2" p="5">5</a>  
346 - <a href="http://www.yohood.cn/default/index/page/6" class="link2" p="6">6</a>  
347 - <a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">NEXT ></a>  
348 - </div>  
349 - </div>  
350 - </div>  
351 - <!-- 单个资讯类别 end -->  
352 - <!-- 单个资讯类别 start -->  
353 - <div id="brandInfo" class="news-content content-main">  
354 - <div class="main-layout fluid-list-inner clearfix">  
355 - <!-- 单个资讯碎片 start -->  
356 - <div class="fluid-item layout-item tiled">  
357 - <div class="image-box">  
358 - <a href="javascript:;">  
359 - <img src="../../res/images/yohood/center-1-1.png" alt="">  
360 - </a>  
361 - </div>  
362 - <div class="item-info">  
363 - <a class="fluid-tag item-tag brand-info" href="javascript:;">品牌资讯</a> 174 + <a class="fluid-tag item-tag brand-info" href="javascritp:;">品牌资讯</a>
364 <span class="item-time">November 11, 2016</span> 175 <span class="item-time">November 11, 2016</span>
365 </div> 176 </div>
366 <div class="content"> 177 <div class="content">
@@ -561,6 +372,7 @@ @@ -561,6 +372,7 @@
561 <script type="text/javascript"> 372 <script type="text/javascript">
562 seajs.use(['jquery', 'channel'], function($, channel) { 373 seajs.use(['jquery', 'channel'], function($, channel) {
563 channel.common(); 374 channel.common();
  375 + channel.news();
564 }) 376 })
565 </script> 377 </script>
566 378
1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
  3 +
3 <head> 4 <head>
4 <meta charset="UTF-8"> 5 <meta charset="UTF-8">
5 <title>show</title> 6 <title>show</title>
6 - <link rel="stylesheet" href="../../res/css/index.css"/> 7 + <link rel="stylesheet" href="../../res/css/index.css" />
7 </head> 8 </head>
  9 +
8 <body> 10 <body>
  11 + <!-- 主站导航 start -->
9 <div class="yoho-nav clearfix"> 12 <div class="yoho-nav clearfix">
10 <ul class="clearfix"> 13 <ul class="clearfix">
11 <li> 14 <li>
@@ -35,57 +38,122 @@ @@ -35,57 +38,122 @@
35 </ul> 38 </ul>
36 <a class="contact-btn" href="javascript:;">contact</a> 39 <a class="contact-btn" href="javascript:;">contact</a>
37 </div> 40 </div>
  41 + <!-- 主站导航 end -->c
  42 + <!-- 页眉 start -->
38 <div class="header"> 43 <div class="header">
39 - <h1 class="logo"></h1> 44 + <!-- 页首 logo start -->
  45 + <h1 class="logo">
  46 + <img src="../../res/images/yohood/logo3.0.png">
  47 + </h1>
  48 + <!-- 页首 logo end -->
  49 + <!-- yohood 导航 start -->
40 <div class="nav"> 50 <div class="nav">
41 <ul class="clearfix"> 51 <ul class="clearfix">
  52 + <!-- 单个菜单标签 start -->
42 <li> 53 <li>
43 - <a href="javascript:;">HOME</a>  
44 - <span>首页</span>  
45 - <i></i> 54 + <a href="javascript:;">
  55 + <em>HOME</em>
  56 + <span>首页</span>
  57 + <i></i>
  58 + </a>
46 </li> 59 </li>
  60 + <!-- 单个菜单标签 end -->
  61 + <!-- 单个菜单标签 start -->
47 <li> 62 <li>
48 - <a href="javascript:;">ACTIVITY</a>  
49 - <span>活动详情</span>  
50 - <i></i>  
51 - </li>  
52 - <li>  
53 - <a href="javascript:;">COUNSEL</a>  
54 - <span>最新资讯</span>  
55 - <i></i>  
56 - </li>  
57 - <li>  
58 - <a href="javascript:;">BRAND</a>  
59 - <span>参展品牌</span>  
60 - <i></i> 63 + <a href="javascript:;">
  64 + <em>ACTIVITY</em>
  65 + <span>活动资讯</span>
  66 + <i></i>
  67 + </a>
  68 + <!-- 二级菜单 start -->
  69 + <div class="second-menu">
  70 + <a href="javascript:;">
  71 + <em>品牌咨询</em>
  72 + <i></i>
  73 + </a>
  74 + <a href="javascript:;">
  75 + <em>活动介绍</em>
  76 + <i></i>
  77 + </a>
  78 + <a href="javascript:;">
  79 + <em>活动介绍</em>
  80 + <i></i>
  81 + </a>
  82 + <a href="javascript:;">
  83 + <em>亮点活动</em>
  84 + <i></i>
  85 + </a>
  86 + <a href="javascript:;">
  87 + <em>限量商品</em>
  88 + <i></i>
  89 + </a>
  90 + </div>
  91 + <!-- 二级菜单 end -->
61 </li> 92 </li>
  93 + <!-- 单个菜单标签 end -->
  94 + <!-- 单个菜单标签 start -->
62 <li> 95 <li>
63 - <a href="javascript:;">VIDEO</a>  
64 - <span>热点视频</span>  
65 - <i></i> 96 + <a href="javascript:;">
  97 + <em>BRAND</em>
  98 + <span>参展品牌</span>
  99 + <i></i>
  100 + </a>
66 </li> 101 </li>
  102 + <!-- 单个菜单标签 end -->
  103 + <!-- 单个菜单标签 start -->
67 <li> 104 <li>
68 - <a href="javascript:;">RECOMMEND</a>  
69 - <span>限量推荐</span>  
70 - <i></i> 105 + <a href="javascript:;">
  106 + <em>VIDEO</em>
  107 + <span>热点视频</span>
  108 + <i></i>
  109 + </a>
71 </li> 110 </li>
  111 + <!-- 单个菜单标签 end -->
  112 + <!-- 单个菜单标签 start -->
72 <li> 113 <li>
73 - <a href="javascript:;">SCENE</a>  
74 - <span>现场活动</span>  
75 - <i></i> 114 + <a href="javascript:;">
  115 + <em>REGISTRATION</em>
  116 + <span>在线登记</span>
  117 + <i></i>
  118 + </a>
  119 + <!-- 二级菜单 start -->
  120 + <div class="second-menu">
  121 + <a href="javascript:;">
  122 + <em>参展商登记</em>
  123 + <i></i>
  124 + </a>
  125 + <a href="javascript:;">
  126 + <em>媒体登记</em>
  127 + <i></i>
  128 + </a>
  129 + <a href="javascript:;">
  130 + <em>赞助商登记</em>
  131 + <i></i>
  132 + </a>
  133 + </div>
  134 + <!-- 二级菜单 end -->
76 </li> 135 </li>
  136 + <!-- 单个菜单标签 end -->
  137 + <!-- 单个菜单标签 start -->
77 <li class="current"> 138 <li class="current">
78 - <a href="javascript:;">SHOW</a>  
79 - <span>潮流分享</span>  
80 - <i></i> 139 + <a href="javascript:;">
  140 + <em>SHOW</em>
  141 + <span>潮流分享</span>
  142 + <i></i>
  143 + </a>
81 </li> 144 </li>
  145 + <!-- 单个菜单标签 end -->
82 </ul> 146 </ul>
83 </div> 147 </div>
  148 + <!-- yohood 导航 end -->
84 </div> 149 </div>
  150 + <!-- 页眉 end -->
  151 + <!-- 页面主体 start -->
85 <div class="bd"> 152 <div class="bd">
86 - <h2 class="show-title">#YO'HOOD SHOW#</h2> 153 + <h2 class="show-title">#YO'HOOD SHOW#</h2>
87 <div class="show-wrap clearfix"> 154 <div class="show-wrap clearfix">
88 <div class="main-layout clearfix"> 155 <div class="main-layout clearfix">
  156 + <!-- 单个分享碎片 start -->
89 <div class="layout-item tiled"> 157 <div class="layout-item tiled">
90 <div class="image-box"> 158 <div class="image-box">
91 <a href="javascript:;"> 159 <a href="javascript:;">
@@ -95,10 +163,11 @@ @@ -95,10 +163,11 @@
95 <a class="pic-tip" href="javascript:;">111111111111111</a> 163 <a class="pic-tip" href="javascript:;">111111111111111</a>
96 </div> 164 </div>
97 <div class="content"> 165 <div class="content">
98 - <p>content</p>  
99 - <p class="time">2014.07.25</p> 166 + <p>test test test test test test test test test test</p>
  167 + <p class="time">NovemBer 11,2016</p>
100 </div> 168 </div>
101 </div> 169 </div>
  170 + <!-- 单个分享碎片 end -->
102 <div class="layout-item tiled"> 171 <div class="layout-item tiled">
103 <div class="image-box"> 172 <div class="image-box">
104 <a href="javascript:;"> 173 <a href="javascript:;">
@@ -108,8 +177,8 @@ @@ -108,8 +177,8 @@
108 <a class="pic-tip" href="javascript:;">33</a> 177 <a class="pic-tip" href="javascript:;">33</a>
109 </div> 178 </div>
110 <div class="content"> 179 <div class="content">
111 - <p>contentcontentco ntentconten tcontentc ontentc ontentcontentcontent</p>  
112 - <p class="time">2014.07.25</p> 180 + <p>contentcontentco ntentconten tcontentc ontentc</p>
  181 + <p class="time">NovemBer 11,2016</p>
113 </div> 182 </div>
114 </div> 183 </div>
115 <div class="layout-item tiled"> 184 <div class="layout-item tiled">
@@ -120,7 +189,7 @@ @@ -120,7 +189,7 @@
120 </div> 189 </div>
121 <div class="content"> 190 <div class="content">
122 <p>content</p> 191 <p>content</p>
123 - <p class="time">2014.07.25</p> 192 + <p class="time">NovemBer 11,2016</p>
124 </div> 193 </div>
125 </div> 194 </div>
126 <div class="layout-item tiled"> 195 <div class="layout-item tiled">
@@ -131,7 +200,7 @@ @@ -131,7 +200,7 @@
131 </div> 200 </div>
132 <div class="content"> 201 <div class="content">
133 <p>content</p> 202 <p>content</p>
134 - <p class="time">2014.07.25</p> 203 + <p class="time">NovemBer 11,2016</p>
135 </div> 204 </div>
136 </div> 205 </div>
137 <div class="layout-item tiled"> 206 <div class="layout-item tiled">
@@ -142,7 +211,7 @@ @@ -142,7 +211,7 @@
142 </div> 211 </div>
143 <div class="content"> 212 <div class="content">
144 <p>content</p> 213 <p>content</p>
145 - <p class="time">2014.07.25</p> 214 + <p class="time">NovemBer 11,2016</p>
146 </div> 215 </div>
147 </div> 216 </div>
148 <div class="layout-item tiled"> 217 <div class="layout-item tiled">
@@ -153,7 +222,7 @@ @@ -153,7 +222,7 @@
153 </div> 222 </div>
154 <div class="content"> 223 <div class="content">
155 <p>content</p> 224 <p>content</p>
156 - <p class="time">2014.07.25</p> 225 + <p class="time">NovemBer 11,2016</p>
157 </div> 226 </div>
158 </div> 227 </div>
159 <div class="layout-item tiled"> 228 <div class="layout-item tiled">
@@ -164,7 +233,7 @@ @@ -164,7 +233,7 @@
164 </div> 233 </div>
165 <div class="content"> 234 <div class="content">
166 <p>content</p> 235 <p>content</p>
167 - <p class="time">2014.07.25</p> 236 + <p class="time">NovemBer 11,2016</p>
168 </div> 237 </div>
169 </div> 238 </div>
170 <div class="layout-item tiled"> 239 <div class="layout-item tiled">
@@ -175,7 +244,7 @@ @@ -175,7 +244,7 @@
175 </div> 244 </div>
176 <div class="content"> 245 <div class="content">
177 <p>content</p> 246 <p>content</p>
178 - <p class="time">2014.07.25</p> 247 + <p class="time">NovemBer 11,2016</p>
179 </div> 248 </div>
180 </div> 249 </div>
181 </div> 250 </div>
@@ -187,125 +256,34 @@ @@ -187,125 +256,34 @@
187 <a href="http://www.yohood.cn/default/index/page/4" class="link2" p="4">4</a> 256 <a href="http://www.yohood.cn/default/index/page/4" class="link2" p="4">4</a>
188 <a href="http://www.yohood.cn/default/index/page/5" class="link2" p="5">5</a> 257 <a href="http://www.yohood.cn/default/index/page/5" class="link2" p="5">5</a>
189 <a href="http://www.yohood.cn/default/index/page/6" class="link2" p="6">6</a> 258 <a href="http://www.yohood.cn/default/index/page/6" class="link2" p="6">6</a>
190 - <a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">>></a> 259 + <a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">NEXT ></a>
191 </div> 260 </div>
192 </div> 261 </div>
193 -  
194 </div> 262 </div>
195 </div> 263 </div>
  264 + <!-- 页面主体 end -->
  265 + <!-- 页脚 start -->
196 <div class="ft"> 266 <div class="ft">
197 - <div class="limited-goods">  
198 - <h2>限量商品</h2>  
199 - <div class="limited-slide-box">  
200 - <div class="slide-wrap clearfix">  
201 - <div class="box">  
202 - <ul class="goods-list clearfix">  
203 - <li><a href="javascript:;">  
204 - <div class="img-box">  
205 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
206 - <span class="red">TOP 1</span>  
207 - </div>  
208 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
209 - <p class="price">¥339.00</p>  
210 - </a></li>  
211 - <li><a href="javascript:;">  
212 - <div class="img-box">  
213 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
214 - <span class="red">TOP 2</span>  
215 - </div>  
216 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
217 - <p class="price">¥339.00</p>  
218 - </a></li>  
219 - <li><a href="javascript:;">  
220 - <div class="img-box">  
221 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
222 - <span class="red">TOP 3</span>  
223 - </div>  
224 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
225 - <p class="price">¥339.00</p>  
226 - </a></li>  
227 - <li><a href="javascript:;">  
228 - <div class="img-box">  
229 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
230 - <span>TOP 4</span>  
231 - </div>  
232 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
233 - <p class="price">¥339.00</p>  
234 - </a></li>  
235 - <li><a href="javascript:;">  
236 - <div class="img-box">  
237 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
238 - <span>TOP 5</span>  
239 - </div>  
240 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
241 - <p class="price">¥339.00</p>  
242 - </a></li>  
243 - </ul>  
244 - </div>  
245 - <div class="box">  
246 - <ul class="goods-list clearfix">  
247 - <li><a href="javascript:;">  
248 - <div class="img-box">  
249 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
250 - <span class="red">TOP 1</span>  
251 - </div>  
252 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
253 - <p class="price">¥339.00</p>  
254 - </a></li>  
255 - <li><a href="javascript:;">  
256 - <div class="img-box">  
257 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
258 - <span class="red">TOP 2</span>  
259 - </div>  
260 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
261 - <p class="price">¥339.00</p>  
262 - </a></li>  
263 - <li><a href="javascript:;">  
264 - <div class="img-box">  
265 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
266 - <span class="red">TOP 3</span>  
267 - </div>  
268 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
269 - <p class="price">¥339.00</p>  
270 - </a></li>  
271 - <li><a href="javascript:;">  
272 - <div class="img-box">  
273 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
274 - <span>TOP 4</span>  
275 - </div>  
276 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
277 - <p class="price">¥339.00</p>  
278 - </a></li>  
279 - <li><a href="javascript:;">  
280 - <div class="img-box">  
281 - <img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">  
282 - <span>TOP 5</span>  
283 - </div>  
284 - <p class="goods-name">MACROPUS 暗夜系列双肩背包</p>  
285 - <p class="price">¥339.00</p>  
286 - </a></li>  
287 - </ul>  
288 - </div>  
289 - </div>  
290 - </div>  
291 - <div class="limited-slide-control">  
292 - <a class="limited-slide-prev iconfont" href="javascript:void(0);">&#xe600;</a>  
293 - <a class="limited-slide-next iconfont" href="javascript:void(0);">&#xe602;</a>  
294 - </div>  
295 - </div> 267 + <hr>
  268 + <p class="copyright">
  269 + CopyRight © 2007-2016 南京新与力文化传播有限公司苏ICP备09011225号-11
  270 + </p>
296 </div> 271 </div>
  272 + <!-- 页脚 end -->
  273 + <!-- 返回顶部按钮 start -->
297 <div class="return-top"> 274 <div class="return-top">
298 <a href="javascript:void(0);" id="toTop" class="ifont" style="display: inline;"> 275 <a href="javascript:void(0);" id="toTop" class="ifont" style="display: inline;">
299 - <span class="iconfont">&#xe605;</span>  
300 - TOP 276 + <span class="iconfont">&#xe605;</span>
301 </a> 277 </a>
302 </div> 278 </div>
  279 + <!-- 返回顶部按钮 end -->
303 </body> 280 </body>
304 <script type="text/javascript" src="../../res/js/lib/seajs.js"></script> 281 <script type="text/javascript" src="../../res/js/lib/seajs.js"></script>
305 <script type="text/javascript"> 282 <script type="text/javascript">
306 - seajs.use(['jquery','channel'],function($,channel){  
307 - channel.common();  
308 - channel.show();  
309 - }) 283 +seajs.use(['jquery', 'channel'], function($, channel) {
  284 + channel.common();
  285 + channel.show();
  286 +})
310 </script> 287 </script>
311 -</html>  
  288 +
  289 +</html>
@@ -118,27 +118,27 @@ define('channel', function(require, exports) { @@ -118,27 +118,27 @@ define('channel', function(require, exports) {
118 118
119 119
120 //限量商品滑动 120 //限量商品滑动
121 - limitedPrev = $('.limited-slide-prev');  
122 - limitedNext = $('.limited-slide-next');  
123 - swiperLen = $('.limited-slide-box').find('.box').size();  
124 - goodsSwiper = swipe.init({  
125 - slideBox: '.limited-slide-box',  
126 - prev: '.limited-slide-prev',  
127 - next: '.limited-slide-next',  
128 - auto: false,  
129 - callback: function(index, element) {  
130 - limitedPrev.removeClass('disable');  
131 - limitedNext.removeClass('disable');  
132 - console.log(index);  
133 - console.log(swiperLen);  
134 - if (index === swiperLen - 1) {  
135 - limitedNext.addClass('disable');  
136 - };  
137 - if (index === 0) {  
138 - limitedPrev.addClass('disable');  
139 - };  
140 - }  
141 - }); 121 + // limitedPrev = $('.limited-slide-prev');
  122 + // limitedNext = $('.limited-slide-next');
  123 + // swiperLen = $('.limited-slide-box').find('.box').size();
  124 + // goodsSwiper = swipe.init({
  125 + // slideBox: '.limited-slide-box',
  126 + // prev: '.limited-slide-prev',
  127 + // next: '.limited-slide-next',
  128 + // auto: false,
  129 + // callback: function(index, element) {
  130 + // limitedPrev.removeClass('disable');
  131 + // limitedNext.removeClass('disable');
  132 + // console.log(index);
  133 + // console.log(swiperLen);
  134 + // if (index === swiperLen - 1) {
  135 + // limitedNext.addClass('disable');
  136 + // };
  137 + // if (index === 0) {
  138 + // limitedPrev.addClass('disable');
  139 + // };
  140 + // }
  141 + // });
142 142
143 143
144 //tab 144 //tab
@@ -146,8 +146,6 @@ define('channel', function(require, exports) { @@ -146,8 +146,6 @@ define('channel', function(require, exports) {
146 var nowIndex = $(this).index(); 146 var nowIndex = $(this).index();
147 $(this).addClass('current').siblings().removeClass('current'); 147 $(this).addClass('current').siblings().removeClass('current');
148 $('.content-main').hide().eq(nowIndex).show(); 148 $('.content-main').hide().eq(nowIndex).show();
149 -  
150 - // setLayout();  
151 }); 149 });
152 150
153 //回到顶部 151 //回到顶部
1 .brand-main { 1 .brand-main {
2 - margin: 50px 0; 2 + width: 1180px;
  3 + margin: 50px auto;
3 } 4 }
4 5
5 .search-wrap { 6 .search-wrap {
@@ -58,12 +59,12 @@ @@ -58,12 +59,12 @@
58 .brand-introduction { 59 .brand-introduction {
59 display: none; 60 display: none;
60 position: fixed; 61 position: fixed;
61 - width: 644px;  
62 - max-height: 560px; 62 + max-width: 900px;
  63 + max-height: 750px;
63 top: 50%; 64 top: 50%;
64 left: 50%; 65 left: 50%;
65 - margin: -288px 0 0 -352px;  
66 - padding: 16px 30px 0; 66 + margin: -380px 0 0 -352px;
  67 + padding: 50px 80px 0;
67 z-index: 102; 68 z-index: 102;
68 background: #fff; 69 background: #fff;
69 h2 { 70 h2 {
@@ -72,13 +73,12 @@ @@ -72,13 +73,12 @@
72 line-height: 20px; 73 line-height: 20px;
73 } 74 }
74 .brand-info { 75 .brand-info {
75 - margin: 20px 0 0 0; 76 + margin: 40px 0 0 0;
76 padding-bottom: 20px; 77 padding-bottom: 20px;
77 - border-bottom: 1px solid #e0e0e0;  
78 .pic { 78 .pic {
79 float: left; 79 float: left;
80 - width: 200px;  
81 - height: 200px; 80 + width: 235px;
  81 + height: 235px;
82 overflow: hidden; 82 overflow: hidden;
83 margin-top: 6px; 83 margin-top: 6px;
84 img { 84 img {
@@ -87,30 +87,32 @@ @@ -87,30 +87,32 @@
87 } 87 }
88 .text { 88 .text {
89 float: left; 89 float: left;
90 - margin: 0 0 0 29px; 90 + margin: 0 0 0 20px;
91 p { 91 p {
92 - width: 414px;  
93 - max-height: 192px; 92 + width: 480px;
  93 + height: 188px;
  94 + max-height: 188px;
94 overflow-x: hidden; 95 overflow-x: hidden;
95 overflow-y: auto; 96 overflow-y: auto;
96 margin: 0; 97 margin: 0;
97 line-height: 24px; 98 line-height: 24px;
98 font-size: 14px; 99 font-size: 14px;
99 - }  
100 - a {  
101 - display: block;  
102 - width: 94px;  
103 - height: 33px;  
104 - margin-top: 15px;  
105 - padding-left: 34px;  
106 - line-height: 35px;  
107 - border: 1px solid #000;  
108 - border-radius: 4px;  
109 - background: #fff;  
110 - color: #000;  
111 - background: url("../images/yohood/enter-store.png") no-repeat 10px center; 100 + text-align: left;
112 } 101 }
113 } 102 }
  103 + a {
  104 + display: inline-block;
  105 + width: 94px;
  106 + height: 33px;
  107 + margin-top: 15px;
  108 + padding-left: 34px;
  109 + line-height: 35px;
  110 + border: 1px solid #000;
  111 + border-radius: 4px;
  112 + background: #fff;
  113 + color: #000;
  114 + background: url("../images/yohood/enter-store.png") no-repeat 10px center;
  115 + }
114 } 116 }
115 .brand-close-btn { 117 .brand-close-btn {
116 position: absolute; 118 position: absolute;
@@ -120,42 +122,15 @@ @@ -120,42 +122,15 @@
120 } 122 }
121 } 123 }
122 124
123 -// .related-post {  
124 -// h3 {  
125 -// margin-top: 20px;  
126 -// line-height: 22px;  
127 -// font-size: 18px;  
128 -// }  
129 -// .post-list {  
130 -// margin-top: 17px;  
131 -// width: 666px;  
132 -// .layout-item {  
133 -// float: left;  
134 -// width: 200px;  
135 -// margin-right: 22px;  
136 -// .image-box {  
137 -// height: 128px;  
138 -// overflow: hidden;  
139 -// a{  
140 -// display: table-cell;  
141 -// width: 200px;  
142 -// height: 128px;  
143 -// vertical-align: middle;  
144 -// img{  
145 -// margin: 0 auto;  
146 -// }  
147 -// }  
148 -// }  
149 -// .content {  
150 -// h2 {  
151 -// margin: 8px 0 0 0;  
152 -// line-height: 20px;  
153 -// a {  
154 -// font-size: 14px;  
155 -// font-weight: normal;  
156 -// }  
157 -// }  
158 -// }  
159 -// }  
160 -// }  
161 -// }  
  125 +.brand-related-post {
  126 + margin: 0 0 50px 0;
  127 + h3 {
  128 + font-size: 16px;
  129 + font-weight: bold;
  130 + }
  131 + .post-list {
  132 + .time {
  133 + text-align: left;
  134 + }
  135 + }
  136 +}
@@ -452,11 +452,11 @@ $pageMainWidth: 1180px; @@ -452,11 +452,11 @@ $pageMainWidth: 1180px;
452 } 452 }
453 453
454 .cooperation-list { 454 .cooperation-list {
455 - width: 1005px; 455 + width: 1180px;
456 margin: 12px 0 0 0; 456 margin: 12px 0 0 0;
457 li { 457 li {
458 float: left; 458 float: left;
459 - margin: 0 27px 27px 0; 459 + margin: 0 (1180px - 174px * 5) / 4 27px 0;
460 a { 460 a {
461 display: block; 461 display: block;
462 &:focus { 462 &:focus {
@@ -487,117 +487,120 @@ $pageMainWidth: 1180px; @@ -487,117 +487,120 @@ $pageMainWidth: 1180px;
487 border: 1px solid #000; 487 border: 1px solid #000;
488 } 488 }
489 } 489 }
490 -}  
491 -  
492 -.limited-goods {  
493 - position: relative;  
494 - padding: 30px 0 50px 0;  
495 - background: #333333;  
496 - h2 {  
497 - font-size: 24px;  
498 - color: #8b8b8b;  
499 - font-weight: bold;  
500 - text-align: center;  
501 - background: url("../images/yohood/limited-line.png") no-repeat center center; 490 + li:nth-child(5n) {
  491 + margin-right: 0;
502 } 492 }
503 } 493 }
504 494
505 -.limited-slide-box {  
506 - position: relative;  
507 - width: 944px;  
508 - margin: 28px auto 0;  
509 - overflow: hidden;  
510 - .slide-wrap {  
511 - position: relative;  
512 - overflow: hidden;  
513 - }  
514 - .box {  
515 - width: 944px;  
516 - position: relative;  
517 - float: left;  
518 - }  
519 -} 495 +// .limited-goods {
  496 +// position: relative;
  497 +// padding: 30px 0 50px 0;
  498 +// background: #333333;
  499 +// h2 {
  500 +// font-size: 24px;
  501 +// color: #8b8b8b;
  502 +// font-weight: bold;
  503 +// text-align: center;
  504 +// background: url("../images/yohood/limited-line.png") no-repeat center center;
  505 +// }
  506 +// }
520 507
521 -.goods-list {  
522 - float: left;  
523 - width: 992px;  
524 - background: #333333;  
525 - li {  
526 - float: left;  
527 - width: 150px;  
528 - margin: 0 48px 0 0;  
529 - .img-box {  
530 - position: relative;  
531 - height: 200px;  
532 - text-align: center;  
533 - overflow: hidden;  
534 - img {  
535 - width: 100%;  
536 - }  
537 - span {  
538 - position: absolute;  
539 - left: 0;  
540 - bottom: 0;  
541 - width: 55px;  
542 - height: 25px;  
543 - line-height: 25px;  
544 - background: #000;  
545 - color: #fff;  
546 - font-size: 14px;  
547 - text-align: center;  
548 - }  
549 - span.red {  
550 - background: #ef3d00;  
551 - }  
552 - }  
553 - .goods-name {  
554 - margin: 5px 0 0 0;  
555 - line-height: 18px;  
556 - font-size: 14px;  
557 - color: #ccc;  
558 - }  
559 - .price {  
560 - margin: 6px 0 0 0;  
561 - line-height: 18px;  
562 - color: #ccc;  
563 - font-size: 12px;  
564 - .original-price {  
565 - color: #999;  
566 - text-decoration: line-through;  
567 - margin-right: 4px;  
568 - }  
569 - }  
570 - }  
571 -} 508 +// .limited-slide-box {
  509 +// position: relative;
  510 +// width: 944px;
  511 +// margin: 28px auto 0;
  512 +// overflow: hidden;
  513 +// .slide-wrap {
  514 +// position: relative;
  515 +// overflow: hidden;
  516 +// }
  517 +// .box {
  518 +// width: 944px;
  519 +// position: relative;
  520 +// float: left;
  521 +// }
  522 +// }
572 523
573 -.limited-slide-control {  
574 - position: absolute;  
575 - height: 200px;  
576 - left: 0;  
577 - right: 0;  
578 - top: 94px;  
579 - a {  
580 - position: absolute;  
581 - top: 50%;  
582 - left: 50%;  
583 - font-size: 30px;  
584 - color: #ebebeb;  
585 - margin-top: -22px;  
586 - &:focus {  
587 - outline: none;  
588 - }  
589 - }  
590 - .limited-slide-prev {  
591 - margin-left: -510px;  
592 - }  
593 - .limited-slide-next {  
594 - margin-left: 480px;  
595 - }  
596 - .disable {  
597 - color: #4a4a4a;  
598 - cursor: default;  
599 - }  
600 -} 524 +// .goods-list {
  525 +// float: left;
  526 +// width: 992px;
  527 +// background: #333333;
  528 +// li {
  529 +// float: left;
  530 +// width: 150px;
  531 +// margin: 0 48px 0 0;
  532 +// .img-box {
  533 +// position: relative;
  534 +// height: 200px;
  535 +// text-align: center;
  536 +// overflow: hidden;
  537 +// img {
  538 +// width: 100%;
  539 +// }
  540 +// span {
  541 +// position: absolute;
  542 +// left: 0;
  543 +// bottom: 0;
  544 +// width: 55px;
  545 +// height: 25px;
  546 +// line-height: 25px;
  547 +// background: #000;
  548 +// color: #fff;
  549 +// font-size: 14px;
  550 +// text-align: center;
  551 +// }
  552 +// span.red {
  553 +// background: #ef3d00;
  554 +// }
  555 +// }
  556 +// .goods-name {
  557 +// margin: 5px 0 0 0;
  558 +// line-height: 18px;
  559 +// font-size: 14px;
  560 +// color: #ccc;
  561 +// }
  562 +// .price {
  563 +// margin: 6px 0 0 0;
  564 +// line-height: 18px;
  565 +// color: #ccc;
  566 +// font-size: 12px;
  567 +// .original-price {
  568 +// color: #999;
  569 +// text-decoration: line-through;
  570 +// margin-right: 4px;
  571 +// }
  572 +// }
  573 +// }
  574 +// }
  575 +
  576 +// .limited-slide-control {
  577 +// position: absolute;
  578 +// height: 200px;
  579 +// left: 0;
  580 +// right: 0;
  581 +// top: 94px;
  582 +// a {
  583 +// position: absolute;
  584 +// top: 50%;
  585 +// left: 50%;
  586 +// font-size: 30px;
  587 +// color: #ebebeb;
  588 +// margin-top: -22px;
  589 +// &:focus {
  590 +// outline: none;
  591 +// }
  592 +// }
  593 +// .limited-slide-prev {
  594 +// margin-left: -510px;
  595 +// }
  596 +// .limited-slide-next {
  597 +// margin-left: 480px;
  598 +// }
  599 +// .disable {
  600 +// color: #4a4a4a;
  601 +// cursor: default;
  602 +// }
  603 +// }
601 604
602 .return-top { 605 .return-top {
603 position: fixed; 606 position: fixed;
@@ -228,7 +228,7 @@ $sideWidth: 290px; @@ -228,7 +228,7 @@ $sideWidth: 290px;
228 .layout-item { 228 .layout-item {
229 float: left; 229 float: left;
230 width: 235px; 230 width: 235px;
231 - height: 230px; 231 + height: 255px;
232 margin: 0 ($detialContentWidth - $itemWidth * 3) / 2 0 0; 232 margin: 0 ($detialContentWidth - $itemWidth * 3) / 2 0 0;
233 .image-box { 233 .image-box {
234 width: $itemWidth; 234 width: $itemWidth;
@@ -6,17 +6,31 @@ @@ -6,17 +6,31 @@
6 } 6 }
7 7
8 .show-wrap { 8 .show-wrap {
  9 + width: 1180px;
  10 + margin: 0 auto;
9 padding-bottom: 50px; 11 padding-bottom: 50px;
10 .layout-item { 12 .layout-item {
11 - height: 396px; 13 + height: 450px;
12 .image-box { 14 .image-box {
13 - height: 308px; 15 + height: 342px;
14 overflow: visible; 16 overflow: visible;
15 img { 17 img {
16 width: 100%; 18 width: 100%;
17 height: 100%; 19 height: 100%;
18 } 20 }
19 } 21 }
  22 + .content {
  23 + p {
  24 + font-size: 20px;
  25 + font-weight: bold;
  26 + color: #282828;
  27 + }
  28 + .time {
  29 + font-size: 12px;
  30 + font-weight: normal;
  31 + color: #8c8c8c;
  32 + }
  33 + }
20 } 34 }
21 } 35 }
22 36
@@ -48,7 +62,7 @@ @@ -48,7 +62,7 @@
48 font-weight: bold; 62 font-weight: bold;
49 box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5); 63 box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
50 background: #fff\9; 64 background: #fff\9;
51 - filter: alpha(opacity = 90); 65 + filter: alpha(opacity=90);
52 white-space: nowrap; 66 white-space: nowrap;
53 z-index: 1; 67 z-index: 1;
54 cursor: default; 68 cursor: default;
@@ -70,4 +84,4 @@ @@ -70,4 +84,4 @@
70 height: 5px; 84 height: 5px;
71 top: 13px; 85 top: 13px;
72 left: -2px; 86 left: -2px;
73 -}  
  87 +}