1、固定定位

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

2、三行三列布局

<header>页眉</header>
    <div class="container">
         <aside>左侧区域</aside>
        <main>中间区域</main>
        <aside>右侧区域</aside>
    </div>
    <footer>页脚</footer>
    <style>
        *{margin:0;padding: 0;box-sizing:border-box;}
        header{height: 2em;background: red;}
        .container{background: #fff;position: relative;min-height:calc(100vh - 5em);margin: 0.5em 0;}
        .container aside{position: absolute;width: 10em;min-height: inherit;background: blue;}
        .container aside:first-of-type{right: 0;top:0;}
        .container main{position: absolute;left:10em;right: 10em;margin: 0 0.5em;background: #007aff;min-height: inherit;}
        footer{background: yellow;height: 2em;}
    </style>

固定定位、三行三列布局

1、固定定位

2、三行三列布局

更多相关文章

随机推荐