本页面可用于教学，查询，是教师，懒人和学渣的福利
document
* {
padding: 0;
margin: 0;
}
body {
padding: 10px;
background: #fff2db;
}
select {
outline: none;
border: 1px solid #000;
background: #c5c5c5;
}
i {
font-style: normal;
color: orange;
}
#demo {
width: 80%;
margin: 0 auto;
border: 1px solid #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#box {
width: 400px;
height: 250px;
background: #ff5555;
position: relative;
box-shadow: 0px 0px 5px;
padding: 5px;
z-index: 2;
transition: all 1s;
}
#btn {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 0);
}
#btn1 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 100%);
}
#btn2 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 200%);
}
#btn3 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 300%)
}
#btn4 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 400%);
}
.item {
text-align: center;
color: #fff;
padding: 0 10px 0 10px;
margin: 2px;
text-decoration: underline;
}
.item:nth-child(1) {
background: #eacf7d;
width: 120px;
font-size: 20px;
}
.item:nth-child(2) {
background: yellowgreen;
font-size: 25px;
width: 80px;
}
.item:nth-child(3) {
background: deepskyblue;
width: 70px;
}
.four {
background: coral;
color: #fff;
font-size: 15px;
text-align: center;
width: 120px;
height: 40px;
text-decoration: underline;
}
#range {
position: absolute;
left: 0;
bottom: 0;
transform: translate(0, 100%);
cursor: pointer;
width: 400px;
}
#flex_item {
width: 100%;
margin-top: 30px;
font-size: 10px;
}
#flex_item input {
background: transparent;
border: none;
box-shadow: 0px 0px 4px 0px #000;
outline: none;
width: 50px;
}
.flex_item1 {
background: #eacf7d;
}
.flex_item2 {
background: #9acd32;
}
.flex_item3 {
background: #00bfff;
}
.flex_item4 {
background: #ff7f50;
}
.item input {
width: 100%;
}
#dis-btn {
position: absolute;
width: 200px;
right: -200px;
top: 0;
}
select {
transition: all 0.5s;
}
#btnwrap {
position: absolute;
display: none;
right: 0;
bottom: 94px;
transition: all 1s;
}
.flexitem{
width: 200px;
}
通过点击下拉菜单切换元素显示方式或者操作属性
display 为 flex 时，显示flex容器属性设置菜单
菜单显示值为默认值
A
B
C
Dheight: 40px;
order:
flex-grow:
flex-shrink:
flex-basis:
align-self:
flex:
Wechat：shangxin1991118
