博客列表 >固定定位、三行三列布局

固定定位、三行三列布局

酒馆读书人.
酒馆读书人.原创
2021年07月02日 23:22:30609浏览

1、固定定位

  1. <div class="fiexd">
  2. <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2581114617&site=qq&menu=yes">
  3. <img border="0" src="http://wpa.qq.com/pa?p=2:2581114617:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
  4. </a>
  5. </div>
  6. <style>
  7. .fiexd{
  8. position: fixed;
  9. top:200px;
  10. left:50px;
  11. }
  12. </style>

2、三行三列布局

  1. <header>页眉</header>
  2. <div class="container">
  3. <aside>左侧区域</aside>
  4. <main>中间区域</main>
  5. <aside>右侧区域</aside>
  6. </div>
  7. <footer>页脚</footer>
  8. <style>
  9. *{margin:0;padding: 0;box-sizing:border-box;}
  10. header{height: 2em;background: red;}
  11. .container{background: #fff;position: relative;min-height:calc(100vh - 5em);margin: 0.5em 0;}
  12. .container aside{position: absolute;width: 10em;min-height: inherit;background: blue;}
  13. .container aside:first-of-type{right: 0;top:0;}
  14. .container main{position: absolute;left:10em;right: 10em;margin: 0 0.5em;background: #007aff;min-height: inherit;}
  15. footer{background: yellow;height: 2em;}
  16. </style>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议