好看的好友列表页

电脑版发表于：2020/9/11 17:35

![](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;
}

```

好看的好友列表页

{{item.title}}