html 通用ui css图标,纯CSS3超酷扁平风格后台面板UI设计

这是一款使用纯CSS3制作的超酷扁平风格后台面板UI设计效果。该后台面板设计风格简洁大方，采用侧边栏TAB来切换各个面板的内容。整个界面使用扁平化设计，非常的时尚。

制作方法

HTML结构

该后台面板使用一个

作为包裹容器，里面div.avatar是用户的头像，每一个input.radio和它之后的 元素以及font-awesome字体图标组成一个侧边栏TAB菜单。div.top-bar是面板顶部的菜单图标。div.tab-content中的每一个section对应TAB菜单的一个选项。

Home

......

...

One

...

CSS样式

该后台面板UI的CSS样式并不复杂，值得注意的一点是它使用checked hack来制作点击TAB时切换面板的效果。

.clear-backend > input.tab-1:checked ~ .tab-content .tab-item-1 {

display: block;

}

.clear-backend > input.tab-2:checked ~ .tab-content .tab-item-2 {

display: block;

}

.clear-backend > input.tab-3:checked ~ .tab-content .tab-item-3 {

display: block;

}

.clear-backend > input.tab-4:checked ~ .tab-content .tab-item-4 {

display: block;

}

.clear-backend > input.tab-5:checked ~ .tab-content .tab-item-5 {

display: block;

}

.clear-backend > input.tab-6:checked ~ .tab-content .tab-item-6 {

display: block;

}

.clear-backend > input.tab-7:checked ~ .tab-content .tab-item-7 {

display: block;

}

.clear-backend > input.tab-8:checked ~ .tab-content .tab-item-8 {

display: block;

}

.clear-backend > input.tab-9:checked ~ .tab-content .tab-item-9 {

display: block;

}

.clear-backend > input.tab-10:checked ~ .tab-content .tab-item-10 {

display: block;

}