amazeui页面分析3

一、总结

1、

本质是list列表，是ul套li的形式，只不过li里面是图片

 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">

   <a href="###" class="pet_topci_block">

     <div class="pet_topci_video"><i class="iconfont"></i><span>1:15</span></div>

     <div class="pet_topci_shadow_font">新 Xbox One 下月发布，暂不支持 Cortana。</div>

     <div class="pet_topci_shadow"></div>

     <img src="img/c8.png" alt="">

   </a>

 </li>

整个内容全是套在a标签中，既然是套在li下面，多个a标签又有何妨，

图标和视频时间都是写上去的，倒是也简单，bom很容易做到

2、

依据js空代码，我想他们之间应该还有其它联系才对

<div class="am-header-right am-header-nav">

  <a href="javascript:;" class="iconfont pet_head_gd_ico"></a>

</div>

二、视频列表页

截图

代码

 <!doctype html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

   <meta name="keywords" content="" />

   <meta name="description" content="" />

   <link rel="stylesheet" href="css/amazeui.min.css">

   <link rel="stylesheet" href="css/wap.css">

   <title>视频列表页</title>

 </head>

 <body style="background:#ececec">

   <div class="pet_mian" >

     <div class="pet_head">

       <header data-am-widget="header"

           class="am-header am-header-default pet_head_block">

         <div class="am-header-left am-header-nav ">

           <a href="#left-link" class="iconfont pet_head_jt_ico"></a>

         </div>

         <div class="pet_news_list_tag_name">视频列表</div>

 <div class="am-header-right am-header-nav">

   <a href="javascript:;" class="iconfont pet_head_gd_ico"></a>

 </div>

       </header>

     </div>

     <div class="pet_more_list">

       <div class="pet_more_list_block">

         <div class="iconfont pet_more_close">×</div>

         <div class="pet_more_list_block">

           <div class="pet_more_list_block_name">

             <div class="pet_more_list_block_name_title">阅读 Read</div>

             <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">新鲜事</div>

             </a>

             <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">趣闻</div>

             </a>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">阅读</div>

             </a>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">专题</div>

             </a>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_bk pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">订阅</div>

             </a>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_wd pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">专栏</div>

             </a>

             <div class="pet_more_list_block_name_title pet_more_list_block_line_height">服务 Service</div>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">新鲜事</div>

             </a>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">趣闻</div>

             </a>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">阅读</div>

             </a>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">专题</div>

             </a>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_bk pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">订阅</div>

             </a>

             <a class="pet_more_list_block_line">

               <i class="iconfont pet_nav_wd pet_more_list_block_line_ico"></i>

               <div class="pet_more_list_block_line_font">专栏</div>

             </a>

           </div>

         </div>

       </div>

     </div>

     <div class="pet_content pet_content_list pet_topci">

       <div class="pet_article_like">

         <div class="pet_content_main pet_article_like_delete">

           <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">

             <div class="am-list-news-bd">

               <ul class="am-list">

                 <!--缩略图在标题右边-->

 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">

   <a href="###" class="pet_topci_block">

     <div class="pet_topci_video"><i class="iconfont"></i><span>1:15</span></div>

     <div class="pet_topci_shadow_font">新 Xbox One 下月发布，暂不支持 Cortana。</div>

     <div class="pet_topci_shadow"></div>

     <img src="img/c8.png" alt="">

   </a>

 </li>

                 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">

   <a href="###" class="pet_topci_block">

     <div class="pet_topci_video"><i class="iconfont"></i><span>10:19</span></div>

     <div class="pet_topci_shadow_font">GitHub 宣布支持 U2F 两步认证。</div>

     <div class="pet_topci_shadow"></div>

     <img src="img/c7.png" alt="">

   </a>

 </li>

                                 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">

                   <a href="###" class="pet_topci_block">

                     <div class="pet_topci_video"><i class="iconfont"></i><span>60:03</span></div>

                     <div class="pet_topci_shadow_font">MAX 大会：Adobe 发布移动端新应用 Fix 和 Capture。</div>

                     <div class="pet_topci_shadow"></div>

                     <img src="img/c5.png" alt="">

                   </a>

                 </li>

                 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">

                   <a href="###" class="pet_topci_block">

                     <div class="pet_topci_video"><i class="iconfont"></i><span>1:15</span></div>

                     <div class="pet_topci_shadow_font">iPhone 6s 采用 4G LTE Advanced 技术。</div>

                     <div class="pet_topci_shadow"></div>

                     <img src="img/c3.png" alt="">

                   </a>

                 </li>

                 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">

                   <a href="###" class="pet_topci_block">

                     <div class="pet_topci_video"><i class="iconfont"></i><span>3:42</span></div>

                     <div class="pet_topci_shadow_font">Twitter 正式任命 Jack Dorsey 为 CEO。</div>

                     <div class="pet_topci_shadow"></div>

                     <img src="img/c6.png" alt="">

                   </a>

                 </li>

                 </ul>

               </div>

             </div>

           </div>

         </div>

         <div class="pet_article_footer_info">Copyright(c)2015 PetShow All Rights Reserved</div>

       </div>

     </div>

     <script src="js/jquery.min.js"></script>

     <script src="js/amazeui.min.js"></script>

     <script>

 $(function(){

     // 动态计算新闻列表文字样式

     auto_resize();

     $(window).resize(function() {

         auto_resize();

     });

     $('.am-list-thumb img').load(function(){

         auto_resize();

     });

     $('.pet_article_like li:last-child').css('border','none');

         function auto_resize(){

         $('.pet_list_one_nr').height($('.pet_list_one_img').height());

                 // alert($('.pet_list_one_nr').height());

     }

         $('.pet_article_user').on('click',function(){

             if($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')){

                 $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');

             }else{

                 $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');

             }

         });

         $('.pet_head_gd_ico').on('click',function(){

             $('.pet_more_list').addClass('pet_more_list_show');

        });

         $('.pet_more_close').on('click',function(){

             $('.pet_more_list').removeClass('pet_more_list_show');

         });

 });

 </script>

 </body>

   </html>

