實現
基本思路
注意position:relative
脫離文件流,但是其本身的位置是在文件中佔據空間的
如:
運用position:relative
調整位置後,達到效果,卻有著視覺「空行」的效果
是因為文件流中,仍然為div-icon預留了它本身應有的位置,非手動新增的margin、padding等
因效果的需要,我們需要在input聚焦後,單獨設定樣式。
用outline:none;
清除預設的input選中外邊線,再設定我們自定義的border
我們需要製作的圓角有:input的四個角
+div-icon的左上角
+div-icon的左下角
需要用到的屬性:border-radius
,border-top-left-radius
,border-bottom-left-radius
理想情況是——圓角都統一設定為5px
,一定能完美巢狀!
動手製作後???
行吧,數學知識用起來…(共用乙個圓心,半徑不一樣!畫得不咋地~)
border-radius
設定的px
就是指的半徑。
我們現在把外層input的border-radius:5px
裡層div-icon的border:radius:4px
看效果,完成!
可以嘗試用vertical-align
設定
我是用js原生實現的
提取dom->監聽dom->發生改變時,修改div-icon樣式
(多想在原生css裡寫if判斷…)
相容的帶樣式的INPUT
style 作用描述 給input新增美化的樣式,相容ie8,ie9,ff,chrome,safari等 效果描述 1.邊框帶圓角 2.指定input高度 3.input文字上下居中,新增左邊距 4.背景色為白色 5.當input獲得游標的時候,邊框高亮顯示天藍色。6.ie7下沒有高亮效果 7.ch...
在input中實現輸入純數字(帶小數點)
今天再做表單時遇到乙個問題 就是如何在input標籤裡實現只能輸入數字,若輸入字母或者漢字時會有提示資訊,查閱網上的很多資料,只找到了阻止輸入英文本母的 所以下午的研究了一下怎麼實現只輸入數字!以下為原生js的 html 請輸入數字 js var txt document.getelementbyi...
python帶登入的爬蟲指令碼
建立cookiejar的例項 cookie cookiejar.cookiejar 常見cookie的管理器 建立http請求的管理器 生成https管理器 建立請求管理器 登入函式,cookie在opener裡 def login try 負責首次登入,輸入使用者名稱和密碼,用來獲取cookie ...