发表于: 2019-12-26 15:10:07

1 994


Task4重点

1. 去掉header的三块文字的任意一两个,剩下的一两个都还在原位置上不会受到影响

2.输入框铺满剩余屏幕

 

解决方法:

1.  左侧文字使用positionabsolute固定,使其从文档流独立出来,居中文字和右侧文字分别使用floatleftfloa:right来确定位置,这样三块文字的位置都是单独定位的,不依靠其他两个合作定位,从而达到去除一个或两个元素都不影响其它元素的位置。不过这个方法有一个问题,就是如果有四块文字的话,就不能用这个办法单独定位了。

.left{
    padding1rem 0 11px 1rem;
    floatleft;
    font1em sans-serif;
    colorrgb(255255255);
    width25vw;
    positionabsolute;
}
.mid{
    padding0.9rem 0 9px 0;
    floatleft;
    font1.1rem sans-serif;
    colorrgb(255255255);
    text-aligncenter;
    width50vw;
    letter-spacing:2px;
    margin-left25vw;
}
.right{
    padding1rem 1rem 11px 0rem;
    floatright;
    font1rem sans-serif;
    colorrgb(255255255);
    width25vw;
    text-alignright;
    positionrelative;
}


2.  iPhone图标和分隔线图标使用absolute定位,用px固定位置,input设置width:100vwpadding-left设置为iPhone图标和分割线图标px之和,就能使输入框铺满剩余屏幕。

input{
    bordernone;
    floatleft;
    padding14px 0 14px 70.86px;
    outline:none;
    height55px;
    width100vw;
    font-size1rem;
}


 

其他思考:

分割线图标应该可以设置成伪元素插入在iPhone图标后面,等有时间再试。



返回列表 返回列表
评论

    分享到