amaze樣例頁面分析（一）
amaze樣例頁面分析（一）
1、總結
一、從審查（inspect）中是很清楚的能夠弄清楚這些part之間的結構關係的javascript
二、一者在於弄清楚他們之間的結構關係，兩者在於知道結構的每一部分是幹嗎的 css
三、inspect弄清結構：在inspect中把結構弄清楚這些東西就清楚了，而小塊我是懂的html
四、是按div分塊，而板塊位置不是代碼順序：全部的part都是一塊塊的，好比說那個返回頂端的右下角的那個，其實代碼就是在開頭，並且也是直接套div的，和別的板塊div也都是這樣一一分開的java
五、寫板塊：估計就是amaze裏面的板塊直接加到當前的板塊就好 ，就是先找到結構，而後amaze的板塊直接加到當前板塊就好jquery
2、截圖
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"/>//手機端縮放viewport聲明 6 <meta name="keywords" content="" /> 7 <meta name="description" content="" /> 8 <link rel="stylesheet" href="css/amazeui.min.css">//stylesheet用來引進css，確定是link標籤 9 <link rel="stylesheet" href="css/wap.css?2"> 10 <title>首頁</title> 11 </head> 12 <body> 13 <div data-am-widget="gotop" class="am-gotop am-gotop-fixed"> 14 <a href="#top" title=""> 15 <img class="am-gotop-icon-custom" src="img/goTop.png" />//下拉時候出現的返回頂端的那個標記 16 </a> 17 </div> 18 19 <div class="pet_mian" id="top">// 20 <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}' >//幻燈片 21 <ul class="am-slides"> 22 <li> 23 <img src="img/fl01.png"> 24 <div class="pet_slider_font"> 25 <span class="pet_slider_emoji"> (╭￣3￣)╭♡ </span> 26 <span>「大白」有望成爲現實：充氣機器人研究取得進展</span> 27 </div> 28 <div class="pet_slider_shadow"></div> 29 </li> 30 <li> 31 <img src="img/fl02.png"> 32 <div class="pet_slider_font"> 33 <span class="pet_slider_emoji"> []~(￣▽￣)~* </span> 34 <span>已然魔性的雪橇犬哈士奇 —《雪地狂奔》</span> 35 </div> 36 <div class="pet_slider_shadow"></div> 37 </li> 38 <li> 39 <img src="img/fl03.png"> 40 <div class="pet_slider_font"> 41 <span class="pet_slider_emoji"> (｡・`ω´･) </span> 42 <span>《星際爭霸2:虛空之遺》國服過審!</span> 43 </div> 44 <div class="pet_slider_shadow"></div> 45 </li> 46 </ul> 47 </div>//幻燈片結束 48 49 50 <div class="pet_circle_nav"> 51 <ul class="pet_circle_nav_list"> 52 <li><a href="" class="iconfont pet_nav_xinxianshi "></a><span>新鮮事</span></li> 53 <li><a href="" class="iconfont pet_nav_zhangzhishi "></a><span>趣聞</span></li> 54 <li><a href="" class="iconfont pet_nav_kantuya "></a><span>閱讀</span></li> 55 <li><a href="" class="iconfont pet_nav_mengzhuanti "></a><span>專題</span></li> 56 <li><a href="" class="iconfont pet_nav_meirong "></a><span>訂閱</span></li> 57 <li><a href="" class="iconfont pet_nav_yiyuan "></a><span>專欄</span></li> 58 <li><a href="" class="iconfont pet_nav_dianpu "></a><span>討論</span></li> 59 <li><a href="javascript:;" class="iconfont pet_nav_gengduo "></a><span>更多</span></li> 60 </ul> 61 <div class="pet_more_list"><div class="pet_more_list_block"> 62 <div class="iconfont pet_more_close">×</div> 63 <div class="pet_more_list_block"> 64 <div class="pet_more_list_block_name"> 65 <div class="pet_more_list_block_name_title">閱讀 Read</div> 66 <a class="pet_more_list_block_line"> 67 <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico"></i> 68 <div class="pet_more_list_block_line_font">新鮮事</div> 69 </a> 70 <a class="pet_more_list_block_line"> 71 <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico"></i> 72 <div class="pet_more_list_block_line_font">趣聞</div> 73 </a> 74 <a class="pet_more_list_block_line"> 75 <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico"></i> 76 <div class="pet_more_list_block_line_font">閱讀</div> 77 </a> 78 <a class="pet_more_list_block_line"> 79 <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico"></i> 80 <div class="pet_more_list_block_line_font">專題</div> 81 </a> 82 <a class="pet_more_list_block_line"> 83 <i class="iconfont pet_nav_bk pet_more_list_block_line_ico"></i> 84 <div class="pet_more_list_block_line_font">訂閱</div> 85 </a> 86 <a class="pet_more_list_block_line"> 87 <i class="iconfont pet_nav_wd pet_more_list_block_line_ico"></i> 88 <div class="pet_more_list_block_line_font">專欄</div> 89 </a> 90 <div class="pet_more_list_block_name_title pet_more_list_block_line_height">服務 Service</div> 91 <a class="pet_more_list_block_line"> 92 <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico"></i> 93 <div class="pet_more_list_block_line_font">新鮮事</div> 94 </a> 95 <a class="pet_more_list_block_line"> 96 <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico"></i> 97 <div class="pet_more_list_block_line_font">趣聞</div> 98 </a> 99 <a class="pet_more_list_block_line"> 100 <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico"></i> 101 <div class="pet_more_list_block_line_font">閱讀</div> 102 </a> 103 <a class="pet_more_list_block_line"> 104 <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico"></i> 105 <div class="pet_more_list_block_line_font">專題</div> 106 </a> 107 <a class="pet_more_list_block_line"> 108 <i class="iconfont pet_nav_bk pet_more_list_block_line_ico"></i> 109 <div class="pet_more_list_block_line_font">訂閱</div> 110 </a> 111 <a class="pet_more_list_block_line"> 112 <i class="iconfont pet_nav_wd pet_more_list_block_line_ico"></i> 113 <div class="pet_more_list_block_line_font">專欄</div> 114 </a> 115 </div> 116 </div> 117 118 </div></div> 119 </div> 120 <div class="pet_content_main"> 121 <div data-am-widget="list_news" class="am-list-news am-list-news-default" > 122 <div class="am-list-news-bd"> 123 <ul class="am-list"> 124 <!--縮略圖在標題右邊--> 125 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block"> 126 <div class="pet_list_one_info"> 127 <div class="pet_list_one_info_l"> 128 <div class="pet_list_one_info_ico"><img src="img/a1.png" alt=""></div> 129 <div class="pet_list_one_info_name">Super invincible 菁 </div> 130 </div> 131 <div class="pet_list_one_info_r"> 132 <div class="pet_list_tag pet_list_tag_xxs">新鮮事</div> 133 </div> 134 </div> 135 <div class=" am-u-sm-8 am-list-main pet_list_one_nr"> 136 <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">十一長假哪也不去，宅在家裏看電影！</a></h3> 137 <div class="am-list-item-text pet_list_one_text">每逢長假，總有那麼一羣人選擇遠離人山人海，靜靜地呆在家，坐在電腦電視前。長時間的工做學習讓他們感受很疲憊，對什麼都提不起勁，打開電腦殊不知道幹什麼好…</div> 138 139 </div> 140 <div class="am-u-sm-4 am-list-thumb"> 141 <a href="###" class=""> 142 <img src="img/q1.jpg" class="pet_list_one_img" alt=""/> 143 </a> 144 </div> 145 </li> 146 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block"> 147 <div class="pet_list_one_info"> 148 <div class="pet_list_one_info_l"> 149 <div class="pet_list_one_info_ico"><img src="img/a6.png" alt=""></div> 150 <div class="pet_list_one_info_name">La Da Dee</div> 151 </div> 152 <div class="pet_list_one_info_r"> 153 <div class="pet_list_tag pet_video_tag">視頻</div> 154 </div> 155 </div> 156 <div class=" am-u-sm-8 am-list-main pet_list_one_nr"> 157 <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">不是說好作彼此的天使嗎？連最後一口漢堡也不給我</a></h3> 158 <div class="am-list-item-text pet_list_one_text">國外網友waxiestapple在論壇Reddit貼出愛犬照片，指出「個人狗狗好像瘦了點」「由於我剛剛把最後一口漢堡吃掉」，只見這隻哈士奇一臉慘遭背叛的樣子，對主人露出至關難以想象的表情。</div> 159 160 </div> 161 <div class="am-u-sm-4 am-list-thumb pet_video_info"> 162 <div class="pet_video_info_tag"><i class="iconfont"></i>03:50</div> 163 <a href="###" class=""> 164 <img src="img/q4.jpg" class="pet_list_one_img" alt="我很囧，你保重....曬曬旅行中的那些囧！"/> 165 </a> 166 </div> 167 </li> 168 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block"> 169 <div class="pet_list_one_info"> 170 <div class="pet_list_one_info_l"> 171 <div class="pet_list_one_info_ico"><img src="img/a2.png" alt=""></div> 172 <div class="pet_list_one_info_name">AbsScript</div> 173 </div> 174 <div class="pet_list_one_info_r"> 175 <div class="pet_list_tag pet_list_tag_zzs">趣聞</div> 176 </div> 177 </div> 178 <div class=" am-u-sm-8 am-list-main pet_list_one_nr"> 179 <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">怦然心動！澳洲大眼寶寶逆天睫毛萌翻全球！</a></h3> 180 <div class="am-list-item-text pet_list_one_text">來自澳大利亞布里斯班的十個月大的萌寶Egypt擁有一雙修長的睫毛、清澈的眼眸，可愛的模樣讓她在社交網站上爆紅。</div> 181 182 </div> 183 <div class="am-u-sm-4 am-list-thumb"> 184 <a href="###" class=""> 185 <img src="img/q5.jpg" class="pet_list_one_img" alt="我很囧，你保重....曬曬旅行中的那些囧！"/> 186 </a> 187 </div> 188 </li> 189 190 <li class="am-g am-list-item-desced pet_list_one_block"> 191 <div class="pet_list_one_info"> 192 <div class="pet_list_one_info_l"> 193 <div class="pet_list_one_info_ico"><img src="img/a3.png" alt=""></div> 194 <div class="pet_list_one_info_name">養了貓的飛飛</div> 195 </div> 196 <div class="pet_list_one_info_r"> 197 <div class="pet_list_tag pet_list_tag_stj">閱讀</div> 198 </div> 199 </div> 200 <div class=" am-list-main"> 201 <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">浣熊孤兒掉到樹下，被一家人收養以後……</a></h3> 202 <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 203 am-avg-md-3 am-avg-lg-3 am-gallery-default pet_list_one_list" > 204 <li> 205 <div class="am-gallery-item"> 206 <a href="###" class=""> 207 <img src="img/qq1.jpg" alt="某天 也許會相遇 相遇在這個好地方"/> 208 </a> 209 </div> 210 </li> 211 <li> 212 <div class="am-gallery-item"> 213 <a href="###" class=""> 214 <img src="img/qq2.jpg" alt="不要太擔憂 只由於我相信"/> 215 </a> 216 </div> 217 </li> 218 <li> 219 <div class="am-gallery-item"> 220 <a href="###" class=""> 221 <img src="img/qq3.jpg" alt="終會走過這條遙遠的道路"/> 222 </a> 223 </div> 224 </li> 225 </ul> 226 <div class="am-list-item-text pet_list_two_text">巴哈馬拿騷的居民Rosie Kemp發現一個剛出生的浣熊，掉在了樹下。由於找不到小浣熊的媽媽了，Rosie和她的女兒Laura Young決定收養這隻小東西，並給她取名「小南瓜」。</div> 227 </div> 228 </li> 229 230 <li class="am-g am-list-item-desced pet_list_one_block"> 231 <div class="pet_list_one_info"> 232 <div class="pet_list_one_info_tytj"><i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico pet_list_tytj_ico"></i>諾獎得主回憶通知獲獎那一刻</div> 233 <div class="pet_list_one_info_r"> 234 <div class="pet_list_tag pet_list_tag_kty">圖集</div> 235 </div> 236 </div> 237 <div class=" am-list-main"> 238 <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 239 am-avg-md-3 am-avg-lg-3 am-gallery-default pet_list_one_list pet_list_one_tytj" > 240 <li> 241 <div class="am-gallery-item"> 242 <a href="###" class=""> 243 <img src="img/w1.jpg" alt="某天 也許會相遇 相遇在這個好地方"/> 244 </a> 245 </div> 246 </li> 247 <li> 248 <div class="am-gallery-item"> 249 <a href="###" class=""> 250 <img src="img/w2.jpg" alt="不要太擔憂 只由於我相信"/> 251 </a> 252 </div> 253 </li> 254 <li> 255 <div class="am-gallery-item"> 256 <a href="###" class=""> 257 <img src="img/w3.jpg" alt="終會走過這條遙遠的道路"/> 258 </a> 259 </div> 260 </li> 261 <li> 262 <div class="am-gallery-item"> 263 <a href="###" class=""> 264 <img src="img/w4.jpg" alt="終會走過這條遙遠的道路"/> 265 </a> 266 </div> 267 </li> 268 <li> 269 <div class="am-gallery-item"> 270 <a href="###" class=""> 271 <img src="img/w5.jpg" alt="終會走過這條遙遠的道路"/> 272 </a> 273 </div> 274 </li> 275 <li> 276 <div class="am-gallery-item"> 277 <a href="###" class=""> 278 <img src="img/w6.jpg" alt="終會走過這條遙遠的道路"/> 279 </a> 280 </div> 281 </li> 282 </ul> 283 </li> 284 <li class="am-g am-list-item-desced pet_list_one_block"> 285 <div class="pet_list_one_info"> 286 <div class="pet_list_one_info_l"> 287 <div class="pet_list_one_info_ico"><img src="img/a4.png" alt=""></div> 288 <div class="pet_list_one_info_name">大兔</div> 289 </div> 290 <div class="pet_list_one_info_r"> 291 <div class="pet_list_tag pet_list_tag_zzs">趣聞</div> 292 </div> 293 </div> 294 <div class=" am-list-main"> 295 <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">「你的旅行，是什麼顏色？」 曬照片，換北歐夢幻極光之旅！</a></h3> 296 297 298 <div class="am-list-item-text pet_list_two_text">狗狗會每天的跟着咱們生活在一塊兒，它們的一切都會影響着主人，尤爲是狗狗身上散發的味道，會無時無刻的對主人有影響，若是狗狗身體有異味，主人就會用過於香噴噴的洗漱品幫狗狗洗澡，這樣不只對狗狗身體有傷害，還會容易患上皮膚病，其實，咱們知道一些小技巧，就會改善狗狗身上存在的味道。</div> 299 300 </div> 301 </li> 302 <li class="am-g am-list-item-desced pet_list_one_block"> 303 <div class="pet_list_one_info"> 304 <div class="pet_list_one_info_l"> 305 <div class="pet_list_one_info_ico"><img src="img/a5.png" alt=""></div> 306 <div class="pet_list_one_info_name">Hope</div> 307 </div> 308 <div class="pet_list_one_info_r"> 309 <div class="pet_list_tag pet_list_tag_mzt">萌專題</div> 310 </div> 311 </div> 312 <div class=" am-list-main"> 313 <h3 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">心情很差了，就來看看這隻狗！</a></h3> 314 <div class="pet_list_zt_img"><img src="img/c1.png" alt=""></div> 315 316 <div class="am-list-item-text pet_list_two_text">貓咪不像人，貓咪的情緒不會寫在臉上，反饋給咱們的信息更多的應該是行爲上肢體上的，固然從叫聲中也會反應一些信息，那麼要想「抓住它的心，就必定要抓住它的胃嗎？」從它的行爲和肢體語言當中咱們能夠讀懂什麼呢？</div> 317 318 </div> 319 </li> 320 <li class="am-g am-list-item-desced pet_list_one_block"> 321 <div class="pet_article_user_block"> 322 <div class="pet_article_user_img"> 323 <div class="pet_article_user_shadow"></div> 324 <div class="pet_article_user_title">一週在任意地點工做三天？</div> 325 <img src="img/c2.png" alt=""></div> 326 <div class="pet_article_user_info"> 327 <div class="pet_article_user_info_ico"><img src="img/c.png" alt=""></div>SeeYouAgain 328 </div> 329 <div class="am-list-item-text pet_article_user_nr">這是一家幫助客戶在亞太地區找到適合的打折酒店的中介機構，在全球設立了9個辦事處，老闆克里斯蒂安·米施勒宣稱要把它打形成世界上最棒的公司。</div> 330 </div> 331 </li> 332 </ul> 333 </div> 334 335 </div> 336 337 </div> 338 <div class="pet_article_dowload pet_dowload_more_top_off"> 339 <div class="pet_article_dowload_title">關於Amaze UI</div> 340 <div class="pet_article_dowload_content pet_dowload_more_top_bg"><div class="pet_article_dowload_triangle pet_dowload_more_top_san"></div> 341 <div class="pet_article_dowload_ico"><img src="img/footdon.png" alt=""></div> 342 <div class="pet_article_dowload_content_font"> 343 Amaze UI 以移動優先（Mobile first）爲理念，從小屏逐步擴展到大屏，最終實現全部屏幕適配，適應移動互聯潮流。 </div> 344 <div class="pet_article_dowload_all"> 345 <a href="###" class="pet_article_dowload_Az am-icon-apple"> App store</a> 346 <a href="###" class="pet_article_dowload_Pg am-icon-android"> Android</a> 347 </div> 348 </div> 349 <div class="pet_article_footer_info">Copyright(c)2015 Amaze UI All Rights Reserved</div> 350 </div> 351 </div> 352 353 <script src="js/jquery.min.js"></script> 354 <script src="js/amazeui.min.js"></script> 355 <script> 356 $(function(){ 357 358 // 動態計算新聞列表文字樣式 359 auto_resize(); 360 $(window).resize(function() { 361 auto_resize(); 362 }); 363 $('.am-list-thumb img').load(function(){ 364 auto_resize(); 365 }); 366 367 $('.am-list > li:last-child').css('border','none'); 368 function auto_resize(){ 369 $('.pet_list_one_nr').height($('.pet_list_one_img').height()); 370 371 } 372 $('.pet_nav_gengduo').on('click',function(){ 373 $('.pet_more_list').addClass('pet_more_list_show'); 374 }); 375 $('.pet_more_close').on('click',function(){ 376 $('.pet_more_list').removeClass('pet_more_list_show'); 377 }); 378 }); 379 380 </script> 381 </body> 382 </html>
相關文章
- 1. 怎樣分析頁面加載慢
- 2. 頁面分析：頁面停留時間+頁面路徑分析
- 3. Amaze UI Web 與 Amaze UI Touch 有什麼不一樣？一張圖給你解釋！
- 4. sqlite頁面分析
- 5. Tableau 網站流量分析案例之頁面指標分析（一）
- 6. Netty 簡單樣例分析
- 7. helloWorld樣例結構分析
- 8. 前端頁面樣式（一）
- 9. Spark案例分析——不一樣區域熱點商品分析
- 10. css 頁面比例縮放樣式
- 更多相關文章...
- • XSL-FO 頁面 - XSL-FO 教程
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
