HTML登录页面

小程序个人信息页面(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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

第二步：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

第三步：完整代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

最后的结果：