创建一个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; 
} 

 

nav, nav ul, nav ul li, nav ul li i

这里我们需要在side-bar中重用这些导航,设置导航以水平排列,菜单条目纵向排列,这样才能有覆盖在内容上的菜单icon。

 

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

 

.side-bar

side-bar有position: absolute,在桌面屏幕不会显示,定位在屏幕左边。

.side-bar-visible

这是简单地移动side-bar进入屏幕可见区域

.side-bar-nav

应用side-bar中ul元素, 只是改变flex方向到column.


.side-bar-nav li

利用main nav但是改变其中一些属性

 

下页