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