HTML登录页面

ゝ一世哀愁。 2024-04-01 14:08 85阅读 0赞

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

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

### 第一步：搭建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>
    			</button>
    		</div>			
    	</view>

### 第二步：CSS渲染 ###

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

### 第三步：完整代码 ###

<template>
    	
    	<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>
    			</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>

**最后的结果**：  
![在这里插入图片描述][23476759cb45433f9f52bcf272013fa3.png]

[23476759cb45433f9f52bcf272013fa3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/93f36596f6d145a68bffcb96230add84.png