电子身份凭证HTML页面

最新推荐文章于 2024-08-02 00:47:31 发布

HeartBest丶

最新推荐文章于 2024-08-02 00:47:31 发布

阅读量1.1k

点赞数 4

分类专栏： HTML5 文章标签： html5 移动开发电子卡片电子凭证

本文链接：https://blog.csdn.net/qq_15788231/article/details/97903248

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

页面效果图

在这里插入图片描述

html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>我的身份证</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<!--页面头-->
		<header class="cui-navBar cui-navBar-fixed b-line">
			<a onClick="javascript :history.back(-1);" class="cui-navBar-item">
				<i class="icon icon-return"></i>
			</a>
			<div class="cui-center">
				<span class="cui-center-title">我的身份证</span>
			</div>
			<a href="javascript:;" class="cui-navBar-item">
				<i class="icon icon-sys"></i>
			</a>
		</header>
		<!--内容区块-->
		<div class="cui-content">
			<div class="tab-panel">
				<div class="tab-panel-item tab-active">
					<div class="cui-content-padded">
						<!--身份凭证开始-->
						<div class="cui-card-list">
							<div class="cui-card-list-header cui-card-list-user cui-border-b">
								<div class="cui-card-list-user-avatar">
									<img src="images/sfz_03.png" class="cui-img-round" />
								</div>
								<div class="cui-card-list-user-name">
									<div>XX电子身份凭证</div>
								</div>
							</div>
							<div class="cui-card-list-content-padded tx">
								<img src="images/idcard.png"/>
							</div>
							<div class="cui-card-list-content-padded con">
								<div class="textcon">姓名：Heart</div>
								<div class="textcon">性别：男</div>
								<div class="textcon">民族：汉</div>
								<div class="textcon">出生：1993-09-11</div>
								<div class="textcon">地址：贵州省贵阳市南明区南厂路120号</div>
								<div class="textcon">身份证号：522221199309110101</div>
								<img src="images/sfz_07.png" />
							</div>
						</div>
						<!--身份凭证结束-->
						<div class="cui-btn cui-btn-info cui-btn-block cui-btn-sm">
							保存到相册
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

css

.b-line:after {
		border-bottom: none
	}

.tab-panel {
	padding-top: 10px;
}

.cui-card-list {
	margin-bottom: 60px;
	border-radius: 10px;
}

.cui-card-list-user-avatar {
	width: 30px;
}

.cui-card-list-user-name {
	font-size: 20px;
}

.cui-btn-block {
	display: block;
	width: 100%;
	height: 2.5rem;
	line-height: 2.55rem;
	margin-bottom: 0;
	font-size: 0.9rem;
}

.cui-btn-block.cui-btn-sm {
	font-size: 0.7rem;
	height: 3rem;
	line-height: 3rem;
	font-size: 16px;
	border-radius: 50px;
}

.cui-btn .cui-iconfont,
.cui-btn-block .cui-iconfont {
	margin-right: 0.3rem;
}

.cui-btn .cui-badge,
.cui-btn-block .cui-badge {
	margin-left: 0.3rem;
}

.cui-btn-info {
	color: #ffffff !important;
}

button,
.cui-btn {
	background: linear-gradient(to right, #5e96fe, #0066ff);
}

.textcon {
	font-size: 16px;
	color: #000000;
	padding: 10px;
}

.con img {
	position: absolute;
	right: 15px;
	bottom: 30px;
	width: 80px;
	opacity: 0.4;
}
.tx img{
	width: 100px;margin: 0 auto;
}

js

暂无

HeartBest丶

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
电子身份凭证HTML页面

页面效果图html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user...
复制链接

扫一扫