搜索栏是网页中非常常见的一个元素,通常用于让用户输入搜索内容并进行相关主题的搜索。在CSS中,可以通过一些简单的代码来制作出一个漂亮的搜索栏。下面我们来看一下具体的实现过程。首先需要考虑的是搜索栏的布
<div><br>
<input type="text" name="search" placeholder="请输入关键词"/><br>
<input type="button" value="搜索"/><br>
</div>
div {<br>
margin: 0 auto;<br>
width: 80%;<br>
display: flex;<br>
justify-content: center;<br>
}<br>
input[type="text"] {<br>
width: 70%;<br>
padding: 10px;<br>
border: 1px solid #ccc;<br>
border-radius: 5px 0 0 5px;<br>
}<br>
input[type="button"] {<br>
width: 30%;<br>
background-color: #4CAF50;<br>
color: white;<br>
border: none;<br>
padding: 10px;<br>
border-radius: 0 5px 5px 0;<br>
}
粉丝
0
关注
0
收藏
0