首页
视频
资源
登录
原
好看的好友列表页
4939
人阅读
2020/9/11 17:35
总访问:
2606205
评论:
2
收藏:
1
手机
分类:
前端
![](https://img.tnblog.net/arcimg/hb/00388f51255149cfbc07d5b4750fa0c0.png) >###index.html ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="container"> <div class="page"> <div class="main-panel"> <nav> <div class="buttons"> <i class="fas fa-chevron-left fa-lg"></i> <i class="fas fa-search fa-lg"></i> </div> <div class="menu"> <li>消息列表</li> <li>我的好友</li> <li>我的群聊</li> </div> </nav> <!-- 常用联系人面板 --> <section class="middle-panel"> <div class="favorite"> <div class="favorite-menu"> <span>常用联系人</span> <i class="fas fa-ellipsis-h"></i> </div> <div class="people"> <div class="profile"> <img src="https://img.tnblog.net/userdata/minheads/min_dbc68332d521436c983fbc3adc6d9c7f.jpeg" alt="头像" class="profile-image"> <div class="profile-name">剑轩</div> </div> <div class="profile"> <img src="https://img.tnblog.net/userdata/minheads/min_a011e63c901a433e847b6f0d3dbe1a2f.jpeg" alt="头像" class="profile-image"> <div class="profile-name">尘叶心繁</div> </div> <div class="profile"> <img src="https://image.tnblog.net/two_7827c815e90740d88ce58411ed22df1e.jpeg" alt="头像" class="profile-image"> <div class="profile-name">雨雨雨雨辰</div> </div> <div class="profile"> <img src="https://image.tnblog.net/ef4008e9c12444908c92a783f609639e.jpeg" alt="头像" class="profile-image"> <div class="profile-name">YOU</div> </div> <div class="profile"> <img src="https://img.tnblog.net/userdata/heads/82a6b1759e984a1c9d087b0c7cca2616.jpeg" alt="头像" class="profile-image"> <div class="profile-name">小可爱</div> </div> </div> </div> </section> <!-- 聊天面板 --> <section class="message-panel"> <div class="mask"></div> <div class="messages"> <div class="message"> <img src="https://img.tnblog.net/userdata/minheads/min_dbc68332d521436c983fbc3adc6d9c7f.jpeg" > <div class="info"> <div class="name">剑轩</div> <div class="context">人生漫长转瞬即逝 , 有人见尘埃 , 有人见星辰</div> </div> <div class="time"> 2020/09/11 </div> </div> <div class="message"> <img src="https://img.tnblog.net/userdata/minheads/min_a011e63c901a433e847b6f0d3dbe1a2f.jpeg" > <div class="info"> <div class="name">尘叶心繁</div> <div class="context">这一世以无限游戏为使命!</div> </div> <div class="time"> 2020/09/11 </div> </div> <div class="message"> <img src="https://image.tnblog.net/two_7827c815e90740d88ce58411ed22df1e.jpeg" > <div class="info"> <div class="name">雨雨雨雨辰</div> <div class="context">有个性,不需要签名</div> </div> <div class="time">2020/09/11</div> </div> <div class="message"> <img src="https://image.tnblog.net/ef4008e9c12444908c92a783f609639e.jpeg" > <div class="info"> <div class="name">YOU</div> <div class="context">幼儿园抢饭第一名</div> </div> <div class="time">2020/09/11</div> </div> <div class="message new"> <img src="https://img.tnblog.net/userdata/heads/82a6b1759e984a1c9d087b0c7cca2616.jpeg" > <div class="info"> <div class="name">小可爱</div> <div class="context">愿你善其身,愿你遇良人</div> </div> <div class="time">2020/09/11 <div class="new-message-icon"> 新消息 </div> </div> </div> </div> </section> </div> </div> </div> </body> </html> ``` >###style.css ```css body { font-family: "PingFang SC", sans-serif; } * { box-sizing: border-box; } ul, li { margin: 0; padding: 0; } .container { display: flex; align-items: center; justify-content: center; } .page { width: 375px; height: 812px; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1); margin: 48px 0; } /* 背景 */ .main-panel { background: #0061c4; min-height: 100%; display: flex; flex-direction: column; } /* 导航 */ nav { padding: 48px 24px 30px 24px; } .buttons { display: flex; justify-content: space-between; color: white; } .menu { display: flex; justify-content: space-between; } .menu li { list-style: none; color: rgba(255, 255, 255, 0.68); font-size: 18px; margin-top: 48px; } .menu active { color: white; } /* 常用联系人 */ .middle-panel { background: #f2f8fc; border-radius: 34px; padding: 30px 24px 100px 24px; margin-bottom: -80px; } .favorite-menu { display: flex; justify-content: space-between; } .favorite-menu span { font-size: 16px; color: #6f6f6f; } .favorite-menu i.fas { color: #6f6f6f; } .people { display: flex; justify-content: space-between; overflow: auto; flex-shrink: 0; margin-right: -20px; } .profile { text-align: center; padding: 20px 10px 0 20px; } .profile:first-child { padding-left: 0; } .profile:last-child { padding-right: 0; } .profile img, .message img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: center; } .profile .profile-name { font-size: 14px; color: #a5a9ad; margin-top: 6px; } /* 聊天面板 */ .message-panel { background: white; position: relative; border-radius: 48px 48px 0 0; overflow: hidden; display: flex; } .mask { width: 100%; height: 64px; border-radius: 48px 48px 0 0; background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100%); position: absolute; } .messages { overflow: auto; padding-right: 12px; padding-bottom: 24px; } .message { display: flex; align-items: center; padding: 10px 12px 10px 24px; } .message .info { flex: 4; color: #a5a9ad; padding-left: 20px; font-size: 14px; min-width: 0; } .message .info .name { color: #a5a9ad; padding-bottom: 8px; } .message .info .context { color: #657081; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .message .time { flex: 1; font-size: 14px; color: #858a98; padding-top: 4px; align-self: flex-start; text-align: right; } .message.new { background: rgba(27, 131, 246, 0.05); border-radius: 0 24px 24px 0; } .message .new-message-icon { background: rgba(239, 102, 102, 1); border-radius: 7px; font-size: 12px; color: white; padding: 3px 6px; margin-top: 6px; } /* 滚动条 */ *::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } *::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #535353; } *::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: #ededed; } ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
尘叶心繁
这一世以无限游戏为使命!
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net后台框架
168篇
linux
17篇
linux中cve
1篇
windows中cve
0篇
资源分享
10篇
Win32
3篇
前端
28篇
传说中的c
4篇
Xamarin
9篇
docker
15篇
容器编排
101篇
grpc
4篇
Go
15篇
yaml模板
1篇
理论
2篇
更多
Sqlserver
4篇
云产品
39篇
git
3篇
Unity
1篇
考证
2篇
RabbitMq
23篇
Harbor
1篇
Ansible
8篇
Jenkins
17篇
Vue
1篇
Ids4
18篇
istio
1篇
架构
2篇
网络
7篇
windbg
4篇
AI
18篇
threejs
2篇
人物
1篇
嵌入式
2篇
python
13篇
HuggingFace
8篇
pytorch
9篇
opencv
6篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术