整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
輯導(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)系。
