Web前端响应式页面开发_布局

前端页面响应式开发|h5响应式前端开发|网站前端开发

html 代码

<!DOCTYPE html>
<head>
<metacharset=”utf-8″>
<title>前端开发页面自适应</title>
<style>
.flex-container{
display:-webkit-flex;
display:flex;
flex-wrap:wrap;
font-weight:bold;
text-align:center;
}
.flex-container>*{
padding:10px;
flex:1100%;
}
.main{
text-align:left;
background:cornflowerblue;
}
.header{
background:coral;
}
.footer{
background:lightgreen;
}
.aside1{
background:moccasin;
}
.aside2{
background:violet;
}
@mediaalland(min-width:500px){
.aside{
flex:1auto;
}
}
@mediaalland(min-width:800px){
.main{
flex:30px;
}
.aside1{
order:1;
}
.main{
order:2;
}
.aside2{
order:3;
}
.footer{
order:4;
}
}
</style>
</head>
<body>
<divclass=”flex-container”>
<headerclass=”header”>头部</header>
<articleclass=”main”>
<p>我是响应式布局,试一试吧~我是响应式布局,试一试吧~我是响应式布局,试一试吧~我是响应式布局,试一试吧~我是响应式布局,试一试吧~我是响应式布局,试一试吧~我是响应式布局,试一试吧~我是响应式布局,试一试吧~我是响应式布局,试一试吧~我是响应式布局,试一试吧~</p>
</article>
<asideclass=”aside aside1″>边栏 1</aside>
<asideclass=”aside aside2″>边栏 2</aside>
<footerclass=”footer”>底部</footer>
</div>
</body>
</html>
响应式网站前端开发|响应式开发 前端框架|前端响应式开发常用什么?
» 本文来自:前端开发者 » 《Web前端响应式页面开发_布局》
» 本文链接地址:https://www.rokub.com/3556.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!