首页 > > 网页制作 > css >

HTML5--应用网页模板

2018-07-03 01:24:52来源：博客园阅读 ()

<!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    
css    /*some*/
javascrip //
python  #

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有