下面是基于html css实现带搜索图标的搜索框的完整攻略。
步骤1:html代码部分
首先我们需要使用html创建搜索框的代码,代码如下:
<div class="search-box">
<input type="text" placeholder="Search">
<a href="#"><i class="fa fa-search"></i></a>
</div>
在上述代码中,我们创建了一个class名为"search-box"的div盒子作为搜索框的容器,里面包含一个type为text的input标签,用于输入搜索内容。input标签里的placeholder属性用于设置输入框的提示文本。还有一个class名为"fa fa-search"的图标样式,用于创建搜索图标。
步骤2:css代码部分
接下来,我们需要使用css来美化搜索框的样式。代码如下:
.search-box {
position: relative;
display: inline-block;
margin: 0 auto;
color: #828282;
}
input[type="text"] {
width: 250px;
height: 40px;
padding-left: 10px;
font-size: 14px;
color: #828282;
border: 1px solid #D3D3D3;
border-radius: 30px;
}
.fa-search {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
color: #828282;
}
在上述代码中,我们对搜索框和图标进行了样式设置。在搜索框的样式设置中,我们设置了它的position属性为relative,表示相对定位,用于后续绝对定位的图标布局。还设置了input标签的样式,包括宽度、高度、字体大小、文字颜色、边框、圆角等属性。在图标的样式设置中,我们使用了font-awesome字体库中的"fa fa-search"图标样式,并设置其position属性为absolute,用于绝对定位。
示例1
下面是一个使用示例1,可以将搜索框放在一个Navbar中。代码如下:
<nav class="navbar">
<div class="search-box">
<input type="text" placeholder="Search">
<a href="#"><i class="fa fa-search"></i></a>
</div>
</nav>
在上述代码中,我们将搜索框放在了一个Navbar中。
示例2
下面是一个使用示例2,可以在页面中居中显示搜索框。代码如下:
<div class="centered-search">
<div class="search-box">
<input type="text" placeholder="Search">
<a href="#"><i class="fa fa-search"></i></a>
</div>
</div>
在上述代码中,我们创建一个class名为"centered-search"的容器,使用相对布局将其中的搜索框居中。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:基于html css实现带搜索图标的搜索框功能 - Python技术站