发表于: 2019-05-01 22:47:42

4 970


今天完成的事情:写完了任务四,还在调

明天计划的事情:看任务五

遇到的问题:

1、超链接的文本颜色在当前类中设置color属性无效,须另加<a>标签的声明设置color;

2、超链接href链接地址不能单写www.xxx.com,须加上http/https;

3、input框用width:100%设置占满页宽会因计算错content宽度而超出实际宽度越界显示,使用如下属性及值设置content宽度不必另加border*2及padding宽度:

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box; 

http://chayangge.com/2016/05/13/input%E6%96%87%E6%9C%AC%E6%A1%86%E5%AE%BD%E5%BA%A6%E8%AE%BE%E7%BD%AE100-%E6%97%B6%E8%B6%8A%E7%95%8C%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95/

4、input只有type为text、password时,使用maxlength限制输入长度有效,type=“number”,限制长度为11时,可使用:

oninput="if(value.length>11)value=value.slice(0,11)"

5、line-height明白效果,具体意义还没太理解

收获:

1、position:relative的应用熟练度+2

2、取消聚焦input时原生的样式颜色可使用:outline:none;

3、取消input原生边框:border:0;

4、给button设置简单的点击效果:在button当前类中设置属性position:relative,另加声明设置active

.btn-login:active{
top: 0.05rem; /*设置点击button时位置向下移 rem单位*/
}

5、在input框中加入图标显示,可在input标签前加<i>标签,再单独使用一层div包裹去设置position:relative,在<i>的类选择器中设置位置,再在input框的类选择器中设置padding-left(right)配合距离

<i class="icon-num"><img src="images/iphone2.png" alt=""/></i>

返回列表 返回列表
评论

    分享到