简单教程
提交运行
代码编辑器:
<!DOCTYPE html> <meta charset="utf-8"><link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; font-weight: bold; text-align: center; } .flex-container > * { padding: 10px; flex: 1 100%; } .main { text-align: left; background: cornflowerblue; } .header {background: coral;} .footer {background: lightgreen;} .aside1 {background: moccasin;} .aside2 {background: violet;} @media all and (min-width: 600px) { .aside { flex: 1 auto; } } @media all and (min-width: 800px) { .main { flex: 3 0px; } .aside1 { order: 1; } .main { order: 2; } .aside2 { order: 3; } .footer { order: 4; } } </style> <div class="flex-container"> <header class="header">头部</header> <article class="main"> <p>简单教程 - 简单教程,简单编程<br/>简单教程(www.twle.cn)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线范例,通过范例,你可以更好的学习编程</p> </article> <aside class="aside aside1">边栏 1</aside> <aside class="aside aside2">边栏 2</aside> <footer class="footer">底部</footer> </div> <footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
运行结果: