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. JavaScript数组的某些操作（二）

    7.颠倒数组中元素的顺序(注意:不是为数组排序)--reverse方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  2. nagios,zabbix对照

    nagios/zabbix对照: nagios核心功能是监控报警.是一个轻量化的监控系统. 假设须要图标显示,须要添加图标显示插件(如pnp4nagios): 假设须要存入数据库,须要对应的插件(ND ...

  3. LinkCutTree详解

    LCT详解 没有比这再详细的了, 相信我

  4. Python爬虫之『urlopen』

    本文以爬取百度首页为示例来学习,python版本为python3.6.7,完整代码会在文章末附上 本次学习所用到的python框架:urllib.request 本次学习所用到的函数: urllib. ...

  5. 洛谷 P2242 公路维修问题

    P2242 公路维修问题 题目描述 由于长期没有得到维修,A国的高速公路上出现了N个坑.为了尽快填补好这N个坑,A国决定对M处地段采取交通管制.为了求解方便,假设A国的高速公路只有一条,而且是笔直的. ...

  6. vue-cli 和webpack

    https://note.youdao.com/share/?id=d1851db9f0fe0a691798fac823849564&type=notebook#/C045BC3E7DC144 ...

  7. 前端项目中常用es6知识总结 -- Promise逃脱回调地狱

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  8. 【hdu 6181】Two Paths

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6181 [题意] 让你求从1到n的次短路 [题解] 模板题; 因为点可以重复走; 则一定会有次短路. di ...

  9. 使用 Go 语言开发大型 MMORPG 游戏服务器怎么样？（非常稳定、捕获所有异常、非常适合从头开始，但大公司已经有现成的C++框架、所以不会使用）

    使用 Go 语言开发大型 MMORPG 游戏服务器怎么样?和C Socket服务器比起来有什么优劣?可行性怎么样? 从2013年起,经朋友推荐开始用Golang编写游戏登陆服务器, 配合C++做第三方 ...

  10. zookeeper 配置文件说明（zoo.cfg）

    clientPort      # 客户端连接server的port,即对外服务port,一般设置为2181. dataDir        # 存储快照文件snapshot的文件夹. 默认情况下.事 ...