輯導(dǎo)語:如何才能解決原型設(shè)計中輸入框校驗的問題?本篇文章里,作者就對如何繪制可以校驗的輸入框的相應(yīng)流程進行了梳理,一起來看一下吧,也許會對你有所幫助。
在原型設(shè)計中,輸入框校驗效果設(shè)計是一件令人頭疼的事情,但是可以通過使用bootstrap元件庫中的輸入框設(shè)置,可以輕松解決輸入框校驗的問題。
預(yù)覽地址:http://atomstudio.cn/demos/bootstrap_input
需要安裝XSTAR2022.1.22版(或更高版本)
1)打開軟件,選擇bootstrap元件庫,在元件列表中將輸入框拖拽到編輯區(qū)。
2)選中編輯區(qū)的輸入框組件,右側(cè)顯示出輸入框設(shè)置面板。
3)在輸入框設(shè)置面板中勾選驗證成功提示和驗證失敗提示。
4)編輯提示文本內(nèi)容
5)設(shè)置前綴、后綴
6)設(shè)置提示樣式
7)設(shè)置驗證規(guī)則
可選規(guī)則包括:
8)根據(jù)需要設(shè)置完成后,進行預(yù)覽、導(dǎo)出或者分享。
本文由 @balabala 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議。
者:前端日志
轉(zhuǎn)發(fā)鏈接:https://mp.weixin.qq.com/s/zoEfqIwfsnAWVO8L7xuUuQ
嘍大家好,我是作者“未來”,本期分享的內(nèi)容是Web前端系列課程,本系列總共29個階段,堅持學(xué)習(xí)3個月蛻變?yōu)閃eb前端高手哦!
1 調(diào)試工具 chrome使用
此工具是我們的必備工具,以后代碼出了問題,我們首先第一反應(yīng)就是:
按F12或者是 shift+ctrl+i"打開開發(fā)者工具。
或者右擊網(wǎng)頁空白處——查看
2 標(biāo)簽選擇器
要想將CSS樣式應(yīng)用于特定的HTML元素,首先需要找到該目標(biāo)元素。在CSS中,執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器(選擇符)。
標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器,按標(biāo)簽名稱分類,為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語法格式如下:
標(biāo)簽選擇器最大的優(yōu)點是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式,同時這也是他的缺點,不能設(shè)計差異化樣式。
3 類選擇器
類選擇器使用”.”(英文點號)進行標(biāo)識,后面緊跟類名,其基本語法格式如下:
.類名 {屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}
標(biāo)簽調(diào)用的時候用c1ass=“類名”即可。
類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。下面是舉個例子,實際工作中不要用中文。
4 CSS命名規(guī)范
1 長名稱或詞組可以使用中橫線來為選擇器命名。
2 不建議使用”_” 下劃線來命名CS5選擇器。
3 不要純數(shù)字、中文等命名,盡量使用英文字母來表示。
5 谷歌課堂案例
6 多類名選擇器
我們可以給標(biāo)簽指定多個類名,從而達(dá)到更多的選擇目的。兩個甚至以上的類名比較常用
樣式顯示效果跟HTML元素中的類名先后順序沒有關(guān)系,受CSS樣式書寫的上下順序有關(guān)。
各個類名中間用空格隔開。
Class=”red size20”
7 ID選擇器
ID選擇器使用“#”進行標(biāo)識,后面緊跟ID名,其基本語法格式如下
#ID名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}
該語法中,id名即為HTML元素的id屬性值,大多數(shù)HTML元素都可以定義id屬性,元素的id值是唯一的,只能對應(yīng)于文檔中某一個具體的元素。(只能調(diào)用一次)
用法基本和類選擇器相同。
8 id選擇器和類選擇器的區(qū)別
W3C標(biāo)準(zhǔn)規(guī)定,在同一個頁面內(nèi),不允許有相同名字的id對象出現(xiàn),但是允許相同名字的class類選擇器(class)好比人的名字,是可以多次重復(fù)使用的,比如張偉王偉李偉李娜id選擇器好比人的身份證號碼,全中國是唯一的,不得重復(fù)。只能使用一次。
總結(jié):類選擇器和id選擇器的的區(qū)別就是在使用次數(shù)上。
9 通配符選擇器
通配符選擇器用*號表示,它是所有選擇器中作用范圍最廣的,能匹配頁面中所有的元素。其基本語法格式如下:
* {屬性1:屬性值1;屬性2:屬性值2;風(fēng)性3:屬性值3;}
這個通配符選擇器,就像我們的電影明星中的夢中情人,想想它就好了,但是它不會和你過日子。所以這個選擇器,我們認(rèn)識就好了,平時工作很少用。
10 鏈接偽類選擇器的使用
:link/*未訪問的鏈接*/
:visited/*已訪問的鏈接*/很少用到
:hover/*鼠標(biāo)移動到鏈接上*/
:actⅳe/*選定的鏈接當(dāng)我們點擊別松開鼠標(biāo)顯示的狀態(tài)*/很少用到
注意寫的時候,他們的順序不要顛倒,按照L V H A的順序。 love hate愛上了討厭記憶法或者lv包包非常hao
11 鏈接偽類的簡寫方式
實際工作,我們簡單寫鏈接偽元素選擇器就好了
12 結(jié)構(gòu)偽類選擇器(一)
結(jié)構(gòu)(位置)偽類選擇器(CSS3)
1 :first-child:選取屬于其父元素的首個子元素的指定選擇器
2 :last-child:選取屬于其父元素的最后一個子元素的指定選擇器
3 :nth-child(n):匹配屬于其父元素的第N個子元素,不論元素的類型even偶數(shù)odd奇數(shù)n從0開始
13 結(jié)構(gòu)偽類選擇器(二)
2n就是 0 2 4 6 ……項
3n就是 0 3 6 9 ……項
14 結(jié)構(gòu)偽類選擇器(三)
4 :nth-last-child(n):選擇器匹配屬于其元素的第N個子元素的每個元素,不論元素的類型,從最后一個子元素開始計數(shù)。n可以是數(shù)字、關(guān)鍵詞或公式
15 目標(biāo)偽類選擇器
:target目標(biāo)偽類選擇器選擇器,可用于選取當(dāng)前活動的目標(biāo)元素,例如百度百科里的目錄,點一下就可以跳轉(zhuǎn)到目標(biāo)信息,:target可以使目標(biāo)信息賦予屬性,字體顏色大小等。
看不懂的小伙伴不要氣餒,后續(xù)的分享中將持續(xù)解釋,只要你跟著我分享的課程從頭到尾去學(xué)習(xí),每篇文章看三遍,一個月后,回過頭來看之前的文章就會感覺簡單極了。
本章已結(jié)束,下篇文章將分享《04 CSS外觀樣式及應(yīng)用》小伙伴們不要錯過喲!
?
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。