HTML5--应用网页模板

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:400px;
}
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>
1.-moz-box; 老版本:firefox 19-
2.-webkit-box; 老版本:ios 6-,safari 3.1-3.6
3.-ms-flexbox; 混合版本:IE10
4.-webkit-flex; 新版本:Chrome
5.flex; 标准规范Opera 12.1,Firefox 20+ box-sizing:border-box; 并排放置2个带边框的框
display:block; 让对象成为块级元素
background-color:hsla(220,50%,50%,.9)
1.h: number; 色调 number对应相应的颜色
2.s:0-100%; 饱和度
3.l: 0-100%; 亮度
4.a: 0-1; alpha透明度
padding:10px 10px 10px 10px;
内边距:顺时针 上 右 下 左
margin:10px 10px 10px 10px;
外边距:顺时针 上 右 下 左
flex是flex-grow\flex-shrink\flex-basis的缩写
1.默认值0 1 auto
2.flex:none;
1.flex-grow:0; 扩展空间
2.flex-shrink:0; 收缩空间
3.flex-basis:auto; 伸缩比率
3.flex:auto;
1.flex-grow:1;
2.flex-shrink:1;
3.flex-basis:auto;
4.flex:1;
1.flex-grow:1;
2.flex-shrink:1;
3.flex-basis:0%;
在伸缩和布局中设置长度和宽度:min-width;min-height;
orient:
horizontal; 水平排列div元素的子元素
vertical; 垂直排列
direction:
normal 伸缩和对象的子元素正常排列
reverse 反向排列
lines:
multiple; 当一横排元素满的时候,换行显示
single; 当一横排元素满的时候,不换行显示
flow: 设置或检索弹性盒模型对象的子元素排列方式
row; x,主轴方向排列
column; y,横轴方向排列
wrap; 换行
nowrap; 不换行
align: 对齐
stretch; 伸展
ordinal-group:规定框中的子元素的显示次序
0; 默认,值越低越靠前
order: 设置或检索弹性盒模型对象的子元素出现顺序
0; 默认,值越低越靠前 注释:
html <!--some-->
css /*some*/
javascrip //
python #
HTML5--应用网页模板的更多相关文章
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
- 20款响应式的 HTML5 网页模板【免费下载】
下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...
- 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
- 15个前卫的 HTML5 & CSS3 网页设计作品
今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...
- 12款界面精美的 HTML5 & CSS3 网站模板
这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...
- 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板
创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...
- 12款高质量的响应式 HTML5/CSS3 网站模板
HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. ...
- 12款非常精致的免费 HTML5 & CSS3 网站模板
01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示 下载 02. Folder ...
- 32+激发灵感的HTML5/CSS3网页设计教程
HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...
- 30余套系统模版|DIV+CSS网页模板|简洁大气系统模板
30余套系统模版|DIV+CSS网页模板|简洁大气系统模板.都是一些后台系统的模版,很适合开发一些管理系统,办公系统,网站后台系统等.使用很广泛,很实用的系统模版. 下载地址: 点击下载
随机推荐
- 2018湖湘杯web、misc记录
1.题目名 Code Check 打开题目,右键发现有id参数的url,简单base64解码以后发现不是明文,说明利用了其他的加密方式,那么应该会有具体的加密方式给我们,于是试试常见的文件泄露,可以发 ...
- CSS中关于linebox的baseline位置移动的理解
前言 最近看到一篇文章,弗里得木的翻译笔记,里面有个问题没有解决,就是linebox的baseline为什么会移动呢? 在讨论这个问题之前读者需要对 默认值baseline 以及 其他属性值(天镶的博 ...
- <Android 应用 之路> 简易手电筒
前言 快一个月没有写自己的博客了,由于最近换了工作,换了居住地,所以有一些杂事需要处理,从今天开始恢复正常,不赘述了.进入今天的主题 -– 简易的手电筒. 这个Demo中使用的是比较新的API,M版本 ...
- SharePoint Tricks - HTML & CSS & JavaScript
1. 隐藏Quick Launch <style type="text/css">/*-- Hide Quick Launch --*/#s4-leftpanel{ ...
- Android 应用开发 之通过AsyncTask与ThreadPool(线程池)两种方式异步加载大量数据的分析与对比--转载
在加载大量数据的时候,经常会用到异步加载,所谓异步加载,就是把耗时的工作放到子线程里执行,当数据加载完毕的时候再到主线程进行UI刷新.在数据量非常大的情况下,我们通常会使用两种技术来进行异步加载,一 ...
- Win SDK 标准程序
//-Registering window class. //-Creating window. //-Creating message loop. //-Implement WndProc func ...
- Azure 12 月新公布
Azure 12 月新发布:人脸识别 API 推出更新,媒体服务当前几种计量方式的调整,Azure Media Redactor 提供预览, Azure 密钥保管库开始计费, 和 Azure 支付方式 ...
- raw_input与input的区别
1. 版本差异 raw_input——>python2版本 input——>python3版本 2. 输入格式差异 就是raw_input()随便输都是字符串,而input()必须按照Py ...
- GO Lang学习笔记 - 基础知识
Go lang Learn Note 标签(空格分隔): Go Go安装和Go目录 设置环境变量GOROOT和GOPATH,前者是go的安装目录,后者是开发工作目录.go get包只会将包下载到第一个 ...
- em px 换算在线工具
网址: http://pxtoem.com/#help http://www.runoob.com/tags/ref-pxtoemconversion.html