amazeui页面分析3的更多相关文章

  1. amazeui页面分析之登录页面

    amazeui页面分析之登录页面 一.总结 1.tpl命名空间:tpl命名空间的样式都是从app.css里面来的,app.css用用来移动网站开发的样式 2.表单样式:am-form到am-form- ...

  2. amazeui页面分析5

    amazeui页面分析5 一.总结 1.把原模板当成样例集合就好 2.都是一块一块的,删改等操作都方便 3.list方面的操作很多都是ui配合li 4.其实容器本质还是div,所以真的算简单了 5.样 ...

  3. amazeui页面分析4

    amazeui页面分析4 一.总结 1.直接照着作者的设计思路用:例如 pet_hd_con_time pet_hd_con_map ,这是time 和 map,那我别的说不定也可以直接用,比如aut ...

  4. amazeui页面分析2

    amazeui页面分析2 一.总结 1.弄清结构:这些部分都是一块一块分好了的,掌握结构之后,想替换哪块就替换哪块,想不要哪块就不要哪块,非常简单的 2.一块一块:替换十分简单 3.弄清楚大块之后,然 ...

  5. amaze样例页面分析（一）

    amaze样例页面分析(一) 一.总结 1.从审查(inspect)中是很清楚的可以弄清楚这些part之间的结构关系的 2.一者在于弄清楚他们之间的结构关系,二者在于知道结构的每一部分是干嘛的 3.i ...

  6. scrapy抓取拉勾网职位信息（二）——拉勾网页面分析

    网站结构分析: 四个大标签:首页.公司.校园.言职 我们最终是要得到详情页的信息,但是从首页的很多链接都能进入到一个详情页,我们需要对这些标签一个个分析,分析出哪些链接我们需要跟进. 首先是四个大标签 ...

  7. git冲突解决、线上分支合并、luffy项目后台登陆注册页面分析引入

    今日内容概要 git冲突解决 线上分支合并 登陆注册页面(引入) 手机号是否存在接口 腾讯云短信申请 内容详细 1.git冲突解决 1.1 多人在同一分支开发,出现冲突 # 先将前端项目也做上传到 g ...

  8. php session阻塞页面分析及优化 （session_write_close session_commit使用）

    转: http://www.tuicool.com/articles/bqeeey 首先看下下面代码, session1.php 文件 <?php ini_set('session.save_p ...

  9. OAF_OAF Framework页面分析（概念）

    20150506 Created By BaoXinjian

随机推荐

  1. hdu4253 Two Famous Companies --- 二分+MST

    给n个点.m条边的图.每条边要么属于a公司,要么属于b公司.要求一颗最小生成树,条件是当中属于a公司的边数为k. 这题做法非常巧妙. 要求最小生成树,但有一定限制,搜索.贪心显然都不正确. 要是能找到 ...

  2. android图像处理（3） 底片效果

    这篇将讲到图片特效处理的底片效果.跟前面一样是对像素点进行处理,算法是通用的. 算法原理:将当前像素点的RGB值分别与255之差后的值作为当前点的RGB值. 例: ABC 求B点的底片效果: B.r ...

  3. 如何动态改变audio的播放的src

    如何动态改变audio的播放的src 一.总结 一句话总结:js方式在请求外部网站的时候行,php方式在请求内外部资源都行.因为php走在js前面,所以问题可以从php方面想办法. 1.如何使用js控 ...

  4. 浏览器（BOM）对象的一些内置方法总结

    浏览器(BOM)对象的一些内置方法总结 一.总结 1.bom就是浏览器那端执行的代码,dom就是服务器那端操作html的代码 2.记好bom的几个对象,那就很好理解很多代码了,也很好写很多代码了 二. ...

  5. es6 --- Generator 函数

    第一部分,ES6 中的 Generator 在 ES6 出现之前,基本都是各式各样类似Promise的解决方案来处理异步操作的代码逻辑,但是 ES6 的Generator却给异步操作又提供了新的思路, ...

  6. ajax 使用 与 缓存问题

    1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结 ...

  7. Kinect 开发 —— 近距离探测

    如何将Kinect设备作为一个近距离探测传感器.为了演示这一点,我们处理的场景可能在以前看到过.就是某一个人是否站在Kinect前面,在Kinect前面移动的是人还是什么其他的物体.当我们设置的触发器 ...

  8. HDU 6182 A Math

    A Math Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  9. CSU 8月月赛 Decimal 小数化分数

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1303 这个OJ很容易跪所以我贴一下题目 Description 任意一个分数都是有理数,对于任意一 ...

  10. mv---移动文件或目录

    mv命令用来对文件或目录重新命名,或者将文件从一个目录移到另一个目录中.source表示源文件或目录,target表示目标文件或目录.如果将一个文件移到一个已经存在的目标文件中,则目标文件的内容将被覆 ...