amazeui頁面分析5

一、總結

1、把原模板當成樣例集合就好

2、都是一塊一塊的，刪改等操作都方便

3、list方面的操作很多都是ui配合li

4、其實容器本質還是div，所以真的算簡單了

5、樣式的話，照著已有樣例 改就好了?

?

?

二、知識點

1、列表頁里面的每一項完全可以是一樣的，那就很好做了

?

?2、一行多個元素的話，很可能是在同一個div里面

<div class="pet_zlnr_user_list"><div class="pet_zlnr_user_list_l"><img src="img/qq2.png" alt=""><img src="img/qq3.png" alt=""><img src="img/qq4.png" alt=""><div class="pet_zlnr_user_list_l_num">+56</div><div class="pet_zlnr_user_list_l_num_font">喜歡</div></div><div class="pet_zlnr_user_list_r"><div class="pet_zlnr_user_list_r">15 條回復</div></div> </div>

一個個小頭像就是一個個img，

pet_zlnr_user_list_r：這種都是wap.css里面的樣式

.pet_zlnr_user_list_r { float: right; font-size: 14px; height: 25px; line-height: 25px; color: #222; }

?

3、聊天框

一個菱形啦

<div class="pet_sixin_to_r_nr_sj"></div>

?

4、頭像左右

有點類似amaze 里面的flip，只是叫法不同

一半頭像一半文字這個很好實現，因為樣式都給你做好了，你只需要放頭像和聊天文字到響應的位置即可

?

5、

只是需要把放文字的地方替換成圖像就好

時間的話直接是放在一個div里面的

<div class="pet_sixin_shijian">昨天 12:36</div>

?

6、

直接照著框架一點點改就好了，很簡單的，已經很全了

?

7、

?

轉載于:https://www.cnblogs.com/Renyi-Fan/p/9016869.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的amazeui页面分析5的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。