應(yīng)用網(wǎng)頁(yè)模板

* ?{

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;

}

頁(yè)眉區(qū)域

1.主體內(nèi)容區(qū)域

2.導(dǎo)航欄

3.側(cè)邊欄

頁(yè)腳區(qū)域

//

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;??????標(biāo)準(zhǔn)規(guī)范Opera 12.1,Firefox 20+

box-sizing:border-box;?并排放置2個(gè)帶邊框的框

display:block;?????讓對(duì)象成為塊級(jí)元素

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

1.h: number;?色調(diào) number對(duì)應(yīng)相應(yīng)的顏色

2.s：0-100%;?飽和度

3.l: 0-100%;?亮度

4.a: 0-1;???alpha透明度

padding:10px 10px 10px 10px;

內(nèi)邊距:順時(shí)針 上 右 下 左

margin：10px 10px 10px 10px;

外邊距:順時(shí)針 上 右 下 左

flex是flex-grow\flex-shrink\flex-basis的縮寫(xiě)

1.默認(rèn)值0 1 auto

2.flex:none;

1.flex-grow:0;???擴(kuò)展空間

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%;

在伸縮和布局中設(shè)置長(zhǎng)度和寬度:min-width;min-height;

orient:

horizontal; 水平排列div元素的子元素

vertical；? 垂直排列

direction:

normal???伸縮和對(duì)象的子元素正常排列

reverse???反向排列

lines:

multiple;? ?當(dāng)一橫排元素滿的時(shí)候,換行顯示

single;?? ?當(dāng)一橫排元素滿的時(shí)候,不換行顯示

flow:?????設(shè)置或檢索彈性盒模型對(duì)象的子元素排列方式

row;????x,主軸方向排列

column;???? y,橫軸方向排列

wrap;????換行

nowrap;???不換行

align:?? ???對(duì)齊

stretch;??伸展

ordinal-group:規(guī)定框中的子元素的顯示次序

0;?????默認(rèn),值越低越靠前

order:????設(shè)置或檢索彈性盒模型對(duì)象的子元素出現(xiàn)順序

0;?????默認(rèn),值越低越靠前

注釋:

html ???

css? ???/*some*/

javascrip //

python??#

標(biāo)簽：

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com

特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)，本站所提供的攝影照片，插畫(huà)，設(shè)計(jì)作品，如需使用，請(qǐng)與原作者聯(lián)系，版權(quán)歸原作者所有

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的html应用中心模板,HTML5--应用网页模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。