发表于： 2020-02-01 22:19:24
1 1362
今日完成的事
学习表单的属性及属性值
完成表单的html代码，并根据实际图测量完成其样式
ps切图小图标，使用绝对定位固定图标的位置
使用伪类::before 完成图标和输入框间的竖线
遇到的问题
input使用100%为单位，并且添加padding左边距为图标留出位置，
input的宽度会大于父元素的宽度
解决办法
对输入框使用box-sizing:border-box;样式
遇到的问题
输入框会显示历史记录，且聚焦时有蓝色边框
解决办法
在html中给input 加入 autocomplete="off"
蓝色边框为浏览器默认样式，在
清除样式代码下加入outline:none;即可
遇到的问题
在使用::before&::after加入竖线时，img标签和input标签无效
经查询，img及input text是不支持before及after伪类的
https://blog.csdn.net/qq_41359066/article/details/100601426
该链接详细实践了input中哪些是支持伪类的
解决办法
给input的外层div容器加::before并相对定位完成竖线
明日计划
优化代码
不使用flex，使用定位完成头部，以达到去掉三个任意文字依然不影响布局的目的
思考
宽高及字体大小完全按照psd设计图完成，为什么成果与实际总有些差距？
如字体总感觉较大
收获
会使用属性选择器
会完成简单的表单
今日成果
返回列表
评论