web常用UI组件

Posted 不靠谱的作曲家

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web常用UI组件相关的知识，希望对你有一定的参考价值。

目录

1.按钮

2.标签

3.单选框

4.多选框

5.加载中

6.开关

7.面包屑

8.输入框

9.下拉框

10.表单

11.文字链接

12.弹窗

13.状态页面

14.上传

15.暂无数据

16.头像

17.表格

18.描述列表

19.列表 — 图文

20.列表 — 文字

21.页脚

end.相关图片

内容

**按钮** 

<button type="button" class="ub-button ub-button--default">
	默认按钮
</button>
<button type="button" class="ub-button ub-button--primary">
	主要按钮
</button>
<button type="button" class="ub-button ub-button--success">
	成功按钮
</button>
<button type="button" class="ub-button ub-button--info">
	信息按钮
</button>
<button type="button" class="ub-button ub-button--warning">
	警告按钮
</button>
<button type="button" class="ub-button ub-button--danger">
	危险按钮
</button>

/* 按钮公共样式 */
.ub-button {
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	background: #fff;
	border: 1px solid #dcdfe6;
	color: #606266;
	-webkit-appearance: none;
	text-align: center;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	transition: .1s;
	font-weight: 500;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	padding: 12px 20px;
	font-size: 14px;
	border-radius: 4px;
}

.ub-button:focus,
.ub-button:hover {
	color: #409eff;
	border-color: #c6e2ff;
	background-color: #ecf5ff;
}

/* 主要按钮 */
.ub-button--primary {
	color: #fff;
	background-color: #409eff;
	border-color: #409eff;
}

.ub-button--primary:focus,
.ub-button--primary:hover {
	background: #66b1ff;
	border-color: #66b1ff;
	color: #fff;
}

/* 成功按钮 */
.ub-button--success {
	color: #fff;
	background-color: #67c23a;
	border-color: #67c23a;
}

.ub-button--success:focus,
.ub-button--success:hover {
	background: #85ce61;
	border-color: #85ce61;
	color: #fff;
}

/* 信息按钮 */
.ub-button--info {
	color: #fff;
	background-color: #909399;
	border-color: #909399;
}

.ub-button--info:focus,
.ub-button--info:hover {
	background: #a6a9ad;
	border-color: #a6a9ad;
	color: #fff;
}

/* 警告按钮 */
.ub-button--warning {
	color: #fff;
	background-color: #e6a23c;
	border-color: #e6a23c;
}

.ub-button--warning:focus,
.ub-button--warning:hover {
	background: #ebb563;
	border-color: #ebb563;
	color: #fff;
}

/* 危险按钮 */
.ub-button--danger {
	color: #fff;
	background-color: #f56c6c;
	border-color: #f56c6c;
}

.ub-button--danger:focus,
.ub-button--danger:hover {
	background: #f78989;
	border-color: #f78989;
	color: #fff;
}
**标签** 

<span class="ub-tag ub-tag--light">标签一</span>
<span class="ub-tag ub-tag--success">标签二</span>
<span class="ub-tag ub-tag--info">标签三</span>
<span class="ub-tag ub-tag--warning">标签四</span>
<span class="ub-tag ub-tag--danger">标签五</span>


.ub-tag {
	background-color: #ecf5ff;
	display: inline-block;
	height: 32px;
	padding: 0 10px;
	line-height: 30px;
	font-size: 12px;
	color: #409eff;
	border: 1 px solid #d9ecff;
	border-radius: 4px;
	box-sizing: border-box;
	white-space: nowrap;
}
/* 标签二 */
.ub-tag.ub-tag--success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
}
/* 标签三 */
.ub-tag.ub-tag--info {
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: #909399;
}
/* 标签四 */
.ub-tag.ub-tag--warning {
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c;
}
/* 标签五 */
.ub-tag.ub-tag--danger {
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;
}
**单选框** 

<span class="ub-radio">
	<inputtype="radio" value="" name="name" id="1">
	<label for="1"></label>
	<label for="1">选项一</label>
</span>
<span class="ub-radio">
	<input type="radio" value="" name="name" id="2">
	<label for="2"></label>
	<label for="2">选项一</label>
</span>


.ub-radio label{
	margin-right: 16px;
	cursor: pointer;
}

input[type="radio"] {
	display: none;
}

