amazeui页面分析3

amazeui页面分析3

amazeui页面分析3

一、总结

1、

amazeui页面分析3

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

1 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">
2   <a href="###" class="pet_topci_block">
3     <div class="pet_topci_video"><i class="iconfont">&#xe62d;</i><span>1:15</span></div>
4     <div class="pet_topci_shadow_font">新 Xbox One 下月发布,暂不支持 Cortana。</div>
5     <div class="pet_topci_shadow"></div>
6     <img src="img/c8.png" alt="">
7   </a>
8 </li>

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

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

 

2、

amazeui页面分析3

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

<div class="am-header-right am-header-nav">
  <a href="javascript:;" class="iconfont pet_head_gd_ico">&#xe600;</a>
</div>

 

 

 

 

 

二、视频列表页

截图

amazeui页面分析3

 

 

 

代码

  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"/>
  6   <meta name="keywords" content="" />
  7   <meta name="description" content="" />
  8   <link rel="stylesheet" href="css/amazeui.min.css">
  9   <link rel="stylesheet" href="css/wap.css">
 10   <title>视频列表页</title>
 11 </head>
 12 <body style="background:#ececec">
 13   <div class="pet_mian" >
 14     <div class="pet_head">
 15       <header data-am-widget="header"
 16           class="am-header am-header-default pet_head_block">
 17         <div class="am-header-left am-header-nav ">
 18           <a href="#left-link" class="iconfont pet_head_jt_ico">&#xe601;</a>
 19         </div>
 20         <div class="pet_news_list_tag_name">视频列表</div>
 21 <div class="am-header-right am-header-nav">
 22   <a href="javascript:;" class="iconfont pet_head_gd_ico">&#xe600;</a>
 23 </div>
 24       </header>
 25     </div>
 26 
 27     <div class="pet_more_list">
 28       <div class="pet_more_list_block">
 29         <div class="iconfont pet_more_close">×</div>
 30         <div class="pet_more_list_block">
 31           <div class="pet_more_list_block_name">
 32             <div class="pet_more_list_block_name_title">阅读 Read</div>
 33             <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
 34               <div class="pet_more_list_block_line_font">新鲜事</div>
 35             </a>
 36             <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico">&#xe607;</i>
 37               <div class="pet_more_list_block_line_font">趣闻</div>
 38             </a>
 39             <a class="pet_more_list_block_line">
 40               <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico">&#xe62c;</i>
 41               <div class="pet_more_list_block_line_font">阅读</div>
 42             </a>
 43             <a class="pet_more_list_block_line">
 44               <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico">&#xe622;</i>
 45               <div class="pet_more_list_block_line_font">专题</div>
 46             </a>
 47             <a class="pet_more_list_block_line">
 48               <i class="iconfont pet_nav_bk pet_more_list_block_line_ico">&#xe629;</i>
 49               <div class="pet_more_list_block_line_font">订阅</div>
 50             </a>
 51             <a class="pet_more_list_block_line">
 52               <i class="iconfont pet_nav_wd pet_more_list_block_line_ico">&#xe602;</i>
 53               <div class="pet_more_list_block_line_font">专栏</div>
 54             </a>
 55             <div class="pet_more_list_block_name_title pet_more_list_block_line_height">服务 Service</div>
 56             <a class="pet_more_list_block_line">
 57               <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
 58               <div class="pet_more_list_block_line_font">新鲜事</div>
 59             </a>
 60             <a class="pet_more_list_block_line">
 61               <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico">&#xe607;</i>
 62               <div class="pet_more_list_block_line_font">趣闻</div>
 63             </a>
 64             <a class="pet_more_list_block_line">
 65               <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico">&#xe62c;</i>
 66               <div class="pet_more_list_block_line_font">阅读</div>
 67             </a>
 68             <a class="pet_more_list_block_line">
 69               <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico">&#xe622;</i>
 70               <div class="pet_more_list_block_line_font">专题</div>
 71             </a>
 72             <a class="pet_more_list_block_line">
 73               <i class="iconfont pet_nav_bk pet_more_list_block_line_ico">&#xe629;</i>
 74               <div class="pet_more_list_block_line_font">订阅</div>
 75             </a>
 76             <a class="pet_more_list_block_line">
 77               <i class="iconfont pet_nav_wd pet_more_list_block_line_ico">&#xe602;</i>
 78               <div class="pet_more_list_block_line_font">专栏</div>
 79             </a>
 80           </div>
 81         </div>
 82 
 83       </div>
 84     </div>
 85 
 86     <div class="pet_content pet_content_list pet_topci">
 87       <div class="pet_article_like">
 88         <div class="pet_content_main pet_article_like_delete">
 89           <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
 90             <div class="am-list-news-bd">
 91               <ul class="am-list">
 92                 <!--缩略图在标题右边-->
 93 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">
 94   <a href="###" class="pet_topci_block">
 95     <div class="pet_topci_video"><i class="iconfont">&#xe62d;</i><span>1:15</span></div>
 96     <div class="pet_topci_shadow_font">新 Xbox One 下月发布,暂不支持 Cortana。</div>
 97     <div class="pet_topci_shadow"></div>
 98     <img src="img/c8.png" alt="">
 99   </a>
