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 结合extjs实现的一个登录实例

    一.先搭建好struts2,能够通过myeclipse高速搭建. 二.再导入extjs所需的库文件. 三.写一个实体类User package com.ext.model; public class ...

  2. UDP连接调用connect()函数

    UDP是一个无连接的协议,它没有像TCP中EOF之类的东西. 8.11 UDP的connect函数 除非套接字已连接,否则异步错误是不会反悔到UDP套接字的. 我们确实能够给UDP套接字调用conne ...

  3. JavaScript中操作对象的属性

    1.操作对象的属性 注意: 标签属性与DOM对象属性的相应关系: 绝大部分2者是同样的.如:imgobj.src属性相应<img src="" >中src属性,但也有例 ...

  4. es68对象的解构赋值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 分享一个js加密的几种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. ssh-agent && 及 ssh-add介绍

    ssh-agent命令是一种控制用来保存公钥身份验证所使用的私钥的程序.ssh-agent在X会话或登录会话之初启动,所有其他窗口或程序则以客户端程序的身份启动并加入到ssh-agent程序中.通过使 ...

  7. 【Codeforces Round #456 (Div. 2) C】Perun, Ult!

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] set1 < pair < int,int > > set1;记录关键点->某个人怪物永远打不死了,第 ...

  8. JavaScript学习总结（10）——实用JS代码大全

    事件源对象  event.srcElement.tagName  event.srcElement.type 捕获释放  event.srcElement.setCapture();   event. ...

  9. Android中的MVP架构初探

    说来羞愧,MVP的架构模式已经在Android领域出现一两年了.可是到今天自己才開始Android领域中的MVP架构征程. 闲话不多说,開始吧. 一.架构演变概述 我记得我找第一份工作时,面试官问我& ...

  10. 怎样在nat方式的虚拟机下做ssh连接

    很多人在本机做測试都是用桥接的方式让虚拟机上网. 假设ip地址紧张或者根本就不同意我们拥有一个局域网的ip.这时候便能够使用NAT方式+putty来远程操作. 第一步,打开设备-Network-更改网 ...