纯css3制作网站后台管理面板

软件名称：纯css3制作的后台管理面板效果源码软件大小：19KB更新时间：2014-10-22

HTML结构

复制代码代码如下:
<div class=”admin-panel clearfix”>
<div class=”slidebar”>
<div class=”logo”>
<a href=””></a>
</div>
<ul>
<li><a href=”#dashboard” id=”targeted”>dashboard</a></li>
<li><a href=”#posts”>posts</a></li>
<li><a href=”#media”>media</a></li>
<li><a href=”#pages”>pages</a></li>
<li><a href=”#links”>links</a></li>
<li><a href=”#comments”>comments</a></li>
<li><a href=”#widgets”>widgets</a></li>
<li><a href=”#plugins”>plugins</a></li>
<li><a href=”#users”>users</a></li>
<li><a href=”#tools”>tools</a></li>
<li><a href=”#settings”>settings</a></li>
</ul>
</div>
<div class=”main”>
<ul class=”topbar clearfix”>
<li><a href=”#”>q</a></li>
<li><a href=”#”>p</a></li>
<li><a href=”#”>o</a></li>
<li><a href=”#”>f</a></li>
<li><a href=”#”>n</a></li>
</ul>
<div class=”mainContent clearfix”>
<div id=”dashboard”>
<h2 class=”header”><span class=”icon”></span>Dashboard</h2>
<div class=”monitor”>
<h4>Right Now</h4>
<div class=”clearfix”>
<ul class=”content”>
<li>content</li>
<li class=”posts”><span class=”count”>179</span><a href=””>posts</a></li>
<li class=”pages”><span class=”count”>13</span><a href=””>pages</a></li>
<li class=”categories”><span class=”count”>21</span><a href=””>categories</a></li>
<li class=”tags”><span class=”count”>305</span><a href=””>tags</a></li>
</ul>
<ul class=”discussions”>
<li>discussions</li>
<li class=”comments”><span class=”count”>353</span><a href=””>comments</a></li>