HTML5--混合布局
1.先上效果图,大家来看看
2.代码如下:
<!doctype html>
<meta charset='utf-8' content='text/html' />
<head>
<title>应用网页模板</title>
<style content='text/css'>
* {
margin:0px;
padding:0px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html,body {
width:100%;
background:#fff;
}
body {
min-width:100%;
}
header,section,nav,article,aside,footer {
display:block;
text-align:center;
text-shadow:1px 1px 1px #444;
font-size:1.2em;
}
header {
background-color:hsla(200,10%,20%,0.9);
min-height:100px;
min-width:100%;
padding:10px 20px;
}
footer {
background-color:hsla(250,50%,80%,0.9);
min-width:100%;
padding:1%;
min-height:60px;
}
section {
min-width:100%;
min-height:800px;
}
section nav {
background-color:hsla(300,60%,20%,.9);
padding:1%;
width:220px;
}
section article {
background-color:hsla(120,50%,50%,.9);
padding:1%;
}
section aside {
background-color:hsla(20,80%,80%,.9);
padding:1%;
width:220px;
}
body {
display:flex;
display:-ms-flex;
-ms-flex-flow:column wrap;
flex-flow:column wrap;
}
section {
display:-ms-flex;
display:flex;
-ms-flex:1;
flex:1;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
-ms-flex-align:stretch;
align-items:stretch;
}
nav {
flex:1;
-ms-flex-order:0;
order:0;
}
article {
-ms-flex:1;
flex:1;
-ms-flex-order:2;
order:2;
}
aside {
flex:1;
-ms-flex-order:3;
order:3;
}
</style> </head> <body>
<header>页眉区域</header>
<section>
<article>1.主体内容区域</article>
<nav>2.导航栏</nav>
<aside>3.侧边栏</aside>
</section>
<footer>页脚区域</footer>
</body>
HTML5--混合布局的更多相关文章
- html5 基本布局+新标签+新选择器 + 线性渐变
html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- DIV+CSS 网页布局之：混合布局
1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...
- Qt 5.4正式发布！引入WP，支持HTML5混合开发
北京时间12月11日消息,Digia全资子公司The Qt Company在其 官方博客上宣布,正式发布Qt 5.4,支持HTML5混合开发,引入对于Windows Phone的支持,以及众多跨桌面. ...
- CSS 实现流布局以及多列混合布局
基本流布局 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <ti ...
- Android + HTML5 混合开发
摘要: 对于 Android + HTML5 混合开发以下的观点仅仅是我的个人观点,如果有什么不对的地方请指正 简介: 混合开发的 App(Android + HTML5)就是在一个 App 中内嵌一 ...
- Swing 混合布局
案例一:Border边境边界 package swing; /** * swing 混合布局 */ import java.awt.*; import javax.swing.*; public cl ...
- 慕课笔记利用css进行布局【混合布局】
<html> <head> <title>混合布局学习</title> <style type="text/css"> ...
- html5 弹性布局
html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...
- doT.js实现混合布局，判断，数组，函数使用，取模，数组嵌套
doT.js实现混合布局 数据结构 { "status": "1", "msg": "获取成功", "info ...
- RecyclerView实现混合布局
PS:好长时间不写博客了,起初是不知道写些什么,后来接触了到了很多东西,原本看似简单的东西,背后都隐藏着巨大的秘密,想handler的使用,一般情况下会引起内存泄漏问题,想着找到方法结局不就得了吗,可 ...
随机推荐
- HDU 5340——Three Palindromes——————【manacher处理回文串】
Three Palindromes Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- DevExtreme 搭建Node.js开发环境
简介 DevExtreme is a component suite for creating highly responsive web applications for touch devices ...
- SQL Server 创建用户
增加角色 role_for_nc 1.exec sp_addrole 'role_for_nc'; 创建一个 SQL Server 登录名wlzx,密码为"123",默认数据库为 ...
- 文件选择之OpenFileDialog控件
OpenFileDialog控件主要用于选择要打开的文件,在使用时可以在属性面变中设置属性,也可在代码中设置其属性 OpenFileDialog控件的属性 InitialDirectory 对话框的初 ...
- 零基础逆向工程33_Win32_07_创建线程
1 什么是线程(Threads)? 什么是多线程? 怎么在windows中观察多线程? 线程可以简单理解为主程序为解决一个问题而选择的其中一条路线. 同理,多线程就是同时选择不同的路线来解决此问题. ...
- css多行文本溢出显示省略号
HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...
- struts2 中使用DMI（动态调用方法）方式配置action
1.使用 "!"方式,即 action名称 ! 方法名称 struts.xml 配置 <package name="user" namespace=&qu ...
- 《深入理解Java7核心技术与最佳实践》读书笔记（1.1）---Project Coin介绍
OpenJDK中的Coin项目(Project Coin)的目的就是为了收集对Java语言的语法进行增强的建议.在Coin项目开始之初,曾经广泛地向社区征求提议.在短短的一个月时间内就收到将近70条提 ...
- Element（Vue）+Express（Node）模拟服务器获取本地json数据
网上很多教程说需要在build目录下的dev-server.js文件中配置,但目前最新的vue-cli是没有dev-server.js这个文件的,因为已经被合并到webpack.dev.conf.js ...
- 修改Linux中发送邮件中附件大小的限制
方法一: 在命令中设定postfix的message_size_limit值 (但系统重启后会失效) postconf -e "message_size_limit = 20480000&q ...