CSS搜索條是Web開發中常見的元素之一,它可以讓用戶更快地找到所需的內容。下面是一個示例代碼,展示如何使用CSS創建一個簡單的搜索條。
html { font-size: 16px; } .container { display: flex; flex-direction: row; justify-content: center; align-items: center; height: 100vh; background-color: #eee; } .form { display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: white; padding: 12px 24px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.1); } .input { font-size: 18px; padding: 6px 12px; border: none; outline: none; } .button { background-color: #007bff; color: white; font-size: 18px; padding: 6px 12px; border: none; border-radius: 4px; margin-left: 12px; cursor: pointer; }
以上代碼中,我們創建了一個父容器,使用flex布局將子元素垂直居中并居中對齊。在子元素中,我們使用了一個表單容器,同樣使用flex布局將表單元素垂直居中。對于輸入框和按鈕,我們使用了一些基本的CSS樣式,例如字體、內邊距、邊框、圓角等等。
最終,我們得到一個簡單的搜索條,用戶可以輸入關鍵字搜索所需的內容。這個示例代碼可以根據需要進行調整和添加功能。總之,使用CSS創建搜索條是Web開發的一項基本技能,希望這篇文章對你有所幫助。
上一篇mysql把多行并成一行
下一篇css搜索框圓弧