tnblog
首页
视频
资源
登录
原

好看的好友列表页

6420人阅读 2020/9/11 17:35 总访问：3467496 评论：2 收藏：1 手机
分类: 前端

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
  7.         <link rel="stylesheet" type="text/css" href="css/style.css"/>
  8.     </head>
  9.     <body>
  10.         <div class="container">
  11.             <div class="page">
  12.                 <div class="main-panel">
  13.                     <nav>
  14.                         <div class="buttons">
  15.                             <i class="fas fa-chevron-left fa-lg"></i>
  16.                             <i class="fas fa-search fa-lg"></i>
  17.                         </div>
  18.                         <div class="menu">
  19.                             <li>消息列表</li>
  20.                             <li>我的好友</li>
  21.                             <li>我的群聊</li>
  22.                         </div>
  23.                     </nav>
  25.                     <!-- 常用联系人面板 -->
  26.                     <section class="middle-panel">
  27.                         <div class="favorite">
  28.                             <div class="favorite-menu">
  29.                                 <span>常用联系人</span>
  30.                                 <i class="fas fa-ellipsis-h"></i>
  31.                             </div>
  32.                             <div class="people">
  33.                                 <div class="profile">
  34.                                     <img src="https://img.tnblog.net/userdata/minheads/min_dbc68332d521436c983fbc3adc6d9c7f.jpeg" alt="头像" class="profile-image">
  35.                                     <div class="profile-name">剑轩</div>
  36.                                 </div>
  37.                                 <div class="profile">
  38.                                     <img src="https://img.tnblog.net/userdata/minheads/min_a011e63c901a433e847b6f0d3dbe1a2f.jpeg" alt="头像" class="profile-image">
  39.                                     <div class="profile-name">尘叶心繁</div>
  40.                                 </div>
  41.                                 <div class="profile">
  42.                                     <img src="https://image.tnblog.net/two_7827c815e90740d88ce58411ed22df1e.jpeg" alt="头像" class="profile-image">
  43.                                     <div class="profile-name">雨雨雨雨辰</div>
  44.                                 </div>
  45.                                 <div class="profile">
  46.                                     <img src="https://image.tnblog.net/ef4008e9c12444908c92a783f609639e.jpeg" alt="头像" class="profile-image">
  47.                                     <div class="profile-name">YOU</div>
  48.                                 </div>
  49.                                 <div class="profile">
  50.                                     <img src="https://img.tnblog.net/userdata/heads/82a6b1759e984a1c9d087b0c7cca2616.jpeg" alt="头像" class="profile-image">
  51.                                     <div class="profile-name">小可爱</div>
  52.                                 </div>
  53.                             </div>
  54.                         </div>
  55.                     </section>
  56.                     <!-- 聊天面板 -->
  57.                     <section class="message-panel">
  58.                         <div class="mask"></div>
  59.                         <div class="messages">
  60.                             <div class="message">
  61.                                 <img src="https://img.tnblog.net/userdata/minheads/min_dbc68332d521436c983fbc3adc6d9c7f.jpeg" >
  62.                                 <div class="info">
  63.                                     <div class="name">剑轩</div>
  64.                                     <div class="context">人生漫长转瞬即逝 , 有人见尘埃 , 有人见星辰</div>
  65.                                 </div>
  66.                                 <div class="time">
  67.                                     2020/09/11
  68.                                 </div>
  69.                             </div>
  70.                             <div class="message">
  71.                                 <img src="https://img.tnblog.net/userdata/minheads/min_a011e63c901a433e847b6f0d3dbe1a2f.jpeg" >
  72.                                 <div class="info">
  73.                                     <div class="name">尘叶心繁</div>
  74.                                     <div class="context">这一世以无限游戏为使命！</div>
  75.                                 </div>
  76.                                 <div class="time">
  77.                                     2020/09/11
  78.                                 </div>
  79.                             </div>
  80.                             <div class="message">
  81.                                 <img src="https://image.tnblog.net/two_7827c815e90740d88ce58411ed22df1e.jpeg" >
  82.                                 <div class="info">
  83.                                     <div class="name">雨雨雨雨辰</div>
  84.                                     <div class="context">有个性,不需要签名</div>
  85.                                 </div>
  86.                                 <div class="time">2020/09/11</div>
  87.                             </div>
  88.                             <div class="message">
  89.                                 <img src="https://image.tnblog.net/ef4008e9c12444908c92a783f609639e.jpeg" >
  90.                                 <div class="info">
  91.                                     <div class="name">YOU</div>
  92.                                     <div class="context">幼儿园抢饭第一名</div>
  93.                                 </div>
  94.                                 <div class="time">2020/09/11</div>
  95.                             </div>
  96.                             <div class="message new">
  97.                                 <img src="https://img.tnblog.net/userdata/heads/82a6b1759e984a1c9d087b0c7cca2616.jpeg" >
  98.                                 <div class="info">
  99.                                     <div class="name">小可爱</div>
  100.                                     <div class="context">愿你善其身，愿你遇良人</div>
  101.                                 </div>
  102.                                 <div class="time">2020/09/11
  103.                                   <div class="new-message-icon">
  104.                                     新消息
  105.                                   </div>
  106.                                 </div>
  107.                             </div>
  108.                         </div>
  109.                     </section>
  110.                 </div>
  111.             </div>
  112.         </div>
  113.     </body>
  114. </html>

