创建一个HTMl5 Material设计模板(2)

上页

　　CSS部分：这是奇迹发生的地方，虽然CSS有点泛泛和普通的没有什么不同。

*{ 
   margin:0; 
   padding:0; 
   box-sizing: border-box ; 
} 

*星号

• 表示应用每个selector，然后是移除默认的margin和padding值，box-size修改使用为boder-box; 默认是没有继承性。使用boder-box，则内容的宽度是包含margin和padding，但是这里设置为0，实际就是内容真正宽度或高度。

body{ 
   display:flex ; 
   flex-direction:column ; 
   align-items:center ;   
   min-height:100vh ; 
   background:#f6f6f6; 
   font-family:  'Roboto', sans-serif ; 
} 

body

• 设置display为 flex, 横向位于中间，内容垂直方向向下。

header{ 
   display:flex ; 
   align-items:center ; 
   justify-content:space-between ; 
   min-height:70px ; 
   width:100%; 
   background:#448AFF; 
   box-shadow:  0  0  1px  rgba(0, 0, 0, 0.14), 0  1px  4px  rgba(0, 0, 0, 0.28); 
     z-index:1; 
} 

header:

header有flex元素justify-content属性是规定水平方向上布局，此处值设置为space-between，让子元素平均分布，首个子元素在容器最左边，最后一个子元素在最右边。header中只有两个子元素，因此使用space-between就会让这两个子元素一个靠左，一个靠右。

header  .menu-icon{ 
   margin:7.5px  15px ; 
   font-size:30px ; 
   opacity:0; 
   visibility:hidden ; 
   color:#123113; 
} 
 
header h1{ 
   margin:0; 
   color:#fefefe; 
   text-align:center ;  
   text-shadow:  1px  1px  4px  #454545; 
} 
 
header sub{ 
   font-size:15px ; 
} 
 
header  .primary-header-content,  .secondary-header-content{ 
   display:flex ; 
   align-items:center ; 
   height:  18px ; 
} 

header .menu-icon

这个样式icon会隐身侧栏side-bar, 只有在屏幕是移动屏幕尺寸时显示。

header .primary-header-content, .secondary-header-content

这是header两个子元素，属于flex元素, 它们内部内容是横向排列，以中间为居中。

nav{ 
   flex:1  1 auto ; 
} 
 
nav ul{ 
   display:flex ; 
   justify-content:flex-end ; 
   list-style:none ; 
   font-size:16px ; 
   color:white ; 
   cursor: pointer ; 
} 
 
nav ul li{ 
   display:flex ; 
   flex-direction:column ; 
   align-items:center ; 
  
   margin:0  30px ; 
   max-width:80px ; 
   text-shadow:  1px  1px  4px  #454545; 
} 
 
nav ul li i{ 
   font-size:30px  !important; 
} 

header  .search-area{ 
   display:flex ; 
   justify-content:center ; 
   align-items:center ; 
  
   margin:  0  20px ; 
   padding:5px  0; 
   max-height:35px ; 
  
   box-shadow:  0  0  1px  rgba(0, 0, 0, 0.14), 0  1px  4px  rgba(0, 0, 0, 0.18); 
  
   border-radius:1px ; 
   background:white ; 
   overflow:hidden ; 
   transition: height  .3s  cubic-bezier(.68,- .55, .265, 1.55),color  .3s ease ; 
} 
  
header  .search-area  .search{ 
   border:none ; 
   background:#f6f6f6; 
   padding:  0  10px ; 
   height:30px ; 
   outline: none ; 
   background:white ; 
   width:200px ; 
  
} 
 
/*Search icon*/ 
header  .search-area i{ 
   font-size:  30px ; 
   color:#123113; 
} 

/*Side-bar*/ 
.side-bar{ 
   position:absolute ; 
   top:0; 
   left:- 300px ; 
   z-index:2; 
  
   width:250px ; 
   height:100%; 
   background:white ; 
   box-shadow:  0  0  1px  rgba(0,  0,  0,  0.24),  2px  0  20px  rgba(0,  0,  0,  0.46); 
  
   transition: all  0.4s ease ; 
} 
 
.side-bar-visible{ 
   transform: translate 3d(300px, 0, 0); 
} 
 
.side-bar-primary-area{ 
   height:115px ;/*115px;*/ 
   background:  #448AFF; 
} 
 
.side-bar-nav{ 
   /*we'll reuse some of the nav properties*/ 
   flex-direction:column ; 
} 
 
.side-bar-nav li{ 
   /*we'll reuse some of the nav properties*/ 
   flex-direction:row ; 
   justify-content:space-between ; 
   max-width:100%; 
   margin:  0  15px ; 
   color:  #747474; 
   text-shadow:none ; 
   height:40px ; 
   border-bottom:1px solid  #F6F6F6; 
}