【学习前端第十六课】微信页面

-Wake-

已于 2024-01-18 00:54:10 修改

阅读量850

点赞数 26

分类专栏：【前端】入门到就业文章标签：前端学习微信 html5 css

于 2024-01-18 00:20:34 首次发布

本文链接：https://blog.csdn.net/weixin_65729202/article/details/135647865

版权

【前端】入门到就业专栏收录该内容

79 篇文章 1 订阅

订阅专栏

课程内容
使用弹性布局制作基于移动端的页面布局

效果

在这里插入图片描述

代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>01微信页面的作业</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}

			#app {
				width: 100vw;
				height: 100vh;
				display: flex;
				flex-direction: column;
			}

			.content-box {
				flex: 1;
				/* flex:1是自己拉伸开了主轴，相当于接开了高度 */
				background-color: #EDEDED;
				overflow: auto;
			}

			.tab-bar {
				height: 55px;
				background-color: #F7F7F7;
				border-top: 1px solid #DEDEDE;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}

			.tab-bar>li {
				width: 55px;
				height: 100%;
				display: flex;
				flex-direction: column;
				font-size: 12px;
				align-items: center;
				justify-content: space-around;
			}

			.tab-bar>li>img {
				width: 32px;
				height: 32px;
			}

			.user-info-box {
				background-color: #ffffff;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				box-sizing: border-box;
				padding: 20px 20px;
			}

			.user-info-box>.left-box {
				width: 60px;
				height: 60px;
			}

			.user-info-box>.left-box>img {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}

			.right-box {
				flex: 1;
				/* 拉开了主轴，也就是拉开了宽度，说明宽度上面有弹性 */
				margin-left: 20px;
			}

			.nick-name {
				font-weight: bold;
				height: 30px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.wx-no {
				font-size: 12px;
				color: #999999;
				display: flex;
				height: 30px;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.qrcode-img {
				width: 12px;
				height: 12px;
			}

			.right-pointer {
				font-size: 16px;
			}

			.right-box .status {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 30px;

			}

			.right-box .status>div {
				border: 1px solid #D8D8D8;
				height: 20px;
				padding: 0px 5px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border-radius: 15px;
				font-size: 12px;
				margin-right: 5px;
			}

			.menu-group {
				background-color: white;
				margin-top: 10px;
			}

			.menu-group>li {
				height: 40px;
				display: flex;
				flex-direction: row;
			}

			.menu-group>li>.left {
				width: 50px;
				height: 40px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.menu-group>li>.right {
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				padding-right: 10px;
			}

			.menu-group>li>.left>img {
				width: 18px;
				height: 18px;
			}
			.menu-group>li:not(:last-child)>.right{
				border-bottom: 1px solid #ececec;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="content-box">
				<div class="user-info-box">
					<div class="left-box">
						<img src="./img/photo.png">
					</div>
					<ul class="right-box">
						<li class="nick-name">-Wake-</li>
						<li class="wx-no">
							<div>微信号：123456</div>
							<div>
								<img class="qrcode-img" src="./img/qrcode.png">
								<span class="right-pointer">&gt;</span>
							</div>
						</li>
						<li class="status">
							<div>
								<span>+</span>
								<span>状态</span>
							</div>
							<div>
								···
							</div>
						</li>
					</ul>
				</div>
				<!-- 菜单列表项 -->
				<ul class="menu-group">
					<li>
						<div class="left">
							<img src="./img/05.png">
						</div>
						<div class="right">
							<span>支付</span>
							<span>&gt;</span>
						</div>
					</li>
				</ul>
				<ul class="menu-group">
					<li>
						<div class="left">
							<img src="./img/05.png">
						</div>
						<div class="right">
							<span>收藏</span>
							<span>&gt;</span>
						</div>
					</li>
					<li>
						<div class="left">
							<img src="./img/02.png">
						</div>
						<div class="right">
							<span>朋友圈</span>
							<span>&gt;</span>
						</div>
					</li>
					<li>
						<div class="left">
							<img src="./img/03.png">
						</div>
						<div class="right">
							<span>卡包</span>
							<span>&gt;</span>
						</div>
					</li>
					<li>
						<div class="left">
							<img src="./img/04.png">
						</div>
						<div class="right">
							<span>表情</span>
							<span>&gt;</span>
						</div>
					</li>
				</ul>
				<ul class="menu-group">
					<li>
						<div class="left">
							<img src="./img/05.png">
						</div>
						<div class="right">
							<span>设置</span>
							<span>&gt;</span>
						</div>
					</li>
				</ul>
			</div>
			<ul class="tab-bar">
				<li>
					<img src="./img/021.png">
					<span>消息</span>
				</li>
				<li>
					<img src="./img/031.png">
					<span>通讯录</span>
				</li>
				<li>
					<img src="./img/041.png">
					<span>发现</span>
				</li>
				<li>
					<img src="./img/011.png">
					<span>我</span>
				</li>
			</ul>
		</div>
	</body>
</html>
<!-- 
	使用了flex拉开的区域，最好还是添加一个overflow:auto来防止被撑大
 -->