7-3 架构与版型 -- 浮动背景,固定内容

1.当我第一次看到这个小节的标题时,我不是很理解什么是浮动背景,更不用说固定内容了。幸好作者给出了几个网站,我好像明白了!(如果不正确,请指出)
大家可以先看看这些网站的效果,再来阅读下文

https://zh.airbnb.com/

https://www.cn.kayak.com/?ispredir=true

http://www.conosur.ie/

大家可以尝试改变浏览器窗口宽度(滚轮缩放一下),大概就能看到效果了。
用W3School的页面对比一下,可以更明显的感觉到(W3School的背景并不是浮动的)

2.这个效果我们常用于页尾,也建议用于页尾

小练习

html

<footer>  
  <div class="wrapper">   
     <!-- Footer content here --> 
  </div>
</footer>

css

footer{  
  background: #333; 
  padding: 1em calc(50% - 450px);
}

.wrapper{   
  background: #ccc;
  height: 200px;
}

我们并没有设置内容wrapper宽度,而是以padding形式来设置的
这里的宽度为 450*2 = 900px

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • 今年,距离我们分开已经六年了,也是我喜欢你的第八个春秋。我不知道自己还能拥有这种感觉多久,自从高中毕业后,我花...
    by追忆冰蓝阅读 3,025评论 0 1
  • 大家好,我是绵绵先生。这是我第一次的录音,往后的日子里,我会把我的心情,我随笔而做的,杂乱的文章在这里用声音跟你们...
    _鹿玖_阅读 1,391评论 0 1
  • 巜走进热带雨林》这本书是今天才收到的书,收到时小小的一本,我有点打问号,这书有这么牛吗还美国权威。今晚跟宝宝一起阅...
    ac107f3f6ade阅读 3,942评论 0 0

友情链接更多精彩内容