结合CSS3的布局新特征谈谈常见布局方法

2020-05-07 06:47:44易采站长站整理

CSS Code复制内容到剪贴板

<!–css–>   
<style type="text/css">   
    *{margin: 0;padding: 0;}   
    html,body {height: 100%;}   
    section {display: flex;height: 100%;}   
    article {order: 1;flex: 3;background: wheat;}   
    aside {flex: 1;background: seashell;}   
</style>   
  
<!–html–>   
<header></header>   
<section>   
    <article></article>   
    <aside></aside>   
    <section class="sidebar"></section>   
</section>   
<footer></footer>