HTML登录页面

小程序个人信息页面(uniapp)

简介：本文以最简洁的语言，来为读者分享一个漂亮的app个性信息页面，使用的编译器为HBuilderX，app的平台为uniapp，本文主要讲解思路，就算大家后面使用安卓，微信小程序等等其他平台，只要明白了我的思路，做起来便是很简单的事情。

第一步：搭建HTML框架

<!-- 构建html架构 -->
	<view class="body">
		<!-- 该页标题 -->
		<h2>个人信息</h2>
				
		<!-- 插入图片 也就是头像部分-->
		<img src="../../static/images/head.png" alt="">
		
		<!-- 输入信息部分 -->
		<div class="cinput">           
			<span style="font-size:16px;">
				姓名:<input type="text" class="input" placeholder="来点天使吗"/>
			</span>
			<br>
			<br>
			<span style="font-size:16px;">
				学号:<input type="text" class="input" placeholder="1910317"/>
			</span>
			<br>
			<br>
			<span style="font-size:16px;">
				班级:<input type="text" class="input" placeholder="电商1941"/>
			</span>
			<br>
			<br>
			<span style="font-size:16px;">
				简介:<input type="text" class="input" placeholder="睡觉ing"/>
			</span>
			
		</div>

		<!-- 最后加个按钮 -->
		<div class="btn">
			<!-- 设置按钮样式 -->
			<button type="primary">
				<!-- 用p标签包裹信息的话更好设置内部内容的样式 -->
				<p>编辑个人信息</p>
			</button>
		</div>			
	</view>

第二步：CSS渲染

下面把每一步的样式的详细思路标注了出来。

<style lang="scss">
	.body{
		// 设置项目背景
		background: url("../../static/images/bg1.png");
		background-repeat:no-repeat;
	    background-size:100%;
		// 设置窗口大小
		height: 1000px;
	}
	// 设置标题样式
	h2{		
		// 把字体设置到中央
		text-align: center;		
		
		// 设置外边距
		padding-top: 10px;
		
		// 设置字体为楷体
		font-family:"楷体";
	}
	// 设置头像的样式
	img{
		// 头像的宽高
		width: 148px;
		height: 148px;
		
		//头像为圆角
		border-radius: 15% ;
		
		// 设置图片的上内边距
		margin-top: 30px;
		
		// 设置图片的左内边距
		margin-left: 115px;
	}
	// 设置输入框样式
	.cinput{
		// 距离上方的距离
		margin-top: 30px;
		// 设置左边的内边距		
		margin-left: 50px;
		
		// 设置font为加粗
		font-weight: 700;
	}

	p{
		// 设置文字的外边距
		padding: 2px;
		
		// 设置字体大小
		font-size: 12px;
	}
	.btn{
		// 设置按钮的左边的和上面的内边距
		margin-top: 50px;
		margin-left: 140px;
		
		// 设置大小
		width: 120px;
		height: 20px;
	}
	// 设置按钮样式
	button{
		// 设置按钮的背景颜色
		background-color: #aa00ff;
	}
	
	// 设置输入样式
	input{		
	   // 因为uniapp默认input标签是占一行所以需要 设置为行内块元素
	   // 不然会换行
	   display: inline-block;
	   
	   // 设置左边的内边距
	   margin-left: 20px;
	   
	   // 首先先去掉输入框的边框
	   border:0;
	   
	   // 然后再给地步加上边框
	   border-bottom:1px solid #c0c0c0;
	   
	   // 将轮廓置为0
	   outline:0;
	   
	   // 输入文本的时候从中间开始
	   text-align:center; 
	   // width:250px;
	   font-size:16px;   
	}
</style>

第三步：完整代码

<template>
	<!-- 构建html架构 -->
	<view class="body">
		<!-- 该页标题 -->
		<h2>个人信息</h2>
				
		<!-- 插入图片 也就是头像部分-->
		<img src="../../static/images/head.png" alt="">
		
		<!-- 输入信息部分 -->
		<div class="cinput">
			<span style="font-size:16px;">
				姓名:<input type="text" class="input" placeholder="来点天使吗"/>
			</span>
			<br>
			<br>
			<span style="font-size:16px;">
				学号:<input type="text" class="input" placeholder="1910317"/>
			</span>
			<br>
			<br>
			<span style="font-size:16px;">
				班级:<input type="text" class="input" placeholder="电商1941"/>
			</span>
			<br>
			<br>
			<span style="font-size:16px;">
				简介:<input type="text" class="input" placeholder="睡觉ing"/>
			</span>
			
		</div>

	
		<div class="btn">
			<!-- 设置按钮样式 -->
			<button type="primary">
				<!-- 用p标签包裹信息的话更好设置内部内容的样式 -->
				<p>编辑个人信息</p>
			</button>
		</div>			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.body{
		// 设置项目背景
		background: url("../../static/images/bg1.png");
		background-repeat:no-repeat;
	    background-size:100%;
		// 设置窗口大小
		height: 1000px;
	}
	// 设置标题样式
	h2{		
		// 把字体设置到中央
		text-align: center;		
		
		// 设置外边距
		padding-top: 10px;
		
		// 设置字体为楷体
		font-family:"楷体";
	}
	// 设置头像的样式
	img{
		// 头像的宽高
		width: 148px;
		height: 148px;
		
		//头像为圆角
		border-radius: 15% ;
		
		// 设置图片的上内边距
		margin-top: 30px;
		
		// 设置图片的左内边距
		margin-left: 115px;
	}
	// 设置输入框样式
	.cinput{
		// 距离上方的距离
		margin-top: 30px;
		// 设置左边的内边距		
		margin-left: 50px;
		
		// 设置font为加粗
		font-weight: 700;
	}

	p{
		// 设置文字的外边距
		padding: 2px;
		
		// 设置字体大小
		font-size: 12px;
	}
	.btn{
		// 设置按钮的左边的和上面的内边距
		margin-top: 50px;
		margin-left: 140px;
		
		// 设置大小
		width: 120px;
		height: 20px;
	}
	// 设置按钮样式
	button{
		// 设置按钮的背景颜色
		background-color: #aa00ff;
	}
	
	// 设置输入样式
	input{		
	   // 因为uniapp默认input标签是占一行所以需要 设置为行内块元素
	   // 不然会换行
	   display: inline-block;
	   
	   // 设置左边的内边距
	   margin-left: 20px;
	   
	   // 首先先去掉输入框的边框
	   border:0;
	   
	   // 然后再给地步加上边框
	   border-bottom:1px solid #c0c0c0;
	   
	   // 将轮廓置为0
	   outline:0;
	   
	   // 输入文本的时候从中间开始
	   text-align:center; 
	   // width:250px;
	   font-size:16px;   
	}
</style>

最后的结果：