乙個好看的搜尋框 Day01

2021-06-21 23:56:44 字數 1597 閱讀 1894

於是再三考慮,我同樣選擇了同樣從介面開始著手,可不同的是我沒有整天的時間任由自己安排,我還需要工作,我也沒學過藝術,總少了那麼點優雅的氣質,只能從簡單的美化和應用上開始了。

首先進行的是搜尋框

我瀏覽了很多**,看了很多模板,大致總結為幾種搜尋框,在接下來的日子裡,我將一一實現它,揭秘它(在會之前是真的是感覺好難啊)

第一種:可以進行不同範圍的選擇,在不同範圍內進行搜尋

應用舉例

像愛奇電子書

像起點電子書

像豬八戒網

自我感覺

很有特色,很美觀,正確的使用可以有效的減小搜尋範圍,方便進行搜尋,電子書類**常出現,根據書名或者作者或者出版社進行搜尋

在愛奇電子書的搜尋中,我常常忘記更改為作者進行,然後直接對作者進行搜尋,還是預設全部比較靠譜啊感覺(我是這麼覺得的,你怎麼看?)

具體實現

1、總體來說,這種搜尋框是由三部分組成的,選擇部分,填寫部分,提交部分,這樣我們便將他們都先寫出來

這一步驟完成,完成效果圖如下:

2、既然三部分都有了,接下來我們要進行的就是對他們進行修飾和美化,首先,我們要將從開始並不會顯示的下拉列表框部分進行著手,先將它隱藏起來;

這一步驟完成,實現效果圖如下:

3、藏起來的部分,我們需要在使用的時候進行顯示,於是在css中新增:

.aboutselect

.aboutselect b

.aboutselect ul

.aboutselect:hover b

.aboutselect:hover .selectindex

這一步驟完成,實現效果圖如下:

4、之後就是善後的美化工作了,繼續在css中進行新增:

.aboutsearch

.abouttext

.aboutbtn

完成的最終效果圖如下:

滑鼠放上前

滑鼠放上後

就這樣,簡單的實現了想要的這種搜尋框,當然美化樣式可以隨著自己的心意進行修改,有效的進行變換。當然,萬變不離其宗,基本原理就是這樣了,現在弄起來感覺簡單多了,在會之前那叫乙個糾結啊。

好吧,今天就先到這吧,要到午夜了都,大家晚安...

day01 第乙個python程式

安裝外掛程式 pip install 外掛程式名稱 conda install 外掛程式名稱 anaconda可用這個 python資料型別 數字 num int 有符號整數 float 浮點型 complex 複數 布林值 true false 字串 str 字典 dict 元祖 tuple 列表...

Day01 第乙個Python程式

linuxmint下同時安裝了python2.x和3.x版本,但預設使用2.x版本,若更改預設為3.x版本,可使用 參考文件 sudo update alternatives install usr bin python python usr bin python2 100sudo update a...

乙個好看的時間控制項

1.依賴包 compile com.wx.wheelview wheelview 1.3.3 2.在布局中使用 60dp android layout height 60dp android orientation vertical wx.wheelview widget wheelview and...