最近我對CSS搜索的用法進行了深入研究,偶然發現了一篇寫得非常好的文章。
.search-box {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.search-input {
border: 1px solid #ccc;
border-radius: 20px;
padding: 10px;
font-size: 16px;
width: 250px;
outline: none;
}
.search-button {
background-color: #007bff;
color: #fff;
padding: 10px;
border-radius: 20px;
margin-left: 10px;
cursor: pointer;
}
這篇文章詳細介紹了如何使用CSS創建一個漂亮的搜索框,其中展示了很多實用的CSS技巧,比如使用display: flex
來使搜索框元素水平居中對齊,以及使用border-radius
添加圓角邊框等。
通過學習這篇文章,我不僅掌握了如何實現一個簡單的搜索框,還深入了解了CSS的一些高級用法,對我的前端開發技能大有裨益。