css常用控件 |html5 css3 margin

/*1.按钮控件*/
button{
background-color: #4CAF50; /*设置背景颜色*/
border: none; /*去除边框*/
color: white; /*设置文本颜色*/
padding: 15px 32px; /*设置内边距*/
text-align: center; /*设置文本居中*/
text-decoration: none; /*去除下划线*/
display: inline-block; /*将按钮设置为行内元素*/
font-size: 16px; /*设置字体大小*/
margin: 4px 2px; /*设置外边距*/
cursor: pointer; /*光标效果*/
}
/*2.表格控件*/
table{
border-collapse: collapse; /*合并边框*/
width: 100%; /*设置宽度为100%*/
}
td, th{
border: 1px solid #ddd; /*设置边框*/
padding: 8px; /*设置内边距*/
text-align: left; /*设置文本居左*/
}
th{
background-color: #4CAF50; /*设置表头背景颜色*/
color: white; /*设置表头文本颜色*/
}
/*3.下拉菜单控件*/
.dropdown{
position: relative; /*设置定位模式*/
display: inline-block; /*设置为行内元素*/
}
.dropdown-content{
display: none; /*默认不显示*/
position: absolute; /*设置定位模式*/
z-index: 1; /*层级*/
}
.dropdown:hover .dropdown-content{
display: block; /*鼠标悬停时显示*/
}
/*4.进度条控件*/
.progress-bar{
width: 100%; /*设置宽度为100%*/
background-color: #ddd; /*底部背景颜色*/
}
.progress-bar-fill{
height: 20px; /*设置高度为20px*/
background-color: #4CAF50; /*填充颜色*/
width: 0%; /*初始化*/
transition: width 0.5s ease-in-out; /*过渡效果*/
}
/*5.轮播图控件*/
.carousel{
position: relative; /*设置定位模式*/
width: 100%; /*设置宽度为100%*/
}
.carousel-wrapper{
white-space: nowrap; /*设置不换行*/
display: flex; /*设置为弹性盒子*/
transition: transform 0.3s ease-in-out; /*过渡效果*/
transform-style: preserve-3d; /*3D变换*/
}
.carousel-slide{
flex: none; /*不占用多余空间*/
width: 100%; /*设置宽度为100%*/
}
.carousel-navigation{
position: absolute; /*设置定位模式*/
display: flex; /*设置为弹性盒子*/
bottom: 0; /*距离底部0*/
left: 50%; /*居中*/
transform: translateX(-50%); /*水平居中*/
}
.carousel-navigation-item{
margin: 0 5px; /*设置外边距*/
cursor: pointer; /*光标效果*/
}
.carousel-navigation-item.active{
color: #4CAF50; /*设置活动颜色*/
}