2017-12-07 今天学了些新的东西,依旧在做淘宝的整站

原创 moxiao 随笔 个人笔记 2462阅读 2017-12-07 20:19:20 举报

上星期把淘宝的首页做了,这星期在做后续的搜索页面和详情页面,,马上详情页面就做完了,有些东西看着简单但是步骤繁多。
filter 滤镜
灰度 -webkit-filter:grayscale(0 - 1);
棕色调 -webkit-filter:sepia(0 - 1);
饱和度 -webkit-filter:saturate(0 - 1);
值为1时,是正常状态
色相旋转 -webkit-filter:hue-rotate(90deg);
单位:deg
0deg正常,一轮是360deg
反色 -webkit-filter:invert(1);
透明度 -webkit-filter:opacity(0.2);
亮度 -webkit-filter:brightness(0.5);
对比度 -webkit-filter:contrast(2);
模糊 -webkit-filter:blur(3px);
阴影 -webkit-filter:drop-shadow(5px 5px 5px #ccc);

H5的新表单控件
email : 电子邮箱文本框,跟普通的没什么区别
当输入不是邮箱的时候,验证通不过
校验规则很简单,只要@左右各有字符即能通过校验
开发者需要额外添加完整邮箱匹配规则
移动端的键盘会有变化

        tel   :   电话号码
            无校验规则

        url   :   网页的URL
            校验规则:://前面有任意字母

            http:// 超文本传输协议
            ftp://  文件传输协议
            svn://  
            git://
            samba://
            file://

        search  :  搜索引擎
            chrome下输入文字后,会多出一个关闭的X

        range  :  特定范围内的数值选择器
            min、max、step( 步数 )

        number  :  只能包含数字的输入框

                     color  :  颜色选择器
        datetime-local  :  显示完整日期,不含时区
        time  :  显示时间,不含时区
        date  :    显示日期
        week  :  显示周
        month  :  显示月

表单特性及函数
placeholder : 输入框提示信息

        autocomplete  :  是否保存用户输入值
            默认为on,关闭提示选择off

        autofocus  :  指定表单获取输入焦点

        required  :  此项必填,不能为空

        pattern : 正则验证  pattern="\d{1,5}"

        formaction 在submit里定义提交地址

target伪类
E:target 表示当前的URL片段的元素类型,这个元素必须是E

    根据锚点进行元素样式设置

表单伪类
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio

文字文本伪类
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时

今天学习的新东西还是很有用的,对以后的学习工作,帮助都非常大。
今天早点睡,明天就不会困了,拜拜,晚安吧!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复