html应用中心模板,HTML5--应用网页模板
* ?{
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??#
標簽：
版權申明：本站文章部分自網絡，如有侵權，請聯系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯系，版權歸原作者所有
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的html应用中心模板,HTML5--应用网页模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： harmonyos2.0如何申请,华为鸿
- 下一篇： java url获取 html body