[rem="1920"] {
font-size:5.2083333333vw
}
[rem="750"] {
font-size:13.333333333vw
}
* {
-webkit-tap-highlight-color:transparent
}
html {
-webkit-text-size-adjust:100%
}
body {
margin:0;
font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
font-size:16px
}
figure,p {
margin:0
}
h1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
font-weight:400
}
dd,dl,dt,li,ol,ul {
margin:0;
padding:0;
list-style:none
}
a {
background-color:transparent;
text-decoration:none
}
img {
border:0
}
table {
border-collapse:collapse;
border-spacing:0
}
td,th {
padding:0
}
button,input,select,textarea {
color:inherit;
font:inherit;
margin:0;
padding:0;
outline:none;
}
textarea {
overflow:auto
}
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section {
display:block
}
template {
display:none
}
.hidden2,.hidden3,.hidden4,.hidden5 {
display:-webkit-box;
/* autoprefixer:off */-webkit-box-orient:vertical;
overflow:hidden
}
.hidden1 {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.hidden2 {
-webkit-line-clamp:2
}
.hidden3 {
-webkit-line-clamp:3
}
.hidden4 {
-webkit-line-clamp:4
}
.hidden5 {
-webkit-line-clamp:5
}
.clearfix::after,.clearfix::before {
content:"";
width:0;
height:0;
display:block;
clear:both
}
.search-ul {
width:1000px;
margin:0 auto;
}
.search-ul li {
float:left;
width:25%;
margin-top:20px;
}
.search-ul li label {
float:left;
width:40%;
height:30px;
line-height:30px;
text-align:right;
}
.search-ul li .search-box {
float:left;
width:60%;
}
.search-ul li .search-box input {
width:100%;
height:28px;
line-height:28px;
border:1px solid #ececec;
}
.search-ul li button {
float:right;
width:60px;
height:30px;
line-height:30px;
text-align:center;
}
.search-ul li.search-li {
float:right;
cursor:pointer;
}
.search-li span {
float:right;
color:skyblue;
margin-left:15px;
display:block;
width:60px;
height:30px;
line-height:30px;
}
.search {
background:skyblue;
color:#FFFFFF;
border:none;
}
.reset {
border:1px solid #cccccc!important;
color:#cccccc;
background:#fff;
margin-left:15px;
}
.search-li .open i {
display:inline-block;
transform:rotate(90deg);
-ms-transform:rotate(90deg);
/* IE 9 */
-moz-transform:rotate(90deg);
/* Firefox */
-webkit-transform:rotate(90deg);
/* Safari 和 Chrome */
-o-transform:rotate(90deg);
/* Opera */
}
更新时间:2020-11-04 22:14:11
该代码适用于搜索条件比较多,界面布局又比较有限,默认收起只留下一行搜索条件,展开之后再进行更多搜索,有问题随时欢迎可各位进行指教。