2024年4月28日发(作者：)

25 height: 820px;

26 margin: 0 auto;

27 }

28 {padding: 30px 0;}

29

30 form {

31 position: relative;

32 width: 300px;

33 margin: 0 auto;

34 }

35

36 input, button {

37 border: none;

38 outline: none;

39 }

40

41 input {

42 width: 100%;

43 height: 42px;

44 padding-left: 13px;

45 }

46

47 button {

48 height: 42px;

49 width: 42px;

50 cursor: pointer;

51 position: absolute;

52 }

53

54 /*搜索框1*/

55 .bar1 {background: #A3D0C3;}

56 .bar1 input {

57 border: 2px solid #7BA7AB;

58 border-radius: 5px;

59 background: #F9F0DA;

60 color: #9E9C9C;

61 }

62 .bar1 button {

63 top: 0;

64 right: 0;

65 background: #7BA7AB;

66 border-radius: 0 5px 5px 0;

67 }

68 .bar1 button:before {

69 content: "f002";

70 font-family: FontAwesome;

71 font-size: 16px;

72 color: #F9F0DA;

73 }

74

75 /*搜索框2*/

76 .bar2 {background: #DABB52;}

77 .bar2 input, .bar2 button {

78 border-radius: 3px;

79 }

80 .bar2 input {

81 background: #F9F0DA;

82 }

83 .bar2 button {

84 height: 26px;

85 width: 26px;

86 top: 8px;

87 right: 8px;

88 background: #F15B42;

89 }

90 .bar2 button:before {

91 content: "f105";

92 font-family: FontAwesome;

93 color: #F9F0DA;

94 font-size: 20px;

95 font-weight: bold;

96 }

97

98 /*搜索框3*/

99 .bar3 {background: #F9F0DA;}

100 .bar3 form {background: #A3D0C3;}

101 .bar3 input, .bar3 button {

102 background: transparent;

103 }

104 .bar3 button {

105 top: 0;

106 right: 0;

107 }

108 .bar3 button:before {

109 content: "f002";

110 font-family: FontAwesome;

111 font-size: 16px;

112 color: #F9F0DA;

113 }

114

115 /*搜索框4*/

116 .bar4 {background: #F15B42;}

117 .bar4 form {

118 background: #F9F0DA;

119 border-bottom: 2px solid #BE290E;

120 }

121 .bar4 input, .bar4 button {

122 background: transparent;

123 }

124 .bar4 button {

125 top: 0;

126 right: 0;

127 }

128 .bar4 button:before {

129 content: "f178";

130 font-family: FontAwesome;

131 font-size: 20px;

132 color: #be290e;

133 }

134

135 /*搜索框5*/

136 .bar5 {background: #683B4D;}

137 .bar5 input, .bar5 button {

138 background: transparent;

139 }

140 .bar5 input {

141 border: 2px solid #F9F0DA;

142 }

143 .bar5 button {

144 top: 0;

145 right: 0;

146 }

147 .bar5 button:before {

148 content: "f002";

149 font-family: FontAwesome;

150 font-size: 16px;

151 color: #F9F0DA;

152 }

153 .bar5 input:focus {

154 border-color: #311c24

155 }

156

157 /*搜索框6*/

158 .bar6 {background: #F9F0DA;}

159 .bar6 input {

160 border: 2px solid #c5464a;

161 border-radius: 5px;

162 background: transparent;

163 top: 0;

164 right: 0;

165 }

166 .bar6 button {

167 background: #c5464a;

168 border-radius: 0 5px 5px 0;

169 width: 60px;

170 top: 0;

171 right: 0;

172 }

173 .bar6 button:before {

174 content: "搜索";

175 font-size: 13px;

176 color: #F9F0DA;

177 }

178

179 /*搜索框7*/

180 .bar7 {background: #7BA7AB;}

181 .bar7 form {

182 height: 42px;

183 }

184 .bar7 input {

185 width: 250px;

186 border-radius: 42px;

187 border: 2px solid #324B4E;

188 background: #F9F0DA;

189 transition: .3s linear;

190 float: right;

191 }

192 .bar7 input:focus {