input[type="radio"]+label {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #D1D1D1;
	vertical-align: bottom;
	border-radius: 50%;
	margin-right: 2px;
	box-sizing: border-box;
	cursor: pointer;
}
input[type=radio]:checked+label {
    background-color: #409EFF;
    border: 1px solid #409EFF;
}
input[type="radio"]+label:before{
	position: absolute;
	content: "";
	width: 10px;
	height: 5px;
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	transform: rotate(-45deg);
	top: 4px;
	left: 3px;
	display: none;
}
input[type="radio"]:checked+label::before {
	display: block;
}
**多选框** 

<span class="ub-checkbox">
	<input type="checkbox" value="" name="name" id="1">
	<label for="1"></label>
	<label for="1">选项一</label>
</span>
<span class="ub-checkbox">
	<input type="checkbox" value="" name="name" id="2">
	<label for="2"></label>
	<label for="2">选项一</label>
</span>



.ub-checkbox label{
	margin-right: 16px;
	cursor: pointer;
}

input[type="checkbox"] {
	display: none;
}

input[type="checkbox"]+label {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #D1D1D1;
	vertical-align: bottom;
	border-radius: 4px;
	margin-right: 2px;
	-webkit-box-sizing: border-box;
	cursor: pointer;
}
input[type=checkbox]:checked+label {
    background-color: #409EFF;
    border: 1px solid #409EFF;
}
input[type="checkbox"]+label:before{
	position: absolute;
	content: "";
	width: 10px;
	height: 5px;
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	transform: rotate(-45deg);
	top: 4px;
	left: 3px;
	display: none;
}
input[type="checkbox"]:checked+label::before {
	display: block;
}
**加载中** 

<div class="ub-loading-box">
	<div class="ub-loading">
		<img src="images/loading.png" class="ub-rotate">
		<p>拼命加载中</p>
	</div>
</div>


.ub-loading-box {
	width: 100%;
	height: 100%;
	position: absolute;
	text-align: center;
}
.ub-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.ub-loading p {
	color: #409EFF;
}

