新建html文档。

书写hmtl代码。

html+CSS3扁平化圆形风格面包屑导航

 
• file
 
• folder
 
• CSS 3
 
• Lab
 

书写css代码。

书写字体图标css代码。@font-face { font-family: 'FontAwesome'; src: url('font/fontawesome-webfont.eot?v=3.2.1'); src: url('font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); font-weight: normal; font-style: normal; }[class^='icon-'], [class*=' icon-'] { font-family: FontAwesome;font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased;*margin-right: .3em;}@-moz-keyframes spin { 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(359deg);}}@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(359deg);}}@-o-keyframes spin { 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(359deg);}}@-ms-keyframes spin { 0% { -ms-transform: rotate(0deg);} 100% { -ms-transform: rotate(359deg);}}@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(359deg);}}.icon-rotate-90:before { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}.icon-rotate-180:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}.icon-rotate-270:before { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}.icon-flip-horizontal:before { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); }.icon-flip-vertical:before { -webkit-transform: scale(1, -1); -moz-transform: scale(1, -1); -ms-transform: scale(1, -1); -o-transform: scale(1, -1); transform: scale(1, -1); }a .icon-rotate-90:before, a .icon-rotate-180:before, a .icon-rotate-270:before, a .icon-flip-horizontal:before, a .icon-flip-vertical:before { display: inline-block; }.icon-file:before { content: '\f15b'; }.icon-folder-open:before { content: '\f07c'; }.icon-code:before { content: '\f121'; }.icon-beaker:before { content: '\f0c3'; }.icon-home:before { content: '\f015'; }

代码整体结构

查看效果