100 </li>
101                 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">
102   <a href="###" class="pet_topci_block">
103     <div class="pet_topci_video"><i class="iconfont">&#xe62d;</i><span>10:19</span></div>
104     <div class="pet_topci_shadow_font">GitHub 宣布支持 U2F 两步认证。</div>
105     <div class="pet_topci_shadow"></div>
106     <img src="img/c7.png" alt="">
107   </a>
108 </li>
109                                 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">
110                   <a href="###" class="pet_topci_block">
111                     <div class="pet_topci_video"><i class="iconfont">&#xe62d;</i><span>60:03</span></div>
112                     <div class="pet_topci_shadow_font">MAX 大会:Adobe 发布移动端新应用 Fix 和 Capture。</div>
113                     <div class="pet_topci_shadow"></div>
114                     <img src="img/c5.png" alt="">
115                   </a>
116                 </li>
117                 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">
118                   <a href="###" class="pet_topci_block">
119                     <div class="pet_topci_video"><i class="iconfont">&#xe62d;</i><span>1:15</span></div>
120                     <div class="pet_topci_shadow_font">iPhone 6s 采用 4G LTE Advanced 技术。</div>
121                     <div class="pet_topci_shadow"></div>
122                     <img src="img/c3.png" alt="">
123                   </a>
124                 </li>
125 
126                 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_topci_list">
127                   <a href="###" class="pet_topci_block">
128                     <div class="pet_topci_video"><i class="iconfont">&#xe62d;</i><span>3:42</span></div>
129                     <div class="pet_topci_shadow_font">Twitter 正式任命 Jack Dorsey 为 CEO。</div>
130                     <div class="pet_topci_shadow"></div>
131                     <img src="img/c6.png" alt="">
132                   </a>
133                 </li>
134 
135 
136                 </ul>
137               </div>
138 
139             </div>
140 
141           </div>
142 
143         </div>
144 
145         <div class="pet_article_footer_info">Copyright(c)2015 PetShow All Rights Reserved</div>
146       </div>
147     </div>
148     <script src="js/jquery.min.js"></script>
149     <script src="js/amazeui.min.js"></script>
150     <script>
151 $(function(){
152 
153     // 动态计算新闻列表文字样式
154     auto_resize();
155     $(window).resize(function() {
156         auto_resize();
157     });
158     $('.am-list-thumb img').load(function(){
159         auto_resize();
160     });
161     $('.pet_article_like li:last-child').css('border','none');
162         function auto_resize(){
163         $('.pet_list_one_nr').height($('.pet_list_one_img').height());
164                 // alert($('.pet_list_one_nr').height());
165     }
166         $('.pet_article_user').on('click',function(){
167             if($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')){
168                 $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');
169             }else{
170                 $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');
171             }
172         });
173 
174         $('.pet_head_gd_ico').on('click',function(){
175             $('.pet_more_list').addClass('pet_more_list_show');
176        });
177         $('.pet_more_close').on('click',function(){
178             $('.pet_more_list').removeClass('pet_more_list_show');
179         });
180 });
181 
182 </script>
183 </body>
184   </html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101671.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 利用Pytorch torchvision完成Faster-rcnn目标检测demo及源码详解

    利用Pytorch torchvision完成Faster-rcnn目标检测demo及源码详解Torchvision更新到0.3.0后支持了更多的功能,其中新增模块detection中实现了整个faster-rcnn的功能。本博客主要讲述如何通过torchvision和pytorch使用faster-rcnn,并提供一个demo和对应代码及解析注释。目录如果你不想深入了解原理和训练,只想用Faster-rcnn做目标检测任务的demo,请看这里torchvision中Faste…

  • 一文搞懂│php 中的 DI 依赖注入「建议收藏」

    一文搞懂│php 中的 DI 依赖注入「建议收藏」学好依赖注入,让编程更简单

  • sigprocmask sigaction

    sigprocmask sigaction sigprocmask:用于随时添加信号屏蔽字;sigaction :signal增强版本,当处理信号时,可以随意添加信号屏蔽字sigset_tnewmask,oldmask,pendmask;signal(SIGINT,sig_handler);sigemptyset(&amp;newmask);sigaddset(&amp;…

  • 二叉树后序遍历的非递归实现_二叉树的后序遍历非递归详细

    二叉树后序遍历的非递归实现_二叉树的后序遍历非递归详细一、递归实现前序,序,后序遍历;对于二叉树,前面已经采用递归的方式实现的其前序,中序,后序遍历,具体请参见:http://blog.csdn.net/dai_wen/article/details/78955411那么,如何采用非递归的方式遍历树呢?下面,以实现中序遍历二叉树为主题展开:二、非递归实现中序遍历:1,结构:首先,对于中序遍历,我们知道,原则是先走到的结点后访问,后走到的结点

  • spring mvc 使用@notNull 注解验证请求参数

    spring mvc 使用@notNull 注解验证请求参数springmvc使用@notNull注解验证请求参数使用方式@NotNull@Min@valid验证生效进阶注解接口校验逻辑实现自定义注解使用处理请求时,有些参数是必传或者必须遵循某些规则的,如果针对每个请求都写一遍验证的话相当繁琐,而且代码维护起来也麻烦,正好框架将参数校验的功能抽象处理啊了,我们可以利用这个完成80%的校验场景使用方式使用起来很简单,只需要加上几…

  • 最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通

    最新最全的微信小程序入门学习教程,微信小程序零基础入门到精通从今天开始就来带领大家学习微信小程序了,只要你跟着我一步步来,相信你也可以上线一款属于自己的微信小程序一,认识小程序微信⼩程序,简称⼩程序,英⽂名MiniProgramMiniProgram,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤“触⼿可及”的梦想,⽤⼾扫⼀扫或搜⼀下即可打开应⽤1-1,微信小程序的优势1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾;2.推⼴app或公众号的成本太⾼。3.开发适配成本低。4.容易⼩规模试错,然后快速迭代。5.跨平台。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号