.ub-loading .ub-rotate {
	animation: rotate 2s infinite linear;
	-webkit-animation: rotate 2s infinite linear;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
**开关** 

<input class="ub-switch" type="checkbox">


.ub-switch {
	width: 58px;
	height: 28px;
	position: relative;
	border: 1px solid #dfdfdf;
	background-color: #fdfdfd;
	box-shadow: #dfdfdf 0 0 0 0 inset;
	border-radius: 20px;
	background-clip: content-box;
	display: inline-block;
	-webkit-appearance: none;
	user-select: none;
	outline: none;
	margin-right: 18px;
	cursor: pointer;
}

.ub-switch:before {
	content: '';
	width: 25px;
	height: 25px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	transition: left 0.3s;
}

.ub-switch:checked {
	border-color: #409eff;
	box-shadow: #409eff 0 0 0 16px inset;
	background-color: #409eff;
}

.ub-switch:checked:before {
	left: 32px;
	transition: left 0.3s;
}
**面包屑** 

<p class="ub-breadcrumbs">
	<a href="#">首页</a> / <a href="#">详情</a> / <span>文章</span>
</p>
<p class="ub-breadcrumbs">
	<a href="#">首页</a> - <a href="#">详情</a> - <span>文章</span>
</p>
<p class="ub-breadcrumbs">
	<a href="#">首页</a> > <a href="#">详情</a> > <span>文章</span>
</p>

.ub-breadcrumbs{
	color: #8c8c8c;
	font-size: 14px;
}
.ub-breadcrumbs a{
	color: #8c8c8c;
	text-decoration: none;
}
.ub-breadcrumbs span{
	font-weight: 600;
	color: #333;
}
**输入框** 

<input type="text" placeholder="请输入内容" class="ub-input">


.ub-input {
	width: 20%;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	font-size: inherit;
	height: 40px;
	line-height: 40px;
	outline: none;
	padding: 0 8px;
	transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}
**下拉框** 

<select name="" class="ub-select">
	<option value="">请选择</option>
	<option value="">选择一</option>
	<option value="">选择二</option>
	<option value="">选择三</option>
	<option value="">选择四</option>
</select>

.ub-select {
	width:30%;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	font-size: inherit;
	height: 40px;
	line-height: 40px;
	outline: none;
	padding: 0 8px;
	transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
	cursor: pointer;
}
**表单** 

<div class="ub-form-item">
	<label class="ub-form-item__label">活动名称</label>
	<input type="text" class="ub-input">
</div>
<div class="ub-form-item">
	<label class="ub-form-item__label">活动选择</label>
	<select name="" class="ub-select">
		<option value="">请选择</option>
		<option value="">选择一</option>
		<option value="">选择二</option>
		<option value="">选择三</option>
		<option value="">选择四</option>
	</select>
</div>


.ub-form-item {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.ub-form-item__label {
	width: 80px;
	text-align: right;
	vertical-align: middle;
	float: left;
	font-size: 14px;
	color: #606266;
	line-height: 40px;
	padding: 0 12px 0 0;
	box-sizing: border-box;
}

.ub-input{
	width: 20%;
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	font-size: inherit;
	height: 40px;
	line-height: 40px;
	outline: none;
	padding: 0 15px;
	transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
	cursor: pointer;
}

.ub-select {
	width: 20%;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	font-size: inherit;
	height: 40px;
	line-height: 40px;
	outline: none;
	padding: 0 15px;
	transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
	cursor: pointer;
}
**文字链接** 

<a href="#" target="_blank" class="ub-link ub-link--default is-underline">
	默认链接
</a> 
<a href="#" target="_blank" class="ub-link ub-link--primary is-underline">
	主要链接
</a> 
<a href="#" target="_blank" class="ub-link ub-link--success is-underline">
	成功链接
</a> 
<a href="#" target="_blank" class="ub-link ub-link--warning is-underline">
	警告链接
</a> 
<a href="#" target="_blank" class="ub-link ub-link--danger is-underline">
	危险链接
</a> 
<a href="#" target="_blank" class="ub-link ub-link--info is-underline">
	信息链接
</a>


/* 公共样式 */
.ub-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
}
/* 默认链接 */
.ub-link.ub-link--default {
    color: #606266;
}
.ub-link.ub-link--default:hover {
    color: #409eff;
}

/* 主要链接 */
.ub-link.ub-link--primary {
    color: #409eff;
}
/* 成功链接 */
.ub-link.ub-link--success {
    color: #67c23a;
}
/* 警告链接 */
.ub-link.ub-link--warning {
    color: #e6a23c;
}
/* 危险链接 */
.ub-link.ub-link--danger {
    color: #f56c6c;
}
/* 信息链接 */
.ub-link.ub-link--info {
    color: #909399;
}
**弹窗** 

<div class="ub-mask"></div>
<div class="ub-message-box">
	<p class="ub-message-title">标题名称<i><img src="images/close.png" class="ub-message-close"></i></p>
	<div class="ub-message-content">
		<p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>
	</div>
	<div class="ub-message-btn">
		<button type="button" class="ub-button ub-button--default">
			确定
		</button>
		<button type="button" class="ub-button ub-button--primary">
			确定
		</button>
	</div>
</div>


.ub-mask {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
}

.ub-message-box {
	width: 20%;
	padding: 15px;
	border-radius: 4px;
	background: #fff;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.ub-message-title {
	font-size: 18px;
	line-height: 1;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ub-message-close{
	width: 12px;
	cursor: pointer;
}
.ub-message-content {
	line-height: 1.5;
	padding: 15px 0;
	color: #606266;
	font-size: 14px;
}

.ub-message-btn {
	text-align: right;
}

.ub-button {
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	background: #fff;
	border: 1px solid #dcdfe6;
	color: #606266;
	-webkit-appearance: none;
	text-align: center;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	transition: .1s;
	font-weight: 500;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	padding: 12px 20px;
	font-size: 14px;
	border-radius: 4px;
}

.ub-button--primary {
	color: #fff;
	background-color: #409eff;
	border-color: #409eff;
}

.ub-button--primary:focus,
.ub-button--primary:hover {
	background: #66b1ff;<
以上是关于web常用UI组件的主要内容，如果未能解决你的问题，请参考以下文章
 

 web常用UI组件


 十大常用web前端UI组件库，赶紧收藏


 web前端开发JQuery常用实例代码片段(50个)


 Android开发——UI_片段


 我们可以在活动 xml 中编写 UI 以及在片段 xm 中编写 UI 吗？


 markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发