桌面网页模板html5,HTML5 应用网页模板

/*基本样式*/

* {

margin: 0;

padding: 0;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

html, body {

height: 100%;

color: #fff;

}

body {

min-width: 100%;

}

header, section, article, nav, aside, footer {

display: block;

text-align: center;

text-shadow: 1px 1px 1px #444;

font-size: 1.2em;

}

/*页眉框样式：限高、限宽*/

header {

background-color: hsla(200,10%,20%,.9);

min-height: 100px;

padding: 10px 20px;

min-width: 100%;

}

/*主体区域框样式：满宽显示*/

section {

min-width: 100%;

}

/*导航框样式：固定宽度*/

nav {

background-color: hsla(300,60%,20%,.9);

padding: 1%;

width: 220px;

}

/*文档栏样式*/

article {

background-color: hsla(120,50%,50%,.9);

padding: 1%;

}

/*侧边栏样式：弹性宽度*/

aside {

background-color: hsla(20,80%,80%,.9);

padding: 1%;

width: 220px;

}

/*页脚样式：限高、限宽*/

footer {

background-color: hsla(250,50%,80%,.9);

min-height: 60px;

padding: 1%;

min-width: 100%;

}

/*flexbox样式*/

body {

/*设置body为伸缩容器*/

display: -webkit-box; /*老版本：iOS 6-, Safari 3.1-6*/

display: -moz-box; /*老版本：Firefox 19- */

display: -ms-flexbox; /*混合版本：IE10*/

display: -webkit-flex; /*新版本：Chrome*/

display: flex; /*标准规范：Opera 12.1, Firefox 20+*/

/*伸缩项目换行*/

-moz-box-orient: vertical;

-webkit-box-orient: vertical;

-moz-box-direction: normal;

-moz-box-direction: normal;

-moz-box-lines: multiple;

-webkit-box-lines: multiple;

-webkit-flex-flow: column wrap;

-ms-flex-flow: column wrap;

flex-flow: column wrap;

}

/*实现stick footer效果*/

section {

display: -moz-box;

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

-webkit-flex: 1;

flex: 1;

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

-moz-box-direction: normal;

-webkit-box-direction: normal;

-moz-box-lines: multiple;

-webkit-box-lines: multiple;

-ms-flex-flow: row wrap;

-webkit-flex-flow: row wrap;

flex-flow: row wrap;

-moz-box-align: stretch;

-webkit-box-align: stretch;

-ms-flex-align: stretch;

-webkit-align-items: stretch;

align-items: stretch;

}

/*文章区域伸缩样式*/

article {

-moz-box-flex: 1;

-webkit-box-flex: 1;

-ms-flex: 1;

-webkit-flex: 1;

flex: 1;

-moz-box-ordinal-group: 2;

-webkit-box-ordinal-group: 2;

-ms-flex-order: 2;

-webkit-order: 2;

order: 2;

}

/*侧边栏伸缩样式*/

aside {

-moz-box-ordinal-group: 3;

-webkit-box-ordinal-group: 3;

-ms-flex-order: 3;

-webkit-order: 3;

order: 3;

}

页眉区域

1.主体内容区域

2.导航栏

3.其他栏目

页脚区域

标签：box,flex,网页,moz,HTML5,ms,webkit,display,模板

来源： https://blog.csdn.net/sakenc/article/details/91490108