阅读jd m站页面

1.容器包裹尺寸:因为移动端的宽度尺寸在320px-640px之间,所以jd在body里直接设置了max-width:640px,min-width:320px,这样既在手机端上有很好的显示,也能在pc端打开m站页面时有很好的显示。

bodycss.JPG

2.关于jd搜索栏的制作,采用两个兄弟div,一个作为背景,一个作为内容,查看代码可以发现第一个div用了absolute,所以第二个div可以直接升上去,但是由于在默认情况下,元素应用了非static的position属性后,其就会有一个隐晦的层级,会居于普通元素之上,想看更多可以到张鑫旭,所以正常情况下bgdiv会盖在contentdiv上面,所以我们需要给contentdiv添加relative来"后来居上"。为什么要用两个div来实现呢:我发现在滚动条下移时,bgdiv的opacity会变化,视觉效果会更好。如果是在一个div中使用opacity的话,文字搜索框都会变透明,就不是预想的效果了。

<div class=search style=position:fixed>
    <div class=bg style=position:absolute></div>
    <div class=content style=position:relative></div>
</div>
search.JPG

3.其他好像没有什么可以讲的地方,比较多使用float的地方我觉得可以使用flex

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,812评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,346评论 0 11
  • 浏览器兼容性问题大汇总Ø JavaScript HTML对象获取问题 const问题 event.x与event....
    凤凰跑跑阅读 1,445评论 0 10
  • 人活得太长,就容易积累好多感情。 任何关于情爱的事都容易积累, 不论好坏,不论长短,尤其是第一次的情感, 爸妈是亲...
    尔朵记阅读 213评论 0 0