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. struts2学习笔记（7）---数据验证之validateXxx()方法

    validateXxx()方法 上一篇文章写了使用Action的validate()方法,validate()仅仅能对action的所有方法进行验证.而要实现对action中特定的方法进行验证,就须要 ...

  2. RvmTranslator6.2 is released

    RvmTranslator6.2 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...

  3. C＃与Linux守护进程

    用C#编写Linux守护进程   如果要在Red Hat Enterprise Linux上将.NET Core进程作为后台进程运行,则可以创建自定义systemd单元.今天我将为.NET Core编 ...

  4. CHARINDEX，REPLACE，LEFT+四大系统函数+模糊查询

    select CHARINDEX('bob','my name is bob',1)--返回12  bob的第一个b在字符串中排第12(从1开始数) select CEILING(456.4)--45 ...

  5. 洛谷 P1827 美国血统 American Heritage

    P1827 美国血统 American Heritage 题目描述 农夫约翰非常认真地对待他的奶牛们的血统.然而他不是一个真正优秀的记帐员.他把他的奶牛 们的家谱作成二叉树,并且把二叉树以更线性的“树 ...

  6. Python基础教程之第3章 使用字符串

    Python 2.7.5 (default, May 15 2013, 22:43:36) [MSC v.1500 32 bit (Intel)] on win32 Type "copyri ...

  7. matlab （.m）文件生成 windows 可执行（.exe）文件

    mex -setup:设置 C 语言编译器:(如果本地安装有 visual studio 20xx 集成开发环境,则会自动选择其下的 C/C++ 编译器 ) 将运行时环境(runtime enviro ...

  8. onvif开发实战2--总结框架搭建

    完成框架搭建后,编写自己的主函数起onvif服务 编写makefile objs = onvif.o onvif_func.o duration.o soapC.o soapServer.o stds ...

  9. BZOJ3620: 似乎在梦中见过的样子(KMP)

    Description “Madoka,不要相信 QB!”伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Modoka 的一个噩梦,也同时是上个轮回中所发生的事.为了使 ...

  10. jmeter分布式测试的坑（转）

    本文转自:https://www.cnblogs.com/lsjdddddd/p/5806077.html 有关jmeter分布式测试的环境配置,大概就是那样,但是每次想要进行jmeter分布式测试的 ...