整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
辑导语：如何才能解决原型设计中输入框校验的问题？本篇文章里，作者就对如何绘制可以校验的输入框的相应流程进行了梳理，一起来看一下吧，也许会对你有所帮助。
在原型设计中，输入框校验效果设计是一件令人头疼的事情，但是可以通过使用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小时内与您取得联系。
