当前博客:自制常用UI-我的信息页面制作(2)

169 次浏览【转载需注明来源】


话接上集~

接着搞起来~

一步一步来吧!

标题部分,让他压在头像区的上面,先给他一个定位固定和堆叠顺序999.他就飘了~

背景颜色我们设置成半透明的,磨砂感,嘎嘎高级!

 .标题{
        文本颜色: 颜色值-白色;
        宽度: 100%;
        高度: 60rpx;
        行高:60rpx;
        文本-对齐: 居中;   /*给定尺寸,居中*/
        
        定位:固定;
        顶部: 0;
        左侧: 0;
        堆叠顺序: 999;    /*固定放在顶部,不被别的标签影响*/
        
        背景-颜色: 颜色通道(0,0,0,0.1); /*半透明,最后0.1代表透明度*/
    }
Markup

参照图的头像区域背景图好看嘛? 我们用一行代码做出来的一点不比那个差,渐变色也很好看!

.头像区{
	    背景-图像: 线性渐变(to 右侧 ,#53c68c, #b2e6cc);  /*设置头像区的背景,没有特别合适的背景图片,用渐变色是非常不错的选择,简洁好看*/
	    宽度: 100%;
	    高度:400rpx;
	}
Markup

再给上一个宽高的值,这片地方就圈下了,接下来再搞里面的头像和网名.

头像给定一个尺寸,边框-圆角设置宽高的一半,这个图片框就变成圆形的了!图片框的缩放模式,给上一个高度缩放

<图片框 类名="头像区-头像" 图像地址="@文件_logo.jpg" 缩放模式="高度缩放"></图片框>
Markup
.头像区-头像{
	    定位: 绝对定位;
	    左侧: 315rpx;
	    顶部: 110rpx;
	    宽度: 140rpx;
	    边框-圆角: 70rpx;
	}
Markup

绝对定位就是依据父元素来定位.

 

.头像区-名字{
	    文本颜色: 颜色值-白色;
	    定位: 绝对定位;
	    左侧: 315rpx;
	    顶部: 260rpx;
	    宽度: 140rpx;
	    字体-大小: 26rpx;
	    文本-对齐: 居中;
	    字体-粗细: 粗体;
	}
Markup

 你们发现没,我写类名的习惯, xx-xx  这样可以看出这个类名是被谁包裹着的,这个没啥规定,也没有硬性要求,全凭个人习惯~

功能区的样式也不少,我们放到下一篇,先调试一下看看!

有点那小模样了吧! 继续继续.

附上代码~1679576729008977.zip

自制常用UI-我的信息页面制作(2)