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>最后的结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-09-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