style.css

  1. body {
  2.     font-family: "PingFang SC", sans-serif;
  3. }
  5. * {
  6.     box-sizing: border-box;
  7. }
  9. ul,
  10. li {
  11.     margin: 0;
  12.     padding: 0;
  13. }
  15. .container {
  16.     display: flex;
  17.     align-items: center;
  18.     justify-content: center;
  19. }
  21. .page {
  22.     width: 375px;
  23.     height: 812px;
  24.     box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
  25.     margin: 48px 0;
  27. }
  29. /* 背景 */
  30. .main-panel {
  31.     background: #0061c4;
  32.     min-height: 100%;
  33.     display: flex;
  34.     flex-direction: column;
  35. }
  37. /* 导航 */
  38. nav {
  39.     padding: 48px 24px 30px 24px;
  40. }
  42. .buttons {
  43.     display: flex;
  44.     justify-content: space-between;
  45.     color: white;
  46. }
  48. .menu {
  49.     display: flex;
  50.     justify-content: space-between;
  51. }
  53. .menu li {
  54.     list-style: none;
  55.     color: rgba(255, 255, 255, 0.68);
  56.     font-size: 18px;
  57.     margin-top: 48px;
  58. }
  60. .menu active {
  61.     color: white;
  62. }
  64. /* 常用联系人 */
  65. .middle-panel {
  66.     background: #f2f8fc;
  67.     border-radius: 34px;
  68.     padding: 30px 24px 100px 24px;
  69.     margin-bottom: -80px;
  70. }
  72. .favorite-menu {
  73.     display: flex;
  74.     justify-content: space-between;
  75. }
  77. .favorite-menu span {
  78.     font-size: 16px;
  79.     color: #6f6f6f;
  80. }
  82. .favorite-menu i.fas {
  83.     color: #6f6f6f;
  84. }
  86. .people {
  87.     display: flex;
  88.     justify-content: space-between;
  89.     overflow: auto;
  90.     flex-shrink: 0;
  91.     margin-right: -20px;
  92. }
  94. .profile {
  95.     text-align: center;
  96.     padding: 20px 10px 0 20px;
  97. }
  99. .profile:first-child {
  100.     padding-left: 0;
  101. }
  103. .profile:last-child {
  104.     padding-right: 0;
  105. }
  107. .profile img,
  108. .message img {
  109.     width: 60px;
  110.     height: 60px;
  111.     border-radius: 50%;
  112.     object-fit: cover;
  113.     object-position: center;
  114. }
  116. .profile .profile-name {
  117.     font-size: 14px;
  118.     color: #a5a9ad;
  119.     margin-top: 6px;
  120. }
  122. /* 聊天面板 */
  123. .message-panel {
  124.     background: white;
  125.     position: relative;
  126.     border-radius: 48px 48px 0 0;
  127.     overflow: hidden;
  128.     display: flex;
  129. }
  131. .mask {
  132.     width: 100%;
  133.     height: 64px;
  134.     border-radius: 48px 48px 0 0;
  135.     background-image: linear-gradient(180deg,
  136.         rgba(255, 255, 255, 1) 0%,
  137.         rgba(255, 255, 255, 0.6) 60%,
  138.         rgba(255, 255, 255, 0) 100%);
  139.     position: absolute;
  140. }
  142. .messages {
  143.     overflow: auto;
  144.     padding-right: 12px;
  145.     padding-bottom: 24px;
  146. }
  148. .message {
  149.     display: flex;
  150.     align-items: center;
  151.     padding: 10px 12px 10px 24px;
  152. }
  154. .message .info {
  155.     flex: 4;
  156.     color: #a5a9ad;
  157.     padding-left: 20px;
  158.     font-size: 14px;
  159.     min-width: 0;
  160. }
  162. .message .info .name {
  163.     color: #a5a9ad;
  164.     padding-bottom: 8px;
  165. }
  167. .message .info .context {
  168.     color: #657081;
  169.     text-overflow: ellipsis;
  170.     white-space: nowrap;
  171.     overflow: hidden;
  172. }
  174. .message .time {
  175.     flex: 1;
  176.     font-size: 14px;
  177.     color: #858a98;
  178.     padding-top: 4px;
  179.     align-self: flex-start;
  180.     text-align: right;
  181. }
  183. .message.new {
  184.     background: rgba(27, 131, 246, 0.05);
  185.     border-radius: 0 24px 24px 0;
  186. }
  188. .message .new-message-icon {
  189.     background: rgba(239, 102, 102, 1);
  190.     border-radius: 7px;
  191.     font-size: 12px;
  192.     color: white;
  193.     padding: 3px 6px;
  194.     margin-top: 6px;
  195. }
  197. /* 滚动条 */
  200. *::-webkit-scrollbar {
  201.     /*滚动条整体样式*/
  202.     width: 10px;
  203.     /*高宽分别对应横竖滚动条的尺寸*/
  204.     height: 1px;
  205. }
  207. *::-webkit-scrollbar-thumb {
  208.     /*滚动条里面小方块*/
  209.     border-radius: 10px;
  210.     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  211.     background: #535353;
  212. }
  214. *::-webkit-scrollbar-track {
  215.     /*滚动条里面轨道*/
  216.     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  217.     border-radius: 10px;
  218.     background: #ededed;
  219. }

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价

bk

2020/9/14 11:52:00

长篇代码就放 github 上嘛

回复
尘叶心繁:@bk没得那种习惯

2020/9/16 13:50:20 回复

这一世以无限游戏为使命！
博主信息
排名
2
文章
634
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术