在网页设计中,搜索框是常用的组件之一。我们可以使用CSS来美化搜索框,让页面更加美观。下面是一个基础的搜索框示例:
<div class="search-Box"> <input type="text" placeholder="请输入关键字"> <button>搜索</button> </div>
上述代码中,我们使用了一个div作为外层容器,添加了一个类名为“search-Box”。在容器中使用了一个input标签作为输入框,另外添加了一个button标签作为搜索按钮。接下来,我们可以使用CSS来添加样式。
.search-Box { width: 300px; height: 40px; border: 1px solid #ccc; border-radius: 20px; padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; } .search-Box input[type="text"] { border: none; outline: none; flex: 1; } .search-Box button { width: 60px; height: 30px; background-color: #f33; color: #fff; border: none; border-radius: 15px; cursor: pointer; }
上述代码中,我们使用了“search-Box”类名来对容器进行样式设置。设置了宽度、高度、边框、边框圆角、内边距、弹性布局等属性,让搜索框更具美观性和实用性。
接下来,我们对输入框和搜索按钮进行样式设置。可以看到输入框去除了边框,设置了“flex: 1”来填满剩余空间;搜索按钮设置了宽度、高度、背景色、文本颜色、边框圆角等属性,让按钮更加突出。
通过简单的CSS设置,我们可以为搜索框添加美观的外观,提高用户体验。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。