微信扫一扫打赏支持

amaze样例页面分析（一）

amaze样例页面分析（一）

一、总结

1、从审查（inspect）中是很清楚的可以弄清楚这些part之间的结构关系的

2、一者在于弄清楚他们之间的结构关系，二者在于知道结构的每一部分是干嘛的 

3、inspect弄清结构：在inspect中把结构弄清楚这些东西就清楚了，而小块我是懂的

4、是按div分块，而板块位置不是代码顺序：所有的part都是一块块的，比如说那个返回顶端的右下角的那个，其实代码就是在开头，而且也是直接套div的，和别的板块div也都是这样一一分开的

5、写板块：估计就是amaze里面的板块直接加到当前的板块就好 ，就是先找到结构，然后amaze的板块直接加到当前板块就好

二、截图

 

三、代码

  1 <!doctype html>//移动端页面声明
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>//手机端缩放viewport声明
  6     <meta name="keywords" content="" />
  7     <meta name="description" content="" />
  8     <link rel="stylesheet" href="css/amazeui.min.css">//stylesheet用来引进css，肯定是link标签
  9     <link rel="stylesheet" href="css/wap.css?2">
 10     <title>首页</title>
 11 </head>
 12 <body>
 13 <div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
 14     <a href="#top" title="">
 15         <img class="am-gotop-icon-custom" src="img/goTop.png" />//下拉时候出现的返回顶端的那个标记
 16     </a>
 17 </div>
 18 
 19 <div class="pet_mian" id="top">//
 20   <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}' >//幻灯片
 21   <ul class="am-slides">
 22       <li>
 23             <img src="img/fl01.png">
 24             <div class="pet_slider_font">
 25                 <span class="pet_slider_emoji"> (╭￣3￣)╭♡   </span>
 26                 <span>“大白”有望成为现实：充气机器人研究取得进展</span>
 27             </div>
 28             <div class="pet_slider_shadow"></div>
 29       </li>
 30       <li>
 31             <img src="img/fl02.png">
 32             <div class="pet_slider_font">
 33                 <span class="pet_slider_emoji"> []~(￣▽￣)~*　</span>
 34                 <span>已然魔性的雪橇犬哈士奇 —《雪地狂奔》</span>
 35             </div>
 36             <div class="pet_slider_shadow"></div>
 37       </li>
 38       <li>
 39             <img src="img/fl03.png">
 40             <div class="pet_slider_font">
 41                 <span class="pet_slider_emoji"> (｡・`ω´･)　</span>
 42                 <span>《星际争霸2:虚空之遗》国服过审!</span>
 43             </div>
 44             <div class="pet_slider_shadow"></div>
 45       </li>
 46   </ul>
 47 </div>//幻灯片结束
 48 
 49 
 50 <div class="pet_circle_nav">
 51     <ul class="pet_circle_nav_list">
 52         <li><a href="" class="iconfont pet_nav_xinxianshi ">&#xe61e;</a><span>新鲜事</span></li>
 53         <li><a href="" class="iconfont pet_nav_zhangzhishi ">&#xe607;</a><span>趣闻</span></li>
 54         <li><a href="" class="iconfont pet_nav_kantuya ">&#xe62c;</a><span>阅读</span></li>
 55         <li><a href="" class="iconfont pet_nav_mengzhuanti ">&#xe622;</a><span>专题</span></li>
 56         <li><a href="" class="iconfont pet_nav_meirong ">&#xe629;</a><span>订阅</span></li>
 57         <li><a href="" class="iconfont pet_nav_yiyuan ">&#xe602;</a><span>专栏</span></li>
 58         <li><a href="" class="iconfont pet_nav_dianpu ">&#xe604;</a><span>讨论</span></li>
 59         <li><a href="javascript:;" class="iconfont pet_nav_gengduo ">&#xe600;</a><span>更多</span></li>
 60     </ul>
 61     <div class="pet_more_list"><div class="pet_more_list_block">
 62     <div class="iconfont pet_more_close">×</div>
 63     <div class="pet_more_list_block">
 64         <div class="pet_more_list_block_name">
 65             <div class="pet_more_list_block_name_title">阅读 Read</div>
 66             <a class="pet_more_list_block_line">
 67                 <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
 68                 <div class="pet_more_list_block_line_font">新鲜事</div>
 69             </a>
 70                         <a class="pet_more_list_block_line">
 71                 <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico">&#xe607;</i>
 72                 <div class="pet_more_list_block_line_font">趣闻</div>
 73             </a>
 74                         <a class="pet_more_list_block_line">
 75                 <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico">&#xe62c;</i>
 76                 <div class="pet_more_list_block_line_font">阅读</div>
 77             </a>
 78                         <a class="pet_more_list_block_line">
 79                 <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico">&#xe622;</i>
 80                 <div class="pet_more_list_block_line_font">专题</div>
 81             </a>
 82                                     <a class="pet_more_list_block_line">
 83                 <i class="iconfont pet_nav_bk pet_more_list_block_line_ico">&#xe629;</i>
 84                 <div class="pet_more_list_block_line_font">订阅</div>
 85             </a>
 86                                     <a class="pet_more_list_block_line">
 87                 <i class="iconfont pet_nav_wd pet_more_list_block_line_ico">&#xe602;</i>
 88                 <div class="pet_more_list_block_line_font">专栏</div>
 89             </a>
 90  <div class="pet_more_list_block_name_title pet_more_list_block_line_height">服务 Service</div>
 91               <a class="pet_more_list_block_line">
 92                 <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
 93                 <div class="pet_more_list_block_line_font">新鲜事</div>
 94             </a>
 95                         <a class="pet_more_list_block_line">
 96                 <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico">&#xe607;</i>
 97                 <div class="pet_more_list_block_line_font">趣闻</div>
 98             </a>
 99                         <a class="pet_more_list_block_line">
100                 <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico">&#xe62c;</i>
101                 <div class="pet_more_list_block_line_font">阅读</div>
102             </a>
103                         <a class="pet_more_list_block_line">
104                 <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico">&#xe622;</i>
105                 <div class="pet_more_list_block_line_font">专题</div>
106             </a>
107                                     <a class="pet_more_list_block_line">
108                 <i class="iconfont pet_nav_bk pet_more_list_block_line_ico">&#xe629;</i>
109                 <div class="pet_more_list_block_line_font">订阅</div>
110             </a>
111                                     <a class="pet_more_list_block_line">
112                 <i class="iconfont pet_nav_wd pet_more_list_block_line_ico">&#xe602;</i>
113                 <div class="pet_more_list_block_line_font">专栏</div>
114             </a>
115         </div>
116     </div>
117 
118     </div></div>
119 </div>
120 <div class="pet_content_main">
121   <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
122   <div class="am-list-news-bd">
123   <ul class="am-list">
124      <!--缩略图在标题右边-->
125       <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
126         <div class="pet_list_one_info">
127             <div class="pet_list_one_info_l">
128                 <div class="pet_list_one_info_ico"><img src="img/a1.png" alt=""></div>
129                 <div class="pet_list_one_info_name">Super invincible 菁 </div>
130             </div>
131             <div class="pet_list_one_info_r">
132                 <div class="pet_list_tag pet_list_tag_xxs">新鲜事</div>
133             </div>
134         </div>
135         <div class=" am-u-sm-8 am-list-main pet_list_one_nr">
136             <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">十一长假哪也不去，宅在家里看电影！</a></h3>
137             <div class="am-list-item-text pet_list_one_text">每逢长假，总有那么一群人选择远离人山人海，静静地呆在家，坐在电脑电视前。长时间的工作学习让他们感觉很疲惫，对什么都提不起劲，打开电脑却不知道干什么好…</div>
138 
139         </div>
140           <div class="am-u-sm-4 am-list-thumb">
141             <a href="###" class="">
142               <img src="img/q1.jpg" class="pet_list_one_img" alt=""/>
143             </a>
144           </div>
145       </li>
146       <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
147         <div class="pet_list_one_info">
148             <div class="pet_list_one_info_l">
149                 <div class="pet_list_one_info_ico"><img src="img/a6.png" alt=""></div>
150                 <div class="pet_list_one_info_name">La Da Dee</div>
151             </div>
152             <div class="pet_list_one_info_r">
153                 <div class="pet_list_tag pet_video_tag">视频</div>
154             </div>
155         </div>
156         <div class=" am-u-sm-8 am-list-main pet_list_one_nr">
157             <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">不是说好做彼此的天使吗？连最后一口汉堡也不给我</a></h3>
158             <div class="am-list-item-text pet_list_one_text">国外网友waxiestapple在论坛Reddit贴出爱犬照片，指出“我的狗狗好像瘦了点”“因为我刚刚把最后一口汉堡吃掉”，只见这只哈士奇一脸惨遭背叛的样子，对主人露出相当不可思议的表情。</div>
159 
160         </div>
161           <div class="am-u-sm-4 am-list-thumb pet_video_info">
162             <div class="pet_video_info_tag"><i class="iconfont">&#xe62d;</i>03:50</div>
163             <a href="###" class="">
164               <img src="img/q4.jpg" class="pet_list_one_img" alt="我很囧，你保重....晒晒旅行中的那些囧！"/>
165             </a>
166           </div>
167       </li>
168       <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
169         <div class="pet_list_one_info">
170             <div class="pet_list_one_info_l">
171                 <div class="pet_list_one_info_ico"><img src="img/a2.png" alt=""></div>
172                 <div class="pet_list_one_info_name">AbsScript</div>
173             </div>
174             <div class="pet_list_one_info_r">
175                 <div class="pet_list_tag pet_list_tag_zzs">趣闻</div>
176             </div>
177         </div>
178         <div class=" am-u-sm-8 am-list-main pet_list_one_nr">
179             <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">怦然心动！澳洲大眼宝宝逆天睫毛萌翻全球！</a></h3>
180             <div class="am-list-item-text pet_list_one_text">来自澳大利亚布里斯班的十个月大的萌宝Egypt拥有一双修长的睫毛、清澈的眼眸，可爱的模样让她在社交网站上爆红。</div>
181 
182         </div>
183           <div class="am-u-sm-4 am-list-thumb">
184             <a href="###" class="">
185               <img src="img/q5.jpg" class="pet_list_one_img" alt="我很囧，你保重....晒晒旅行中的那些囧！"/>
186             </a>
187           </div>
188       </li>
189 
190             <li class="am-g am-list-item-desced pet_list_one_block">
191               <div class="pet_list_one_info">
192             <div class="pet_list_one_info_l">
193                 <div class="pet_list_one_info_ico"><img src="img/a3.png" alt=""></div>
194                 <div class="pet_list_one_info_name">养了猫的飞飞</div>
195             </div>
196             <div class="pet_list_one_info_r">
197                 <div class="pet_list_tag pet_list_tag_stj">阅读</div>
198             </div>
199         </div>
200         <div class=" am-list-main">
201             <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">浣熊孤儿掉到树下，被一家人收养之后……</a></h3>
202   <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3
203   am-avg-md-3 am-avg-lg-3 am-gallery-default pet_list_one_list" >
204       <li>
205         <div class="am-gallery-item">
206             <a href="###" class="">
207               <img src="img/qq1.jpg"  alt="某天 也许会相遇 相遇在这个好地方"/>
208             </a>
209         </div>
210       </li>
211       <li>
212         <div class="am-gallery-item">
213             <a href="###" class="">
214               <img src="img/qq2.jpg"  alt="不要太担心 只因为我相信"/>
215             </a>
216         </div>
217       </li>
218       <li>
219         <div class="am-gallery-item">
220             <a href="###" class="">
221               <img src="img/qq3.jpg"  alt="终会走过这条遥远的道路"/>
222             </a>
223         </div>
224       </li>
225   </ul>
226             <div class="am-list-item-text pet_list_two_text">巴哈马拿骚的居民Rosie Kemp发现一个刚出生的浣熊，掉在了树下。因为找不到小浣熊的妈妈了，Rosie和她的女儿Laura Young决定收养这只小东西，并给她取名“小南瓜”。</div>
227         </div>
228       </li>
229 
230             <li class="am-g am-list-item-desced pet_list_one_block">
231               <div class="pet_list_one_info">
232             <div class="pet_list_one_info_tytj"><i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico pet_list_tytj_ico">&#xe607;</i>诺奖得主回忆通知获奖那一刻</div>
233             <div class="pet_list_one_info_r">
234                 <div class="pet_list_tag pet_list_tag_kty">图集</div>
235             </div>
236         </div>
237         <div class=" am-list-main">
238   <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3
239   am-avg-md-3 am-avg-lg-3 am-gallery-default pet_list_one_list pet_list_one_tytj" >
240       <li>
241         <div class="am-gallery-item">
242             <a href="###" class="">
243               <img src="img/w1.jpg"  alt="某天 也许会相遇 相遇在这个好地方"/>
244             </a>
245         </div>
246       </li>
247       <li>
248         <div class="am-gallery-item">
249             <a href="###" class="">
250               <img src="img/w2.jpg"  alt="不要太担心 只因为我相信"/>
251             </a>
252         </div>
253       </li>
254       <li>
255         <div class="am-gallery-item">
256             <a href="###" class="">
257               <img src="img/w3.jpg"  alt="终会走过这条遥远的道路"/>
258             </a>
259         </div>
260       </li>
261        <li>
262         <div class="am-gallery-item">
263             <a href="###" class="">
264               <img src="img/w4.jpg"  alt="终会走过这条遥远的道路"/>
265             </a>
266         </div>
267       </li>
268        <li>
269         <div class="am-gallery-item">
270             <a href="###" class="">
271               <img src="img/w5.jpg"  alt="终会走过这条遥远的道路"/>
272             </a>
273         </div>
274       </li>
275        <li>
276         <div class="am-gallery-item">
277             <a href="###" class="">
278               <img src="img/w6.jpg"  alt="终会走过这条遥远的道路"/>
279             </a>
280         </div>
281       </li>
282   </ul>
283       </li>
284             <li class="am-g am-list-item-desced pet_list_one_block">
285               <div class="pet_list_one_info">
286             <div class="pet_list_one_info_l">
287                 <div class="pet_list_one_info_ico"><img src="img/a4.png" alt=""></div>
288                 <div class="pet_list_one_info_name">大兔</div>
289             </div>
290             <div class="pet_list_one_info_r">
291                 <div class="pet_list_tag pet_list_tag_zzs">趣闻</div>
292             </div>
293         </div>
294         <div class=" am-list-main">
295             <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></h3>
296 
297 
298             <div class="am-list-item-text pet_list_two_text">狗狗会天天的跟着我们生活在一起，它们的一切都会影响着主人，尤其是狗狗身上散发的味道，会无时无刻的对主人有影响，如果狗狗身体有异味，主人就会用过于香喷喷的洗漱品帮狗狗洗澡，这样不仅对狗狗身体有伤害，还会容易患上皮肤病，其实，我们知道一些小技巧，就会改善狗狗身上存在的味道。</div>
299 
300         </div>
301       </li>
302       <li class="am-g am-list-item-desced pet_list_one_block">
303               <div class="pet_list_one_info">
304             <div class="pet_list_one_info_l">
305                 <div class="pet_list_one_info_ico"><img src="img/a5.png" alt=""></div>
306                 <div class="pet_list_one_info_name">Hope</div>
307             </div>
308             <div class="pet_list_one_info_r">
309                 <div class="pet_list_tag pet_list_tag_mzt">萌专题</div>
310             </div>
311         </div>
312         <div class=" am-list-main">
313             <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">心情不好了，就来看看这只狗！</a></h3>
314             <div class="pet_list_zt_img"><img src="img/c1.png" alt=""></div>
315 
316             <div class="am-list-item-text pet_list_two_text">猫咪不像人，猫咪的情绪不会写在脸上，反馈给我们的信息更多的应该是行为上肢体上的，当然从叫声中也会反应一些信息，那么要想“抓住它的心，就一定要抓住它的胃吗？”从它的行为和肢体语言当中我们可以读懂什么呢？</div>
317 
318         </div>
319       </li>
320       <li class="am-g am-list-item-desced pet_list_one_block">
321            <div class="pet_article_user_block">
322              <div class="pet_article_user_img">
323              <div class="pet_article_user_shadow"></div>
324              <div class="pet_article_user_title">一周在任意地点工作三天？</div>
325              <img src="img/c2.png" alt=""></div>
326              <div class="pet_article_user_info">
327                 <div class="pet_article_user_info_ico"><img src="img/c.png" alt=""></div>SeeYouAgain
328              </div>
329              <div class="am-list-item-text pet_article_user_nr">这是一家帮助客户在亚太地区找到适合的打折酒店的中介机构，在全球设立了9个办事处，老板克里斯蒂安·米施勒宣称要把它打造成世界上最棒的公司。</div>
330            </div>
331       </li>
332     </ul>
333   </div>
334 
335     </div>
336 
337 </div>
338 <div class="pet_article_dowload pet_dowload_more_top_off">
339       <div class="pet_article_dowload_title">关于Amaze UI</div>
340       <div class="pet_article_dowload_content pet_dowload_more_top_bg"><div class="pet_article_dowload_triangle pet_dowload_more_top_san"></div>
341       <div class="pet_article_dowload_ico"><img src="img/footdon.png" alt=""></div>
342       <div class="pet_article_dowload_content_font">
343 Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。 </div>
344       <div class="pet_article_dowload_all">
345         <a href="###" class="pet_article_dowload_Az am-icon-apple"> App store</a>
346         <a href="###" class="pet_article_dowload_Pg am-icon-android"> Android</a>
347       </div>
348       </div>
349       <div class="pet_article_footer_info">Copyright(c)2015 Amaze UI All Rights Reserved</div>
350 </div>
351 </div>
352 
353 <script src="js/jquery.min.js"></script>
354 <script src="js/amazeui.min.js"></script>
355 <script>
356 $(function(){
357 
358     // 动态计算新闻列表文字样式
359     auto_resize();
360     $(window).resize(function() {
361         auto_resize();
362     });
363     $('.am-list-thumb img').load(function(){
364         auto_resize();
365     });
366 
367     $('.am-list > li:last-child').css('border','none');
368     function auto_resize(){
369         $('.pet_list_one_nr').height($('.pet_list_one_img').height());
370 
371     }
372         $('.pet_nav_gengduo').on('click',function(){
373             $('.pet_more_list').addClass('pet_more_list_show');
374        });
375         $('.pet_more_close').on('click',function(){
376             $('.pet_more_list').removeClass('pet_more_list_show');
377         });
378 });
379 
380 </script>
381 </body>
382 </html>

 

posted @ 2018-05-07 02:01  范仁义  阅读(500)  评论(0)  编辑  收藏  举报