html应用中心模板,html5-凯发k8官方网

应用网页模板

*  {

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;

}

页眉区域

1.主体内容区域

2.导航栏

3.侧边栏

页脚区域

//

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    

css     /*some*/

javascrip //

python  #

标签：

凯发k8官方网的版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，凯发k8官方网的版权归原作者所有

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是凯发k8官方网为你收集整理的html应用中心模板,html5--应用网页模板的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。